add: Dashboard progress style widget

pdliuw · Apr 14, 2020 · 40ba307 · 40ba307
1 parent 1573a6c
commit 40ba307
Show file tree

Hide file tree

Showing 5 changed files with 336 additions and 28 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -134,20 +134,48 @@ class _MyHomePageState extends State<MyHomePage>
                 });
               },
             ),
-            Stack(
-              alignment: Alignment.center,
-              children: <Widget>[
-                Container(
-                  width: 150,
-                  height: 150,
-                  padding: EdgeInsets.all(5),
-                  child: CircularProgressIndicator(
-                    value: _segmentValue / 10,
-                    strokeWidth: 10.0,
-                    valueColor: _colorTween,
-                  ),
+            Row(
+              children: [
+                Spacer(),
+                Stack(
+                  alignment: Alignment.center,
+                  children: <Widget>[
+                    Container(
+                      width: 150,
+                      height: 150,
+                      padding: EdgeInsets.all(5),
+                      child: CircularProgressIndicator(
+                        value: _segmentValue / 10,
+                        strokeWidth: 10.0,
+                        valueColor: _colorTween,
+                      ),
+                    ),
+                    Text("${_segmentValue / 10 * 100}%"),
+                  ],
                 ),
-                Text("${_segmentValue / 10 * 100}%"),
+                Spacer(),
+                Stack(
+                  alignment: Alignment.center,
+                  children: <Widget>[
+                    Container(
+                      width: 150,
+                      height: 150,
+                      padding: EdgeInsets.all(5),
+                      child: AirDashboardStateProgressIndicator(
+                        size: Size(150, 150),
+                        value: _segmentValue / 10 * 100, //1~100
+                        valueColor:
+                            ColorTween(begin: Colors.grey, end: Colors.blue)
+                                .transform(_segmentValue / 10),
+                        pathStrokeWidth: 10,
+                        valueStrokeWidth: 10,
+                        gapDegree: 60,
+                      ),
+                    ),
+                    Text("${_segmentValue / 10 * 100}%"),
+                  ],
+                ),
+                Spacer(),
               ],
             ),
             //圆环、扇形样式的进度

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -7,7 +7,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.0"
+    version: "0.1.1"
   archive:
     dependency: transitive
     description:

diff --git a/lib/ai_progress.dart b/lib/ai_progress.dart
@@ -2,5 +2,6 @@ library ai_progress;
 
 /// export
 export 'src/circular_state_progress_indicator.dart';
+export 'src/dashboard_state_progress_indicator.dart';
 export 'src/linear_state_progress_indicator.dart';
 export 'src/step_state_progress_indicator.dart';
diff --git a/lib/src/circular_state_progress_indicator.dart b/lib/src/circular_state_progress_indicator.dart
@@ -5,6 +5,15 @@ import 'progress_mixin.dart';
 /// CircularStateProgressIndicator
 // ignore: must_be_immutable
 class AirCircularStateProgressIndicator extends StatefulWidget {
+  /// Limited min value
+  static const double LIMITED_MIN_VALUE = 0;
+
+  /// Limited max value
+  static const double LIMITED_MAX_VALUE = 100;
+
+  /// default value
+  static const double DEFAULT_VALUE = 10;
+
   Size _size;
   double _min;
   double _max;
@@ -18,19 +27,30 @@ class AirCircularStateProgressIndicator extends StatefulWidget {
 
   /// constructor
   AirCircularStateProgressIndicator({
-    Size size,
-    double min,
-    double max,
-    num value,
-    Color pathColor,
+    @required Size size,
+    double min = LIMITED_MIN_VALUE,
+    double max = LIMITED_MAX_VALUE,
+    num value = DEFAULT_VALUE,
+    Color pathColor = Colors.white,
     Color valueColor = Colors.green,
     double pathStrokeWidth = 5,
     double valueStrokeWidth = 5,
     bool filled = false,
     bool useCenter = false,
   }) {
+    assert(size != null);
+    assert(min >= LIMITED_MIN_VALUE);
+    assert(max <= LIMITED_MAX_VALUE);
+    assert(value >= min);
+    assert(value <= max);
+    assert(pathColor != null);
+    assert(valueColor != null);
+    assert(pathStrokeWidth != null);
+    assert(valueStrokeWidth != null);
+    assert(filled != null);
+    assert(useCenter != null);
     _size = size;
-    //value >= 0.00,value<=100
+    //value
     _value = value;
     _min = min;
     _max = max;
@@ -98,8 +118,16 @@ class _CircularStateProgressIndicatorState
 
 /// CircularProgressPaint
 class CircularProgressPaint extends CustomPainter with ProgressMixin {
-  final num maxSweepAngle = 6.5;
+  /// The max sweep angle exclude stroke cap
+  final num maxSweepAngleExcludeCap = 6.2;
+
+  /// The max sweep angle include stroke cap
+  final num maxSweepAngleIncludeCap = 6.5;
   final num minSweepAngle = 1.0;
+
+  /// start angle
+  static const double DEFAULT_START_ANGLE = -1.5;
+
   bool _shouldRepaint;
   num _min;
   num _max;
@@ -157,39 +185,44 @@ class CircularProgressPaint extends CustomPainter with ProgressMixin {
   }
 
   double _getStartAngle() {
-    return -1.5;
+    return DEFAULT_START_ANGLE;
   }
 
   double _getSweepAngle() {
-    if (_value == 0) {
+    if (_value == _min) {
       return 0;
     }
-    if (_value > 0 && _value < 50) {
+    if (_value > _min && _value < maxHalf) {
       return (_value * 0.0612);
     }
-    if (_value == 50) {
+    if (_value == maxHalf) {
       return _value * 0.0600;
     }
-    if (_value > 50 && _value < 100) {}
-    if (_value == 100) {
-      return 6.5;
+    if (_value > maxHalf && _value < _max) {}
+    if (_value == _max) {
+      return maxSweepAngleIncludeCap;
     }
     return (_value * 0.0615);
   }
 
+  /// the half of max value
+  get maxHalf => _max / 2;
+
   /// useCenter
   /// whether use center point close the path.
   bool get useCenter {
     return _useCenter;
   }
 
+  /// circular radius
   double _getRadius({Size size}) {
     double radius =
         size.width / 2 < size.height / 2 ? size.width / 2 : size.height / 2;
     radius -= _valuePaint.strokeWidth / 2;
     return radius;
   }
 
+  /// point
   Offset _getOffset({Size size}) {
     return Offset(size.width / 2, size.height / 2);
   }