From b4a0681e567a3a114ac4b517b0779d06468f5e35 Mon Sep 17 00:00:00 2001 From: flyzero Date: Thu, 6 Jan 2022 17:06:03 +0800 Subject: [PATCH 1/3] Add horizontal layout --- example/lib/main.dart | 5 +- example/pubspec.lock | 22 ++++---- example/pubspec.yaml | 5 +- lib/src/easy_loading.dart | 40 ++++++++++++--- lib/src/theme.dart | 11 +++- lib/src/widgets/container.dart | 92 ++++++++++++++++++++++++++-------- lib/src/widgets/indicator.dart | 10 ++-- lib/src/widgets/progress.dart | 9 +++- pubspec.lock | 12 ++--- 9 files changed, 153 insertions(+), 53 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 85266e2..53d0a5f 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -19,6 +19,7 @@ void configLoading() { ..indicatorType = EasyLoadingIndicatorType.fadingCircle ..loadingStyle = EasyLoadingStyle.dark ..indicatorSize = 45.0 + ..axis = Axis.horizontal ..radius = 10.0 ..progressColor = Colors.yellow ..backgroundColor = Colors.green @@ -27,6 +28,7 @@ void configLoading() { ..maskColor = Colors.blue.withOpacity(0.5) ..userInteractions = true ..dismissOnTap = false + ..indicatorType = EasyLoadingIndicatorType.chasingDots ..customAnimation = CustomAnimation(); } @@ -159,7 +161,8 @@ class _MyHomePageState extends State { _timer = Timer.periodic(const Duration(milliseconds: 100), (Timer timer) { EasyLoading.showProgress(_progress, - status: '${(_progress * 100).toStringAsFixed(0)}%'); + status: + '${(_progress * 100).toStringAsFixed(0).padLeft(2, ' ')}%'); _progress += 0.03; if (_progress >= 1) { diff --git a/example/pubspec.lock b/example/pubspec.lock index b983cfc..ec54b77 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -7,7 +7,7 @@ packages: name: async url: "https://pub.flutter-io.cn" source: hosted - version: "2.8.1" + version: "2.8.2" boolean_selector: dependency: transitive description: @@ -21,7 +21,7 @@ packages: name: characters url: "https://pub.flutter-io.cn" source: hosted - version: "1.1.0" + version: "1.2.0" charcode: dependency: transitive description: @@ -65,17 +65,17 @@ packages: flutter_easyloading: dependency: "direct main" description: - name: flutter_easyloading - url: "https://pub.flutter-io.cn" - source: hosted - version: "3.0.0" + path: ".." + relative: true + source: path + version: "3.0.3" flutter_spinkit: dependency: transitive description: name: flutter_spinkit url: "https://pub.flutter-io.cn" source: hosted - version: "5.0.0" + version: "5.1.0" flutter_test: dependency: "direct dev" description: flutter @@ -87,7 +87,7 @@ packages: name: matcher url: "https://pub.flutter-io.cn" source: hosted - version: "0.12.10" + version: "0.12.11" meta: dependency: transitive description: @@ -148,7 +148,7 @@ packages: name: test_api url: "https://pub.flutter-io.cn" source: hosted - version: "0.4.2" + version: "0.4.3" typed_data: dependency: transitive description: @@ -162,7 +162,7 @@ packages: name: vector_math url: "https://pub.flutter-io.cn" source: hosted - version: "2.1.0" + version: "2.1.1" sdks: - dart: ">=2.12.0 <3.0.0" + dart: ">=2.14.0 <3.0.0" flutter: ">=2.0.0" diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 2125937..327fc11 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -13,6 +13,8 @@ description: A new Flutter project. # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html version: 1.0.0+1 +publish_to: none + environment: sdk: ">=2.12.0 <3.0.0" @@ -20,7 +22,8 @@ dependencies: flutter: sdk: flutter - flutter_easyloading: ^3.0.0 + flutter_easyloading: + path: ../ # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. diff --git a/lib/src/easy_loading.dart b/lib/src/easy_loading.dart index ac70d3d..f7dbb2a 100644 --- a/lib/src/easy_loading.dart +++ b/lib/src/easy_loading.dart @@ -127,9 +127,18 @@ class EasyLoading { /// padding of [status]. late EdgeInsets textPadding; - /// size of indicator, default 40.0. + /// horizontal indicator status space + late double horizontalSpace; + + /// vertical Indicator Size, default 40.0. late double indicatorSize; + /// indicator size in horizontal direction, default 20.0. + late double horizontalIndicatorSize; + + /// axis direction, default horizontal + late Axis axis; + /// radius of loading, default 5.0. late double radius; @@ -165,7 +174,7 @@ class EasyLoading { /// background color of loading, only used for [EasyLoadingStyle.custom]. Color? backgroundColor; - + /// boxShadow of loading, only used for [EasyLoadingStyle.custom]. List? boxShadow; @@ -216,6 +225,8 @@ class EasyLoading { animationStyle = EasyLoadingAnimationStyle.opacity; textAlign = TextAlign.center; indicatorSize = 40.0; + horizontalIndicatorSize = 20.0; + axis = Axis.vertical; radius = 5.0; fontSize = 15.0; progressWidth = 2.0; @@ -223,6 +234,7 @@ class EasyLoading { displayDuration = const Duration(milliseconds: 2000); animationDuration = const Duration(milliseconds: 200); textPadding = const EdgeInsets.only(bottom: 10.0); + horizontalSpace = 8; contentPadding = const EdgeInsets.symmetric( vertical: 15.0, horizontal: 20.0, @@ -250,12 +262,15 @@ class EasyLoading { String? status, Widget? indicator, EasyLoadingMaskType? maskType, + Axis? axis, bool? dismissOnTap, }) { - Widget w = indicator ?? (_instance.indicatorWidget ?? LoadingIndicator()); + Widget w = indicator ?? + (_instance.indicatorWidget ?? LoadingIndicator(axis: axis)); return _instance._show( status: status, maskType: maskType, + axis: axis, dismissOnTap: dismissOnTap, w: w, ); @@ -266,6 +281,7 @@ class EasyLoading { double value, { String? status, EasyLoadingMaskType? maskType, + Axis? axis, }) async { assert( value >= 0.0 && value <= 1.0, @@ -286,10 +302,12 @@ class EasyLoading { Widget w = EasyLoadingProgress( key: _progressKey, value: value, + axis: axis, ); _instance._show( status: status, maskType: maskType, + axis: axis, dismissOnTap: false, w: w, ); @@ -306,18 +324,20 @@ class EasyLoading { String status, { Duration? duration, EasyLoadingMaskType? maskType, + Axis? axis, bool? dismissOnTap, }) { Widget w = _instance.successWidget ?? Icon( Icons.done, color: EasyLoadingTheme.indicatorColor, - size: EasyLoadingTheme.indicatorSize, + size: EasyLoadingTheme.indicatorSizeOf(axis), ); return _instance._show( status: status, duration: duration ?? EasyLoadingTheme.displayDuration, maskType: maskType, + axis: axis, dismissOnTap: dismissOnTap, w: w, ); @@ -328,18 +348,20 @@ class EasyLoading { String status, { Duration? duration, EasyLoadingMaskType? maskType, + Axis? axis, bool? dismissOnTap, }) { Widget w = _instance.errorWidget ?? Icon( Icons.clear, color: EasyLoadingTheme.indicatorColor, - size: EasyLoadingTheme.indicatorSize, + size: EasyLoadingTheme.indicatorSizeOf(axis), ); return _instance._show( status: status, duration: duration ?? EasyLoadingTheme.displayDuration, maskType: maskType, + axis: axis, dismissOnTap: dismissOnTap, w: w, ); @@ -350,18 +372,20 @@ class EasyLoading { String status, { Duration? duration, EasyLoadingMaskType? maskType, + Axis? axis, bool? dismissOnTap, }) { Widget w = _instance.infoWidget ?? Icon( Icons.info_outline, color: EasyLoadingTheme.indicatorColor, - size: EasyLoadingTheme.indicatorSize, + size: EasyLoadingTheme.indicatorSizeOf(axis), ); return _instance._show( status: status, duration: duration ?? EasyLoadingTheme.displayDuration, maskType: maskType, + axis: axis, dismissOnTap: dismissOnTap, w: w, ); @@ -373,6 +397,7 @@ class EasyLoading { Duration? duration, EasyLoadingToastPosition? toastPosition, EasyLoadingMaskType? maskType, + Axis? axis, bool? dismissOnTap, }) { return _instance._show( @@ -380,6 +405,7 @@ class EasyLoading { duration: duration ?? EasyLoadingTheme.displayDuration, toastPosition: toastPosition ?? EasyLoadingTheme.toastPosition, maskType: maskType, + axis: axis, dismissOnTap: dismissOnTap, ); } @@ -418,6 +444,7 @@ class EasyLoading { String? status, Duration? duration, EasyLoadingMaskType? maskType, + Axis? axis, bool? dismissOnTap, EasyLoadingToastPosition? toastPosition, }) async { @@ -470,6 +497,7 @@ class EasyLoading { animation: animation, toastPosition: toastPosition, maskType: maskType, + axis: axis, dismissOnTap: dismissOnTap, completer: completer, ); diff --git a/lib/src/theme.dart b/lib/src/theme.dart index 6d41e6b..33cf932 100644 --- a/lib/src/theme.dart +++ b/lib/src/theme.dart @@ -100,8 +100,14 @@ class EasyLoadingTheme { /// font size of status static double get fontSize => EasyLoading.instance.fontSize; + /// axis + static Axis get axis => EasyLoading.instance.axis; + /// size of indicator - static double get indicatorSize => EasyLoading.instance.indicatorSize; + static double indicatorSizeOf(Axis? axis) => + (axis ?? EasyLoading.instance.axis) == Axis.horizontal + ? EasyLoading.instance.horizontalIndicatorSize + : EasyLoading.instance.indicatorSize; /// width of progress indicator static double get progressWidth => EasyLoading.instance.progressWidth; @@ -138,6 +144,9 @@ class EasyLoadingTheme { /// padding of status static EdgeInsets get textPadding => EasyLoading.instance.textPadding; + /// horizontal indicator status space + static double get horizontalSpace => EasyLoading.instance.horizontalSpace; + /// textAlign of status static TextAlign get textAlign => EasyLoading.instance.textAlign; diff --git a/lib/src/widgets/container.dart b/lib/src/widgets/container.dart index 1b47161..fade82f 100644 --- a/lib/src/widgets/container.dart +++ b/lib/src/widgets/container.dart @@ -24,6 +24,7 @@ import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart'; +import 'dart:ui' as ui; import '../theme.dart'; import '../easy_loading.dart'; @@ -34,6 +35,7 @@ class EasyLoadingContainer extends StatefulWidget { final bool? dismissOnTap; final EasyLoadingToastPosition? toastPosition; final EasyLoadingMaskType? maskType; + final Axis? axis; final Completer? completer; final bool animation; @@ -44,6 +46,7 @@ class EasyLoadingContainer extends StatefulWidget { this.dismissOnTap, this.toastPosition, this.maskType, + this.axis, this.completer, this.animation = true, }) : super(key: key); @@ -59,6 +62,7 @@ class EasyLoadingContainerState extends State late AnimationController _animationController; late AlignmentGeometry _alignment; late bool _dismissOnTap, _ignoring; + late Axis _axis; bool get isPersistentCallbacks => SchedulerBinding.instance?.schedulerPhase == @@ -86,6 +90,7 @@ class EasyLoadingContainerState extends State widget.completer?.complete(); } }); + _axis = widget.axis ?? EasyLoadingTheme.axis; show(widget.animation); } @@ -166,6 +171,7 @@ class EasyLoadingContainerState extends State _Indicator( status: _status, indicator: widget.indicator, + axis: _axis, ), _animationController, _alignment, @@ -180,10 +186,12 @@ class EasyLoadingContainerState extends State class _Indicator extends StatelessWidget { final Widget? indicator; final String? status; + final Axis? axis; const _Indicator({ required this.indicator, required this.status, + required this.axis, }); @override @@ -198,28 +206,68 @@ class _Indicator extends StatelessWidget { boxShadow: EasyLoadingTheme.boxShadow, ), padding: EasyLoadingTheme.contentPadding, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisSize: MainAxisSize.min, - children: [ - if (indicator != null) - Container( - margin: status?.isNotEmpty == true - ? EasyLoadingTheme.textPadding - : EdgeInsets.zero, - child: indicator, - ), - if (status != null) - Text( - status!, - style: EasyLoadingTheme.textStyle ?? - TextStyle( - color: EasyLoadingTheme.textColor, - fontSize: EasyLoadingTheme.fontSize, - ), - textAlign: EasyLoadingTheme.textAlign, - ), + child: _buildBody(), + ); + } + + Widget _buildBody() { + if (indicator != null && status != null) { + return axis == Axis.vertical + ? _buildVerticalIndicator() + : _buildHorizontalIndicator(); + } else { + return indicator != null ? indicator! : _buildOnlyStatus(); + } + } + + Widget _buildOnlyStatus() { + return Text( + status ?? '', + style: EasyLoadingTheme.textStyle ?? + TextStyle( + color: EasyLoadingTheme.textColor, + fontSize: EasyLoadingTheme.fontSize, + ), + textAlign: EasyLoadingTheme.textAlign, + ); + } + + Widget _buildVerticalIndicator() { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + Container( + margin: status?.isNotEmpty == true + ? EasyLoadingTheme.textPadding + : EdgeInsets.zero, + child: indicator, + ), + _buildOnlyStatus(), + ], + ); + } + + Widget _buildHorizontalIndicator() { + return Text.rich( + TextSpan( + children: [ + WidgetSpan( + alignment: ui.PlaceholderAlignment.middle, + child: indicator!, + ), + WidgetSpan( + child: SizedBox(width: EasyLoadingTheme.horizontalSpace), + ), + TextSpan( + text: status, + style: EasyLoadingTheme.textStyle ?? + TextStyle( + color: EasyLoadingTheme.textColor, + fontSize: EasyLoadingTheme.fontSize, + ), + ), ], ), ); diff --git a/lib/src/widgets/indicator.dart b/lib/src/widgets/indicator.dart index 7fe6d04..9138def 100644 --- a/lib/src/widgets/indicator.dart +++ b/lib/src/widgets/indicator.dart @@ -27,8 +27,11 @@ import '../easy_loading.dart'; import '../theme.dart'; class LoadingIndicator extends StatefulWidget { - const LoadingIndicator({ + final Axis? axis; + + LoadingIndicator({ Key? key, + this.axis, }) : super(key: key); @override @@ -36,8 +39,6 @@ class LoadingIndicator extends StatefulWidget { } class _LoadingIndicatorState extends State { - final double _size = EasyLoadingTheme.indicatorSize; - /// indicator color of loading final Color _indicatorColor = EasyLoadingTheme.indicatorColor; late Widget _indicator; @@ -54,7 +55,9 @@ class _LoadingIndicatorState extends State { @override Widget build(BuildContext context) { + final double _size = EasyLoadingTheme.indicatorSizeOf(widget.axis); double _width = _size; + switch (EasyLoadingTheme.indicatorType) { case EasyLoadingIndicatorType.fadingCircle: _indicator = SpinKitFadingCircle( @@ -210,6 +213,7 @@ class _LoadingIndicatorState extends State { return Container( constraints: BoxConstraints( maxWidth: _width, + maxHeight: _width, ), child: _indicator, ); diff --git a/lib/src/widgets/progress.dart b/lib/src/widgets/progress.dart index 4bc485d..7a675bc 100644 --- a/lib/src/widgets/progress.dart +++ b/lib/src/widgets/progress.dart @@ -29,9 +29,12 @@ import '../theme.dart'; class EasyLoadingProgress extends StatefulWidget { final double value; + final Axis? axis; + const EasyLoadingProgress({ Key? key, required this.value, + this.axis, }) : super(key: key); @override @@ -60,9 +63,11 @@ class EasyLoadingProgressState extends State { @override Widget build(BuildContext context) { + final double _size = EasyLoadingTheme.indicatorSizeOf(widget.axis); + return SizedBox( - width: EasyLoadingTheme.indicatorSize, - height: EasyLoadingTheme.indicatorSize, + width: _size, + height: _size, child: _CircleProgress( value: _value, color: EasyLoadingTheme.progressColor, diff --git a/pubspec.lock b/pubspec.lock index 63e4f81..10949b9 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -7,7 +7,7 @@ packages: name: async url: "https://pub.flutter-io.cn" source: hosted - version: "2.8.1" + version: "2.8.2" boolean_selector: dependency: transitive description: @@ -21,7 +21,7 @@ packages: name: characters url: "https://pub.flutter-io.cn" source: hosted - version: "1.1.0" + version: "1.2.0" charcode: dependency: transitive description: @@ -73,7 +73,7 @@ packages: name: matcher url: "https://pub.flutter-io.cn" source: hosted - version: "0.12.10" + version: "0.12.11" meta: dependency: transitive description: @@ -134,7 +134,7 @@ packages: name: test_api url: "https://pub.flutter-io.cn" source: hosted - version: "0.4.2" + version: "0.4.3" typed_data: dependency: transitive description: @@ -148,7 +148,7 @@ packages: name: vector_math url: "https://pub.flutter-io.cn" source: hosted - version: "2.1.0" + version: "2.1.1" sdks: - dart: ">=2.12.0 <3.0.0" + dart: ">=2.14.0 <3.0.0" flutter: ">=2.0.0" From 148099b1ea98996d406892ef0fcdfe88ab2c5df7 Mon Sep 17 00:00:00 2001 From: flyzero Date: Tue, 11 Jan 2022 10:10:06 +0800 Subject: [PATCH 2/3] fix EasyLoadingToastPosition bug --- lib/src/easy_loading.dart | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/src/easy_loading.dart b/lib/src/easy_loading.dart index f7dbb2a..8f7cbdb 100644 --- a/lib/src/easy_loading.dart +++ b/lib/src/easy_loading.dart @@ -272,6 +272,7 @@ class EasyLoading { maskType: maskType, axis: axis, dismissOnTap: dismissOnTap, + toastPosition: EasyLoadingToastPosition.center, w: w, ); } @@ -309,6 +310,7 @@ class EasyLoading { maskType: maskType, axis: axis, dismissOnTap: false, + toastPosition: EasyLoadingToastPosition.center, w: w, ); _instance._progressKey = _progressKey; @@ -483,7 +485,7 @@ class EasyLoading { ); } - toastPosition ??= EasyLoadingToastPosition.center; + toastPosition ??= EasyLoadingTheme.toastPosition; bool animation = _w == null; _progressKey = null; if (_key != null) await dismiss(animation: false); From ee0ef2f22c4d5eb076cdddcf1f8a39863d92df87 Mon Sep 17 00:00:00 2001 From: flyzero Date: Tue, 11 Jan 2022 10:20:21 +0800 Subject: [PATCH 3/3] fix toastPosition bug --- lib/src/widgets/container.dart | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/src/widgets/container.dart b/lib/src/widgets/container.dart index fade82f..4a01633 100644 --- a/lib/src/widgets/container.dart +++ b/lib/src/widgets/container.dart @@ -73,9 +73,8 @@ class EasyLoadingContainerState extends State super.initState(); if (!mounted) return; _status = widget.status; - _alignment = (widget.indicator == null && widget.status?.isNotEmpty == true) - ? EasyLoadingTheme.alignment(widget.toastPosition) - : AlignmentDirectional.center; + _alignment = EasyLoadingTheme.alignment( + widget.toastPosition ?? EasyLoadingTheme.toastPosition); _dismissOnTap = widget.dismissOnTap ?? (EasyLoadingTheme.dismissOnTap ?? false); _ignoring =