#14 Part1 (#15)

README.md

@@ -31,7 +31,7 @@ Install the latest version from [pub](https://pub.dev/packages/loading_indicator
 ## Usage
 very simple to use
 
-`LoadingIndicator(indicatorType: Indicator.ballPulse, color: Colors.white,)`
+`LoadingIndicator(indicatorType: Indicator.ballPulse, color: Colors.white, backgroundColor: Colors.black)`
 
 ## License
 [Apache 2.0](LICENSE)

example/lib/main.dart

@@ -5,6 +5,7 @@
 // [FloatingActionButtonLocation.centerDocked]. The [FloatingActionButton] is
 // connected to a callback that increments a counter.
 
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:loading_indicator/loading_indicator.dart';
 
@@ -43,7 +44,8 @@ class MainWidget extends StatelessWidget {
               padding: const EdgeInsets.all(64),
               child: LoadingIndicator(
                 indicatorType: indicator,
-                color: Colors.white,
+                colors: const [Colors.white],
+                backgroundColor: Colors.black38,
               ),
             ),
           );
@@ -93,35 +95,45 @@ class GridWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: Colors.pink,
-      body: GridView.builder(
-        itemCount: Indicator.values.length,
-        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: 4,
-          childAspectRatio: 1,
-        ),
-        itemBuilder: (ctx, index) => Stack(
-          fit: StackFit.expand,
-          alignment: Alignment.center,
-          children: <Widget>[
-            Padding(
-              padding: const EdgeInsets.all(16),
-              child: LoadingIndicator(
-                color: Colors.white,
-                indicatorType: Indicator.values[index],
-              ),
+      body: CustomScrollView(
+        slivers: [
+          SliverAppBar(
+            title: Text('Grid Demo'),
+            floating: true,
+          ),
+          SliverGrid(
+            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: 4,
+              childAspectRatio: 1,
             ),
-            Align(
-              alignment: Alignment.bottomLeft,
-              child: Text(
-                '${index + 1}',
-                style: TextStyle(
-                  color: Colors.white,
-                  fontSize: 14,
-                ),
+            delegate: SliverChildBuilderDelegate(
+              (ctx, index) => Stack(
+                fit: StackFit.expand,
+                alignment: Alignment.center,
+                children: <Widget>[
+                  Padding(
+                    padding: const EdgeInsets.all(16),
+                    child: LoadingIndicator(
+                      colors: const [Colors.white],
+                      indicatorType: Indicator.values[index],
+                    ),
+                  ),
+                  Align(
+                    alignment: Alignment.bottomLeft,
+                    child: Text(
+                      '${index + 1}',
+                      style: TextStyle(
+                        color: Colors.white,
+                        fontSize: 14,
+                      ),
+                    ),
+                  )
+                ],
               ),
-            )
-          ],
-        ),
+              childCount: Indicator.values.length,
+            ),
+          ),
+        ],
       ),
     );
   }

lib/src/decorate/decorate.dart

@@ -4,29 +4,32 @@ import 'package:loading_indicator/loading_indicator.dart';
 /// Information about a piece of animation (e.g., color).
 @immutable
 class DecorateData {
-  final Color color;
+  final Color? backgroundColor;
   final Indicator indicator;
-  final List<Color>? colors;
+  final List<Color> colors;
 
-  const DecorateData(
-      {required this.indicator, this.color = Colors.white, this.colors});
+  const DecorateData({
+    required this.indicator,
+    this.backgroundColor,
+    required this.colors,
+  });
 
   @override
-  bool operator ==(other) {
-    if (other.runtimeType != this.runtimeType) return false;
-
-    return other is DecorateData &&
-        this.color == other.color &&
-        this.colors == other.colors &&
-        this.indicator == other.indicator;
-  }
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is DecorateData &&
+          runtimeType == other.runtimeType &&
+          backgroundColor == other.backgroundColor &&
+          indicator == other.indicator &&
+          colors == other.colors;
 
   @override
-  int get hashCode => hashValues(color, indicator);
+  int get hashCode =>
+      backgroundColor.hashCode ^ indicator.hashCode ^ colors.hashCode;
 
   @override
   String toString() {
-    return 'DecorateData{color: $color, indicator: $indicator}';
+    return 'DecorateData{backgroundColor: $backgroundColor, indicator: $indicator, colors: $colors}';
   }
 }
 

lib/src/indicators/circle_stroke_spin.dart

@@ -5,12 +5,10 @@ import 'package:loading_indicator/src/decorate/decorate.dart';
 class CircleStrokeSpin extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    final color = DecorateContext.of(context)!.decorateData.color;
-    return Theme(
-      data: Theme.of(context).copyWith(accentColor: color),
-      child: CircularProgressIndicator(
-        strokeWidth: 2,
-      ),
+    final color = DecorateContext.of(context)!.decorateData.colors.first;
+    return CircularProgressIndicator(
+      strokeWidth: 2,
+      color: color,
     );
   }
 }

lib/src/loading.dart

@@ -81,24 +81,32 @@ class LoadingIndicator extends StatelessWidget {
   final Indicator indicatorType;
 
   /// The color you draw on the shape.
-  final Color? color;
   final List<Color>? colors;
+  final Color? backgroundColor;
+
   LoadingIndicator({
     Key? key,
     required this.indicatorType,
-    this.color,
     this.colors,
+    this.backgroundColor,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    final actualColor = color ?? Theme.of(context).primaryColor;
+    List<Color> safeColors = colors == null || colors!.isEmpty
+        ? [Theme.of(context).primaryColor]
+        : colors!;
     return DecorateContext(
       decorateData: DecorateData(
-          indicator: indicatorType, color: actualColor, colors: colors),
+        indicator: indicatorType,
+        colors: safeColors,
+      ),
       child: AspectRatio(
         aspectRatio: 1,
-        child: _buildIndicator(),
+        child: Container(
+          color: backgroundColor,
+          child: _buildIndicator(),
+        ),
       ),
     );
   }

lib/src/shape/indicator_painter.dart

@@ -34,39 +34,11 @@ class IndicatorShapeWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final DecorateData decorateData = DecorateContext.of(context)!.decorateData;
-    final bool shouldUseColors = decorateData.colors != null &&
-        colorIndex != null &&
-        colorIndex! < decorateData.colors!.length;
+    final bool shouldUseColors =
+        colorIndex != null && colorIndex! < decorateData.colors.length;
     final color = shouldUseColors
-        ? decorateData.colors![colorIndex!]
-        : DecorateContext.of(context)!.decorateData.color;
-
-//    if (shape == Shape.circle) {
-//      return Container(
-//        decoration: BoxDecoration(
-//          color: color,
-//          shape: BoxShape.circle,
-//        ),
-//      );
-//    } else if (shape == Shape.line) {
-//      return LayoutBuilder(
-//        builder: (ctx, constraint) => Container(
-//              decoration: ShapeDecoration(
-//                color: color,
-//                shape: RoundedRectangleBorder(
-//                  borderRadius: BorderRadius.circular(constraint.maxWidth / 2),
-//                ),
-//              ),
-//            ),
-//      );
-//    } else if (shape == Shape.rectangle) {
-//      return Container(
-//        decoration: BoxDecoration(
-//          color: color,
-//          shape: BoxShape.rectangle,
-//        ),
-//      );
-//    }
+        ? decorateData.colors[colorIndex!]
+        : DecorateContext.of(context)!.decorateData.colors.first;
 
     return Container(
       constraints: const BoxConstraints(