From 809fd0d30aaff972443f2135b275e0d05a9e18d1 Mon Sep 17 00:00:00 2001 From: Tino <4519784+TinoGuo@users.noreply.github.com> Date: Sat, 17 Jul 2021 15:10:26 +0800 Subject: [PATCH] #14 Part1 (#15) --- README.md | 2 +- example/lib/main.dart | 68 +++++++++++++--------- lib/src/decorate/decorate.dart | 31 +++++----- lib/src/indicators/circle_stroke_spin.dart | 10 ++-- lib/src/loading.dart | 18 ++++-- lib/src/shape/indicator_painter.dart | 36 ++---------- 6 files changed, 79 insertions(+), 86 deletions(-) diff --git a/README.md b/README.md index 6ca7284..e7f998c 100644 --- a/README.md +++ b/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) \ No newline at end of file diff --git a/example/lib/main.dart b/example/lib/main.dart index 2f0db9e..4dc0433 100644 --- a/example/lib/main.dart +++ b/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: [ - 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: [ + 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, + ), + ), + ], ), ); } diff --git a/lib/src/decorate/decorate.dart b/lib/src/decorate/decorate.dart index 644d683..be80128 100644 --- a/lib/src/decorate/decorate.dart +++ b/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? colors; + final List 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}'; } } diff --git a/lib/src/indicators/circle_stroke_spin.dart b/lib/src/indicators/circle_stroke_spin.dart index e61b3d5..efd45a4 100644 --- a/lib/src/indicators/circle_stroke_spin.dart +++ b/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, ); } } diff --git a/lib/src/loading.dart b/lib/src/loading.dart index a52bb2a..15c1602 100644 --- a/lib/src/loading.dart +++ b/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? 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 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(), + ), ), ); } diff --git a/lib/src/shape/indicator_painter.dart b/lib/src/shape/indicator_painter.dart index 83902cf..964ffb3 100644 --- a/lib/src/shape/indicator_painter.dart +++ b/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(