#14 Multiple Colors support (#17)

Author: TinoGuo

README.md

@@ -1,7 +1,6 @@
 # LoadingIndicator
 ![](https://github.com/TinoGuo/loading_indicator/workflows/Flutter%20Build%20Test%20CI/badge.svg?branch=master)
 [![pub package](https://img.shields.io/pub/v/loading_indicator.svg)](https://pub.dev/packages/loading_indicator)
-[中文版](README_CN.md)
 
 A collection of out of the box loading animations written in pure dart, no extra dependency, inspired by [loaders.css](https://github.com/ConnorAtherton/loaders.css) and [NVActivityIndicatorView](https://github.com/ninjaprox/NVActivityIndicatorView).
 
@@ -10,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_2019_05_24.gif)
+![](gif/demo_2021_07_18.gif)
 
 ## Animation types
 
@@ -29,9 +28,18 @@ Now, you can click [this site](https://tinoguo.github.io/loading_indicator/) to
 Install the latest version from [pub](https://pub.dev/packages/loading_indicator)
 
 ## Usage
-very simple to use
+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
+)
+```
 
-`LoadingIndicator(indicatorType: Indicator.ballPulse, color: Colors.white, backgroundColor: Colors.black)`
+[中文版](README_CN.md)
 
 ## License
 [Apache 2.0](LICENSE)

README_CN.md

@@ -2,14 +2,14 @@
 ![](https://github.com/TinoGuo/loading_indicator/workflows/Flutter%20Build%20Test%20CI/badge.svg?branch=master)
 [![pub package](https://img.shields.io/pub/v/loading_indicator.svg)](https://pub.dev/packages/loading_indicator)
 
-一个开箱即用的loading加载库，包含32个不同类型动画，灵感来源于[loaders.css](https://github.com/ConnorAtherton/loaders.css)和[NVActivityIndicatorView](https://github.com/ninjaprox/NVActivityIndicatorView)。
+一个开箱即用的loading加载库，包含34个不同类型动画，灵感来源于[loaders.css](https://github.com/ConnorAtherton/loaders.css)和[NVActivityIndicatorView](https://github.com/ninjaprox/NVActivityIndicatorView)。
 
 
 ## Demo
 
 现在你可以点击这个[地址](https://tinoguo.github.io/loading_indicator/)来进行预览.**3D效果在web上会失效.**
 
-![](gif/demo_2019_05_24.gif)
+![](gif/demo_2021_07_18.gif)
 
 ## 动画类型
 
@@ -30,7 +30,14 @@
 ## 使用
 使用很简单。
 
-`LoadingIndicator(indicatorType: Indicator.ballPulse, color: Colors.white,)`
+```
+LoadingIndicator(
+    colors: const [Colors.white],       /// 颜色集合
+    indicatorType: Indicator.ballPulse, /// loading的类型
+    strokeWidth: 2,                     /// 线条宽度，只对含有线条的组件有效
+    backgroundColor: Colors.black,      /// 组件背景色
+)
+```
 
 ## 开源协议
 [Apache 2.0](LICENSE)

example/lib/main.dart

@@ -9,6 +9,16 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:loading_indicator/loading_indicator.dart';
 
+const List<Color> _kDefaultRainbowColors = const [
+  Colors.red,
+  Colors.orange,
+  Colors.yellow,
+  Colors.green,
+  Colors.blue,
+  Colors.indigo,
+  Colors.purple,
+];
+
 void main() => runApp(MyApp());
 
 class MyApp extends StatelessWidget {
@@ -37,15 +47,14 @@ class MainWidget extends StatelessWidget {
           return Scaffold(
             appBar: AppBar(
               title: Text(indicator.toString().split('.').last),
-              backgroundColor: Colors.pink,
             ),
-            backgroundColor: Colors.teal,
             body: Padding(
               padding: const EdgeInsets.all(64),
-              child: LoadingIndicator(
-                indicatorType: indicator,
-                colors: const [Colors.white],
-                backgroundColor: Colors.black38,
+              child: Center(
+                child: LoadingIndicator(
+                  indicatorType: indicator,
+                  colors: _kDefaultRainbowColors,
+                ),
               ),
             ),
           );
@@ -58,7 +67,6 @@ class MainWidget extends StatelessWidget {
   Widget build(BuildContext context) => Scaffold(
         appBar: AppBar(
           title: Text('Demo'),
-          backgroundColor: Colors.pink,
         ),
         floatingActionButton: FloatingActionButton(
             child: Icon(Icons.grid_on),
@@ -94,7 +102,6 @@ class MainWidget extends StatelessWidget {
 class GridWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Colors.pink,
       body: CustomScrollView(
         slivers: [
           SliverAppBar(
@@ -103,7 +110,7 @@ class GridWidget extends StatelessWidget {
           ),
           SliverGrid(
             gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: 4,
+              crossAxisCount: 6,
               childAspectRatio: 1,
             ),
             delegate: SliverChildBuilderDelegate(
@@ -114,8 +121,9 @@ class GridWidget extends StatelessWidget {
                   Padding(
                     padding: const EdgeInsets.all(16),
                     child: LoadingIndicator(
-                      colors: const [Colors.white],
+                      colors: _kDefaultRainbowColors,
                       indicatorType: Indicator.values[index],
+                      strokeWidth: 3,
                     ),
                   ),
                   Align(

gif/demo_2019_05_24.gif

@@ -1,18 +1,25 @@
 import 'package:flutter/material.dart';
 import 'package:loading_indicator/loading_indicator.dart';
 
+const double _kDefaultStrokeWidth = 2;
+
 /// Information about a piece of animation (e.g., color).
 @immutable
 class DecorateData {
   final Color? backgroundColor;
   final Indicator indicator;
   final List<Color> colors;
+  final double? _strokeWidth;
 
   const DecorateData({
     required this.indicator,
-    this.backgroundColor,
     required this.colors,
-  });
+    this.backgroundColor,
+    double? strokeWidth,
+  }) : _strokeWidth = strokeWidth;
+
+  double get strokeWidth =>
+      _strokeWidth == null ? _kDefaultStrokeWidth : _strokeWidth!;
 
   @override
   bool operator ==(Object other) =>
@@ -21,15 +28,19 @@ class DecorateData {
           runtimeType == other.runtimeType &&
           backgroundColor == other.backgroundColor &&
           indicator == other.indicator &&
-          colors == other.colors;
+          colors == other.colors &&
+          strokeWidth == other.strokeWidth;
 
   @override
   int get hashCode =>
-      backgroundColor.hashCode ^ indicator.hashCode ^ colors.hashCode;
+      backgroundColor.hashCode ^
+      indicator.hashCode ^
+      colors.hashCode ^
+      strokeWidth.hashCode;
 
   @override
   String toString() {
-    return 'DecorateData{backgroundColor: $backgroundColor, indicator: $indicator, colors: $colors}';
+    return 'DecorateData{backgroundColor: $backgroundColor, indicator: $indicator, colors: $colors, strokeWidth: $strokeWidth}';
   }
 }
 

gif/demo_2021_07_18.gif

@@ -72,7 +72,10 @@ class _AudioEqualizerState extends State<AudioEqualizer>
                 alignment: Alignment.bottomCenter,
               );
             },
-            child: IndicatorShapeWidget(shape: Shape.rectangle),
+            child: IndicatorShapeWidget(
+              shape: Shape.rectangle,
+              index: i ~/ 2,
+            ),
           ),
         );
       } else {

lib/src/decorate/decorate.dart

@@ -61,6 +61,7 @@ class _BallBeatState extends State<BallBeat> with TickerProviderStateMixin {
                 scale: _scaleAnimations[i ~/ 2],
                 child: IndicatorShapeWidget(
                   shape: Shape.circle,
+                  index: i ~/ 2,
                 ),
               ),
             ),

lib/src/indicators/audio_equalizer.dart

@@ -57,11 +57,17 @@ class _BallClipRotatePulseState extends State<BallClipRotatePulse>
             transform: Matrix4.identity()
               ..scale(_outCircleScale.value)
               ..rotateZ(_outCircleRotate.value),
-            child: IndicatorShapeWidget(shape: Shape.ringTwoHalfVertical),
+            child: IndicatorShapeWidget(
+              shape: Shape.ringTwoHalfVertical,
+              index: 0,
+            ),
           ),
           Transform.scale(
             scale: _innerCircle.value * 0.3,
-            child: IndicatorShapeWidget(shape: Shape.circle),
+            child: IndicatorShapeWidget(
+              shape: Shape.circle,
+              index: 1,
+            ),
           ),
         ],
       ),

lib/src/indicators/ball_beat.dart

@@ -67,7 +67,10 @@ class _BallGridBeatState extends State<BallGridBeat>
         scale: _animations[i],
         child: FadeTransition(
           opacity: _animations[i],
-          child: IndicatorShapeWidget(shape: Shape.circle),
+          child: IndicatorShapeWidget(
+            shape: Shape.circle,
+            index: i,
+          ),
         ),
       );
     }