#14 Multiple Colors support Part3 (#18)

Author: TinoGuo

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [3.0.0] 2021/07/18
+* Support color collection #15
+* Support customize stroke width #15
+* Support customize stroke background #18
+
 ## [2.1.1] 2021/05/22
 * Bump Dart to 2.13
 

README.md

@@ -9,7 +9,7 @@ A collection of out of the box loading animations written in pure dart, no extra
 
 Now, you can click [this site](https://tinoguo.github.io/loading_indicator/) to preview.**3D effect will be invalid in web.**
 
-![](gif/demo_2021_07_18.gif)
+![](gif/demo_2021_07_18_02.gif)
 
 ## Animation types
 
@@ -18,11 +18,12 @@ Now, you can click [this site](https://tinoguo.github.io/loading_indicator/) to
 |1. ballPulse | 2. ballGridPulse | 3. ballClipRotate | 4. squareSpin|
 |5. ballClipRotatePulse | 6. ballClipRotateMultiple | 7. ballPulseRise | 8. ballRotate|
 |9. cubeTransition | 10. ballZigZag | 11. ballZigZagDeflect | 12. ballTrianglePath|
-|13. ballScale | 14. lineScale | 15. lineScaleParty | 16. ballScaleMultiple|
-|17. ballPulseSync | 18. ballBeat | 19. lineScalePulseOut | 20. lineScalePulseOutRapid|
-|21. ballScaleRipple | 22. ballScaleRippleMultiple | 23. ballSpinFadeLoader | 24. lineSpinFadeLoader|
-|25. triangleSkewSpin | 26. pacman | 27. ballGridBeat | 28. semiCircleSpin|
-|29. ballRotateChase | 30. orbit | 31. audioEqualizer | 32. circleStrokeSpin|
+|13. ballTrianglePathColored | 14.ballTrianglePathColoredFilled | 15. ballScale | 16. lineScale|
+|17. lineScaleParty | 18. ballScaleMultiple | 19. ballPulseSync | 20. ballBeat|
+|21. lineScalePulseOut | 22. lineScalePulseOutRapid |23. ballScaleRipple | 24. ballScaleRippleMultiple|
+|25. ballSpinFadeLoader | 26. lineSpinFadeLoader | 27. triangleSkewSpin | 28. pacman|
+|29. ballGridBeat | 30. semiCircleSpin| 31. ballRotateChase | 32. orbit|
+|33. audioEqualizer | 34. circleStrokeSpin|
 
 ## Installing
 Install the latest version from [pub](https://pub.dev/packages/loading_indicator)
@@ -32,10 +33,11 @@ Simple but powerful parameters
 
 ```
 LoadingIndicator(
-    colors: const [Colors.white],       /// The color collections
-    indicatorType: Indicator.ballPulse, /// The loading type of the widget
-    strokeWidth: 2,                     /// The stroke of the line, only applicable to widget which contains line
-    backgroundColor: Colors.black,      /// Background of the widget
+    indicatorType: Indicator.ballPulse, /// Required, The loading type of the widget
+    colors: const [Colors.white],       /// Optional, The color collections
+    strokeWidth: 2,                     /// Optional, The stroke of the line, only applicable to widget which contains line
+    backgroundColor: Colors.black,      /// Optional, Background of the widget
+    pathBackgroundColor: Colors.black   /// Optional, the stroke backgroundColor
 )
 ```
 

README_CN.md

@@ -9,7 +9,7 @@
 
 现在你可以点击这个[地址](https://tinoguo.github.io/loading_indicator/)来进行预览.**3D效果在web上会失效.**
 
-![](gif/demo_2021_07_18.gif)
+![](gif/demo_2021_07_18_02.gif)
 
 ## 动画类型
 
@@ -18,24 +18,26 @@
 |1. ballPulse | 2. ballGridPulse | 3. ballClipRotate | 4. squareSpin|
 |5. ballClipRotatePulse | 6. ballClipRotateMultiple | 7. ballPulseRise | 8. ballRotate|
 |9. cubeTransition | 10. ballZigZag | 11. ballZigZagDeflect | 12. ballTrianglePath|
-|13. ballScale | 14. lineScale | 15. lineScaleParty | 16. ballScaleMultiple|
-|17. ballPulseSync | 18. ballBeat | 19. lineScalePulseOut | 20. lineScalePulseOutRapid|
-|21. ballScaleRipple | 22. ballScaleRippleMultiple | 23. ballSpinFadeLoader | 24. lineSpinFadeLoader|
-|25. triangleSkewSpin | 26. pacman | 27. ballGridBeat | 28. semiCircleSpin|
-|29. ballRotateChase | 30. orbit | 31. audioEqualizer | 32. circleStrokeSpin|
+|13. ballTrianglePathColored | 14.ballTrianglePathColoredFilled | 15. ballScale | 16. lineScale|
+|17. lineScaleParty | 18. ballScaleMultiple | 19. ballPulseSync | 20. ballBeat|
+|21. lineScalePulseOut | 22. lineScalePulseOutRapid |23. ballScaleRipple | 24. ballScaleRippleMultiple|
+|25. ballSpinFadeLoader | 26. lineSpinFadeLoader | 27. triangleSkewSpin | 28. pacman|
+|29. ballGridBeat | 30. semiCircleSpin| 31. ballRotateChase | 32. orbit|
+|33. audioEqualizer | 34. circleStrokeSpin|
 
 ## 安装
 从[pub](https://pub.dev/packages/loading_indicator)安装最新版本。
 
 ## 使用
-使用很简单。
+简单且强大的API。
 
 ```
 LoadingIndicator(
-    colors: const [Colors.white],       /// 颜色集合
-    indicatorType: Indicator.ballPulse, /// loading的类型
-    strokeWidth: 2,                     /// 线条宽度，只对含有线条的组件有效
-    backgroundColor: Colors.black,      /// 组件背景色
+    colors: const [Colors.white],       /// 必须, 颜色集合
+    indicatorType: Indicator.ballPulse, /// 可选, loading的类型
+    strokeWidth: 2,                     /// 可选, 线条宽度，只对含有线条的组件有效
+    backgroundColor: Colors.black,      /// 可选, 组件背景色
+    pathBackgroundColor: Colors.black   /// 可选, 线条背景色
 )
 ```
 

example/lib/main.dart

@@ -28,17 +28,14 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: 'LoadingIndicator example',
       debugShowCheckedModeBanner: false,
-      theme: ThemeData(
-        primarySwatch: Colors.pink,
-        primaryColor: Colors.white,
-      ),
       home: MainWidget(),
     );
   }
 }
 
 class MainWidget extends StatelessWidget {
-  _showSingleAnimationDialog(BuildContext context, Indicator indicator) {
+  _showSingleAnimationDialog(
+      BuildContext context, Indicator indicator, bool showPathBackground) {
     Navigator.push(
       context,
       MaterialPageRoute(
@@ -54,6 +51,9 @@ class MainWidget extends StatelessWidget {
                 child: LoadingIndicator(
                   indicatorType: indicator,
                   colors: _kDefaultRainbowColors,
+                  strokeWidth: 4.0,
+                  pathBackgroundColor:
+                      showPathBackground ? Colors.black45 : null,
                 ),
               ),
             ),
@@ -80,9 +80,16 @@ class MainWidget extends StatelessWidget {
         body: ListView.builder(
           itemBuilder: (ctx, index) {
             return InkWell(
-              onTap: () {
-                _showSingleAnimationDialog(ctx, Indicator.values[index]);
-              },
+              onTap: () => _showSingleAnimationDialog(
+                ctx,
+                Indicator.values[index],
+                false,
+              ),
+              onLongPress: () => _showSingleAnimationDialog(
+                ctx,
+                Indicator.values[index],
+                true,
+              ),
               child: Padding(
                 padding: const EdgeInsets.only(left: 16, top: 16, bottom: 16),
                 child: Text(
@@ -124,14 +131,15 @@ class GridWidget extends StatelessWidget {
                       colors: _kDefaultRainbowColors,
                       indicatorType: Indicator.values[index],
                       strokeWidth: 3,
+                      // pathBackgroundColor: Colors.black45,
                     ),
                   ),
                   Align(
                     alignment: Alignment.bottomLeft,
                     child: Text(
                       '${index + 1}',
                       style: TextStyle(
-                        color: Colors.white,
+                        color: Colors.black,
                         fontSize: 14,
                       ),
                     ),

gif/demo_2021_07_18.gif renamed to gif/demo_2021_07_18_02.gif

@@ -8,15 +8,22 @@ const double _kDefaultStrokeWidth = 2;
 class DecorateData {
   final Color? backgroundColor;
   final Indicator indicator;
+
+  /// It will promise at least one value in the collection.
   final List<Color> colors;
   final double? _strokeWidth;
 
+  /// Applicable to which has cut edge of the shape
+  final Color? pathBackgroundColor;
+
   const DecorateData({
     required this.indicator,
     required this.colors,
     this.backgroundColor,
     double? strokeWidth,
-  }) : _strokeWidth = strokeWidth;
+    this.pathBackgroundColor,
+  })  : _strokeWidth = strokeWidth,
+        assert(colors.length > 0);
 
   double get strokeWidth =>
       _strokeWidth == null ? _kDefaultStrokeWidth : _strokeWidth!;

lib/src/decorate/decorate.dart

@@ -9,6 +9,8 @@ class CircleStrokeSpin extends StatelessWidget {
     return CircularProgressIndicator(
       strokeWidth: 2,
       color: color,
+      backgroundColor:
+          DecorateContext.of(context)!.decorateData.pathBackgroundColor,
     );
   }
 }

lib/src/indicators/circle_stroke_spin.dart

@@ -87,12 +87,16 @@ class LoadingIndicator extends StatelessWidget {
   /// The stroke width of line.
   final double? strokeWidth;
 
+  /// Applicable to which has cut edge of the shape
+  final Color? pathBackgroundColor;
+
   LoadingIndicator({
     Key? key,
     required this.indicatorType,
     this.colors,
     this.backgroundColor,
     this.strokeWidth,
+    this.pathBackgroundColor,
   }) : super(key: key);
 
   @override
@@ -105,6 +109,7 @@ class LoadingIndicator extends StatelessWidget {
         indicator: indicatorType,
         colors: safeColors,
         strokeWidth: strokeWidth,
+        pathBackgroundColor: pathBackgroundColor,
       ),
       child: AspectRatio(
         aspectRatio: 1,

lib/src/loading.dart

@@ -49,6 +49,7 @@ class IndicatorShapeWidget extends StatelessWidget {
           shape,
           data,
           decorateData.strokeWidth,
+          pathColor: decorateData.pathBackgroundColor,
         ),
       ),
     );
@@ -61,13 +62,15 @@ class _ShapePainter extends CustomPainter {
   final Paint _paint;
   final double? data;
   final double strokeWidth;
+  final Color? pathColor;
 
   _ShapePainter(
     this.color,
     this.shape,
     this.data,
-    this.strokeWidth,
-  )   : _paint = Paint()..isAntiAlias = true,
+    this.strokeWidth, {
+    this.pathColor,
+  })  : _paint = Paint()..isAntiAlias = true,
         super();
 
   @override
@@ -84,18 +87,31 @@ class _ShapePainter extends CustomPainter {
         );
         break;
       case Shape.ringThirdFour:
+        if (pathColor != null) {
+          _paint
+            ..color = pathColor!
+            ..strokeWidth = strokeWidth
+            ..style = PaintingStyle.stroke;
+          canvas.drawCircle(
+            Offset(size.width / 2, size.height / 2),
+            size.shortestSide / 2,
+            _paint,
+          );
+        }
         _paint
           ..color = color
           ..style = PaintingStyle.stroke
           ..strokeWidth = strokeWidth;
         canvas.drawArc(
-            Rect.fromCircle(
-                center: Offset(size.width / 2, size.height / 2),
-                radius: size.shortestSide / 2),
-            -3 * pi / 4,
-            3 * pi / 2,
-            false,
-            _paint);
+          Rect.fromCircle(
+            center: Offset(size.width / 2, size.height / 2),
+            radius: size.shortestSide / 2,
+          ),
+          -3 * pi / 4,
+          3 * pi / 2,
+          false,
+          _paint,
+        );
         break;
       case Shape.rectangle:
         _paint
@@ -164,5 +180,7 @@ class _ShapePainter extends CustomPainter {
   bool shouldRepaint(_ShapePainter oldDelegate) =>
       this.shape != oldDelegate.shape ||
       this.color != oldDelegate.color ||
-      this.data != oldDelegate.data;
+      this.data != oldDelegate.data ||
+      this.strokeWidth != oldDelegate.strokeWidth ||
+      this.pathColor != oldDelegate.pathColor;
 }

lib/src/shape/indicator_painter.dart

@@ -1,17 +1,17 @@
 name: loading_indicator
 description: A collection loading animations written in pure dart. Out of the box, no extra dependency.
-version: 2.1.1
+version: 3.0.0
 homepage: https://github.com/TinoGuo/loading_indicator
 
 environment:
-  sdk: '>=2.13.0 <3.0.0'
+  sdk: ">=2.12.0 <3.0.0"
+  flutter: ">=2.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
   async: ^2.6.1
 
-
 dev_dependencies:
   flutter_test:
     sdk: flutter