Add loading indicator.

MathGaps · Nov 16, 2020 · 2aadaba · 2aadaba
1 parent c78882a
commit 2aadaba
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 15 deletions.
diff --git a/example/lib/screen/feature/dual_mode_screen.dart b/example/lib/screen/feature/dual_mode_screen.dart
@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:faker/faker.dart';
 import 'package:flutter/material.dart';
 import 'package:pluto_grid/pluto_grid.dart';
@@ -26,7 +28,16 @@ class _DualModeScreenState extends State<DualModeScreen> {
 
   PlutoStateManager gridBStateManager;
 
-  String currentUsername;
+  Key currentRowKey;
+
+  Timer _debounce;
+
+  @override
+  void dispose() {
+    _debounce?.cancel();
+
+    super.dispose();
+  }
 
   @override
   void initState() {
@@ -81,23 +92,36 @@ class _DualModeScreenState extends State<DualModeScreen> {
       return;
     }
 
-    if (gridAStateManager.currentRow.cells['username'].value !=
-        currentUsername) {
-      currentUsername = gridAStateManager.currentRow.cells['username'].value;
-      fetchUserActivity(currentUsername);
+    if (gridAStateManager.currentRow.key != currentRowKey) {
+      currentRowKey = gridAStateManager.currentRow.key;
+
+      gridBStateManager.setShowLoading(true);
+
+      fetchUserActivity();
     }
   }
 
-  void fetchUserActivity(String username) {
-    setState(() {
-      final rows = DummyData.rowsByColumns(
-        length: faker.randomGenerator.integer(10, min: 1),
-        columns: gridBColumns,
-      );
+  void fetchUserActivity() {
+    // This is just an example to reproduce the server load time.
+    if (_debounce?.isActive ?? false) {
+      _debounce.cancel();
+    }
 
-      gridBStateManager.removeRows(gridBStateManager.rows);
-      gridBStateManager.resetCurrentState();
-      gridBStateManager.appendRows(rows);
+    _debounce = Timer(const Duration(milliseconds: 300), () {
+      Future.delayed(const Duration(milliseconds: 300), () {
+        setState(() {
+          final rows = DummyData.rowsByColumns(
+            length: faker.randomGenerator.integer(10, min: 1),
+            columns: gridBColumns,
+          );
+
+          gridBStateManager.removeRows(gridBStateManager.rows);
+          gridBStateManager.resetCurrentState();
+          gridBStateManager.appendRows(rows);
+        });
+
+        gridBStateManager.setShowLoading(false);
+      });
     });
   }
 
@@ -110,6 +134,8 @@ class _DualModeScreenState extends State<DualModeScreen> {
         const Text(
             'Place the grid on the left and right and move or edit with the keyboard.'),
         const Text('Refer to the display property for the width of the grid.'),
+        const Text(
+            'This is an example in which the right list is randomly generated whenever the current row of the left grid changes.'),
       ],
       topButtons: [
         PlutoExampleButton(
@@ -138,6 +164,7 @@ class _DualModeScreenState extends State<DualModeScreen> {
           onLoaded: (PlutoOnLoadedEvent event) {
             gridBStateManager = event.stateManager;
           },
+          configuration: PlutoConfiguration(),
         ),
         display: const PlutoDualGridDisplayRatio(ratio: 0.5),
       ),

diff --git a/lib/pluto_grid.dart b/lib/pluto_grid.dart
@@ -110,6 +110,8 @@ part './src/widget/cells/time_cell_widget.dart';
 
 part './src/widget/column_widget.dart';
 
+part './src/widget/pluto_loading_widget.dart';
+
 part './src/widget/pluto_scrollbar.dart';
 
 part './src/widget/row_widget.dart';

diff --git a/lib/src/manager/state/layout_state.dart b/lib/src/manager/state/layout_state.dart
@@ -27,6 +27,8 @@ abstract class ILayoutState {
 
   bool get showFooter;
 
+  bool get showLoading;
+
   bool get hasLeftFixedColumns;
 
   bool get hasRightFixedColumns;
@@ -64,6 +66,8 @@ abstract class ILayoutState {
 
   void resetShowFixedColumn({bool notify = true});
 
+  void setShowLoading(bool flag);
+
   @visibleForTesting
   void setGridGlobalOffset(Offset offset);
 }
@@ -111,6 +115,10 @@ mixin LayoutState implements IPlutoState {
 
   bool get showFooter => footerHeight > 0;
 
+  bool get showLoading => _showLoading == true;
+
+  bool _showLoading;
+
   bool get hasLeftFixedColumns => leftFixedColumnsWidth > 0;
 
   bool get hasRightFixedColumns => rightFixedColumnsWidth > 0;
@@ -223,6 +231,16 @@ mixin LayoutState implements IPlutoState {
     }
   }
 
+  void setShowLoading(bool flag) {
+    if (_showLoading == flag) {
+      return;
+    }
+
+    _showLoading = flag;
+
+    notifyListeners();
+  }
+
   @visibleForTesting
   void setGridGlobalOffset(Offset offset) {
     _gridGlobalOffset = offset;

diff --git a/lib/src/pluto_configuration.dart b/lib/src/pluto_configuration.dart
@@ -130,6 +130,9 @@ class PlutoGridLocaleText {
   final String hour;
   final String minute;
 
+  // Common
+  final String loadingText;
+
   const PlutoGridLocaleText({
     // Column menu
     this.unfixColumn = 'Unfix',
@@ -147,6 +150,8 @@ class PlutoGridLocaleText {
     // Time column popup
     this.hour = 'Hour',
     this.minute = 'Minute',
+    // Common
+    this.loadingText = 'Loading...',
   });
 
   const PlutoGridLocaleText.korean({
@@ -166,6 +171,8 @@ class PlutoGridLocaleText {
     // Time column popup
     this.hour = '시',
     this.minute = '분',
+    // Common
+    this.loadingText = '로딩중...',
   });
 
   const PlutoGridLocaleText.russian({
@@ -185,6 +192,8 @@ class PlutoGridLocaleText {
     // Time column popup
     this.hour = 'Часы',
     this.minute = 'Минуты',
+    // Common
+    this.loadingText = 'Загрузка...',
   });
 }
 

diff --git a/lib/src/pluto_grid.dart b/lib/src/pluto_grid.dart
@@ -64,6 +64,7 @@ class _PlutoGridState extends State<PlutoGrid> {
   double _bodyRightOffset;
   bool _hasRightFixedColumns;
   double _rightFixedLeftOffset;
+  bool _showLoading;
 
   List<Function()> disposeList = [];
 
@@ -197,7 +198,8 @@ class _PlutoGridState extends State<PlutoGrid> {
         _bodyLeftOffset != stateManager.bodyLeftOffset ||
         _bodyRightOffset != stateManager.bodyRightOffset ||
         _hasRightFixedColumns != stateManager.hasRightFixedColumns ||
-        _rightFixedLeftOffset != stateManager.rightFixedLeftOffset) {
+        _rightFixedLeftOffset != stateManager.rightFixedLeftOffset ||
+        _showLoading != stateManager.showLoading) {
       setState(resetState);
     }
   }
@@ -229,6 +231,8 @@ class _PlutoGridState extends State<PlutoGrid> {
     _hasRightFixedColumns = stateManager.hasRightFixedColumns;
 
     _rightFixedLeftOffset = stateManager.rightFixedLeftOffset;
+
+    _showLoading = stateManager.showLoading;
   }
 
   @override
@@ -361,6 +365,19 @@ class _PlutoGridState extends State<PlutoGrid> {
                         child: widget.createFooter(stateManager),
                       ),
                     ],
+                    if (stateManager.showLoading)
+                      Positioned.fill(
+                        child: PlutoLoadingWidget(
+                          backgroundColor:
+                              stateManager.configuration.gridBackgroundColor,
+                          indicatorColor:
+                              stateManager.configuration.cellTextStyle.color,
+                          indicatorText:
+                              stateManager.configuration.localeText.loadingText,
+                          indicatorSize:
+                              stateManager.configuration.cellTextStyle.fontSize,
+                        ),
+                      ),
                   ],
                 ),
               ),

diff --git a/lib/src/widget/pluto_loading_widget.dart b/lib/src/widget/pluto_loading_widget.dart
@@ -0,0 +1,48 @@
+part of '../../pluto_grid.dart';
+
+class PlutoLoadingWidget extends StatelessWidget {
+  final Color backgroundColor;
+  final Color indicatorColor;
+  final String indicatorText;
+  final double indicatorSize;
+
+  PlutoLoadingWidget({
+    this.backgroundColor = Colors.white,
+    this.indicatorColor = Colors.black,
+    this.indicatorText = 'Loading...',
+    this.indicatorSize = 14,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        Positioned.fill(
+          child: Opacity(
+            opacity: 0.7,
+            child: ColoredBox(
+              color: backgroundColor,
+            ),
+          ),
+        ),
+        Align(
+          alignment: Alignment.center,
+          child: Container(
+            padding: const EdgeInsets.all(10.0),
+            decoration: BoxDecoration(
+              color: backgroundColor,
+              border: Border.all(color: indicatorColor),
+            ),
+            child: Text(
+              indicatorText,
+              style: TextStyle(
+                color: indicatorColor,
+                fontSize: indicatorSize,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}