✨ Add the loading indicator when saving (#140)

Author: AlexV525

CHANGELOG.md

@@ -4,6 +4,12 @@ that can be found in the LICENSE file. -->
 
 # Changelog
 
+## 3.6.3
+
+### Improvements
+
+- Add the loading indicator when saving. (#140)
+
 ## 3.6.2
 
 ### Improvements

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: wechat_camera_picker_demo
 description: A new Flutter project.
-version: 3.6.2+18
+version: 3.6.3+19
 publish_to: none
 
 environment:

lib/src/delegates/camera_picker_text_delegate.dart

@@ -57,6 +57,14 @@ class CameraPickerTextDelegate {
   /// 资源加载失败时的字段
   String get loadFailed => '加载失败';
 
+  /// Default loading string for the dialog.
+  /// 加载中弹窗的默认文字
+  String get loading => '加载中…';
+
+  /// Saving string for the dialog.
+  /// 保存中弹窗的默认文字
+  String get saving => '保存中…';
+
   /// Semantics fields.
   ///
   /// Fields below are only for semantics usage. For customizable these fields,
@@ -141,6 +149,12 @@ class EnglishCameraPickerTextDelegate extends CameraPickerTextDelegate {
   @override
   String get loadFailed => 'Load failed';
 
+  @override
+  String get loading => 'Loading...';
+
+  @override
+  String get saving => 'Saving...';
+
   @override
   String get sActionManuallyFocusHint => 'manually focus';
 

lib/src/states/camera_picker_viewer_state.dart

@@ -4,6 +4,7 @@
 
 import 'dart:async';
 import 'dart:io';
+import 'dart:math' as math;
 
 import 'package:flutter/material.dart';
 import 'package:flutter/semantics.dart';
@@ -127,7 +128,9 @@ class CameraPickerViewerState extends State<CameraPickerViewer> {
     if (isSavingEntity) {
       return;
     }
-    isSavingEntity = true;
+    setState(() {
+      isSavingEntity = true;
+    });
     final CameraPickerViewType viewType = widget.viewType;
     if (widget.pickerConfig.onEntitySaving != null) {
       try {
@@ -138,8 +141,10 @@ class CameraPickerViewerState extends State<CameraPickerViewer> {
         );
       } catch (e, s) {
         handleErrorWithHandler(e, widget.pickerConfig.onError, s: s);
-      } finally {
-        isSavingEntity = false;
+      }
+      isSavingEntity = false;
+      if (mounted) {
+        setState(() {});
       }
       return;
     }
@@ -194,6 +199,9 @@ class CameraPickerViewerState extends State<CameraPickerViewer> {
         padding: const EdgeInsets.all(10),
         child: IconButton(
           onPressed: () {
+            if (isSavingEntity) {
+              return;
+            }
             if (previewFile.existsSync()) {
               previewFile.delete();
             }
@@ -209,7 +217,10 @@ class CameraPickerViewerState extends State<CameraPickerViewer> {
               color: Colors.white,
               shape: BoxShape.circle,
             ),
-            child: const Icon(Icons.keyboard_return_rounded, color: Colors.black,),
+            child: const Icon(
+              Icons.keyboard_return_rounded,
+              color: Colors.black,
+            ),
           ),
         ),
       ),
@@ -329,6 +340,16 @@ class CameraPickerViewerState extends State<CameraPickerViewer> {
     );
   }
 
+  Widget buildLoading(BuildContext context) {
+    return IgnorePointer(
+      child: AnimatedOpacity(
+        duration: kThemeAnimationDuration,
+        opacity: isSavingEntity ? 1 : 0,
+        child: _WechatLoading(tip: Constants.textDelegate.saving),
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     if (hasErrorWhenInitializing) {
@@ -349,8 +370,115 @@ class CameraPickerViewerState extends State<CameraPickerViewer> {
         children: <Widget>[
           buildPreview(context),
           buildForeground(context),
+          buildLoading(context),
         ],
       ),
     );
   }
 }
+
+class _WechatLoading extends StatefulWidget {
+  const _WechatLoading({Key? key, required this.tip}) : super(key: key);
+
+  final String tip;
+
+  @override
+  State<_WechatLoading> createState() => _WechatLoadingState();
+}
+
+class _WechatLoadingState extends State<_WechatLoading>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller = AnimationController(
+    duration: const Duration(seconds: 2),
+    vsync: this,
+  );
+
+  @override
+  void initState() {
+    super.initState();
+    _controller.repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  Widget _buildContent(BuildContext context, double minWidth) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: <Widget>[
+        SizedBox.fromSize(
+          size: Size.square(minWidth / 3),
+          child: AnimatedBuilder(
+            animation: _controller,
+            builder: (_, Widget? child) => Transform.rotate(
+              angle: math.pi * 2 * _controller.value,
+              child: child,
+            ),
+            child: CustomPaint(
+              painter: _LoadingPainter(
+                Theme.of(context).textTheme.bodyMedium?.color,
+              ),
+            ),
+          ),
+        ),
+        SizedBox(height: minWidth / 10),
+        Text(
+          widget.tip,
+          style: const TextStyle(fontSize: 14),
+          textScaleFactor: 1,
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final double minWidth = MediaQuery.of(context).size.shortestSide / 3;
+    return Container(
+      color: Colors.black38,
+      alignment: Alignment.center,
+      child: RepaintBoundary(
+        child: Container(
+          constraints: BoxConstraints(minWidth: minWidth),
+          padding: EdgeInsets.all(minWidth / 5),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(10),
+            color: Theme.of(context).canvasColor,
+          ),
+          child: _buildContent(context, minWidth),
+        ),
+      ),
+    );
+  }
+}
+
+class _LoadingPainter extends CustomPainter {
+  const _LoadingPainter(this.activeColor);
+
+  final Color? activeColor;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Color color = activeColor ?? Colors.white;
+    final Offset center = Offset(size.width / 2, size.height / 2);
+    final Rect rect = Rect.fromCenter(
+      center: center,
+      width: size.width,
+      height: size.height,
+    );
+    final Paint paint = Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeCap = StrokeCap.round
+      ..strokeWidth = 4
+      ..shader = SweepGradient(
+        colors: <Color>[color.withOpacity(0), color],
+      ).createShader(rect);
+    canvas.drawArc(rect, 0.1, math.pi * 2 * 0.9, false, paint);
+  }
+
+  @override
+  bool shouldRepaint(_LoadingPainter oldDelegate) => false;
+}

lib/src/widgets/camera_progress_button.dart

@@ -56,15 +56,17 @@ class _CircleProgressState extends State<CameraProgressButton>
   Widget build(BuildContext context) {
     final Size size = Size.square(widget.outerRadius * 2);
     return Center(
-      child: AnimatedBuilder(
-        animation: progressController,
-        builder: (_, __) => CustomPaint(
-          key: paintKey,
-          size: size,
-          painter: CameraProgressButtonPainter(
-            progress: progressController.value,
-            ringsWidth: widget.ringsWidth,
-            ringsColor: widget.ringsColor,
+      child: RepaintBoundary(
+        child: AnimatedBuilder(
+          animation: progressController,
+          builder: (_, __) => CustomPaint(
+            key: paintKey,
+            size: size,
+            painter: CameraProgressButtonPainter(
+              progress: progressController.value,
+              ringsWidth: widget.ringsWidth,
+              ringsColor: widget.ringsColor,
+            ),
           ),
         ),
       ),
@@ -88,16 +90,14 @@ class CameraProgressButtonPainter extends CustomPainter {
     final double center = size.width / 2;
     final Offset offsetCenter = Offset(center, center);
     final double drawRadius = size.width / 2 - ringsWidth;
-    final double angle = 360.0 * progress;
-    final double radians = angle.toRad;
 
     final double outerRadius = center;
     final double innerRadius = center - ringsWidth * 2;
 
     final double progressWidth = outerRadius - innerRadius;
     canvas.save();
     canvas.translate(0.0, size.width);
-    canvas.rotate(-90.0.toRad);
+    canvas.rotate(-math.pi / 2);
     final Rect arcRect = Rect.fromCircle(
       center: offsetCenter,
       radius: drawRadius,
@@ -107,14 +107,10 @@ class CameraProgressButtonPainter extends CustomPainter {
       ..style = PaintingStyle.stroke
       ..strokeWidth = progressWidth;
     canvas
-      ..drawArc(arcRect, 0, radians, false, progressPaint)
+      ..drawArc(arcRect, 0, math.pi * 2 * progress, false, progressPaint)
       ..restore();
   }
 
   @override
-  bool shouldRepaint(CustomPainter oldDelegate) => true;
-}
-
-extension _MathExtension on double {
-  double get toRad => this * (math.pi / 180.0);
+  bool shouldRepaint(CameraProgressButtonPainter oldDelegate) => true;
 }

pubspec.yaml

@@ -1,7 +1,7 @@
 name: wechat_camera_picker
 description: A camera picker based on WeChat's UI which is a separate runnable extension to wechat_assets_picker.
 repository: https://github.com/fluttercandies/flutter_wechat_camera_picker
-version: 3.6.2
+version: 3.6.3
 
 environment:
   sdk: ">=2.14.0 <3.0.0"