Added the ability to add a custom loading indicator

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
     "dart.lineLength": 80,
-}
+    "files.eol": "auto",
+    "prettier.endOfLine": "auto"
+}

demo/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:demo/screen/feature/custom_loading_indicator_screen.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -58,58 +59,44 @@ class MyApp extends StatelessWidget {
           kReleaseMode ? HomeScreen.routeName : DevelopmentScreen.routeName,
       routes: {
         HomeScreen.routeName: (context) => const HomeScreen(),
-        AddAndRemoveColumnRowScreen.routeName: (context) =>
-            const AddAndRemoveColumnRowScreen(),
-        AddRowsAsynchronouslyScreen.routeName: (context) =>
-            const AddRowsAsynchronouslyScreen(),
+        AddAndRemoveColumnRowScreen.routeName: (context) => const AddAndRemoveColumnRowScreen(),
+        AddRowsAsynchronouslyScreen.routeName: (context) => const AddRowsAsynchronouslyScreen(),
         CellRendererScreen.routeName: (context) => const CellRendererScreen(),
         CellSelectionScreen.routeName: (context) => const CellSelectionScreen(),
         RTLScreen.routeName: (context) => const RTLScreen(),
-        ColumnFilteringScreen.routeName: (context) =>
-            const ColumnFilteringScreen(),
+        ColumnFilteringScreen.routeName: (context) => const ColumnFilteringScreen(),
         ColumnFooterScreen.routeName: (context) => const ColumnFooterScreen(),
-        ColumnFreezingScreen.routeName: (context) =>
-            const ColumnFreezingScreen(),
+        ColumnFreezingScreen.routeName: (context) => const ColumnFreezingScreen(),
         ColumnGroupScreen.routeName: (context) => const ColumnGroupScreen(),
         ColumnHidingScreen.routeName: (context) => const ColumnHidingScreen(),
         ColumnMenuScreen.routeName: (context) => const ColumnMenuScreen(),
         ColumnMovingScreen.routeName: (context) => const ColumnMovingScreen(),
-        ColumnResizingScreen.routeName: (context) =>
-            const ColumnResizingScreen(),
+        ColumnResizingScreen.routeName: (context) => const ColumnResizingScreen(),
         ColumnSortingScreen.routeName: (context) => const ColumnSortingScreen(),
         CopyAndPasteScreen.routeName: (context) => const CopyAndPasteScreen(),
-        CurrencyTypeColumnScreen.routeName: (context) =>
-            const CurrencyTypeColumnScreen(),
+        CurrencyTypeColumnScreen.routeName: (context) => const CurrencyTypeColumnScreen(),
         DarkModeScreen.routeName: (context) => const DarkModeScreen(),
-        DateTypeColumnScreen.routeName: (context) =>
-            const DateTypeColumnScreen(),
+        DateTypeColumnScreen.routeName: (context) => const DateTypeColumnScreen(),
         DualModeScreen.routeName: (context) => const DualModeScreen(),
         EditingStateScreen.routeName: (context) => const EditingStateScreen(),
         ExportScreen.routeName: (context) => const ExportScreen(),
         GridAsPopupScreen.routeName: (context) => const GridAsPopupScreen(),
         ListingModeScreen.routeName: (context) => const ListingModeScreen(),
         MovingScreen.routeName: (context) => const MovingScreen(),
-        NumberTypeColumnScreen.routeName: (context) =>
-            const NumberTypeColumnScreen(),
+        NumberTypeColumnScreen.routeName: (context) => const NumberTypeColumnScreen(),
         RowColorScreen.routeName: (context) => const RowColorScreen(),
         RowGroupScreen.routeName: (context) => const RowGroupScreen(),
-        RowInfinityScrollScreen.routeName: (context) =>
-            const RowInfinityScrollScreen(),
-        RowLazyPaginationScreen.routeName: (context) =>
-            const RowLazyPaginationScreen(),
+        RowInfinityScrollScreen.routeName: (context) => const RowInfinityScrollScreen(),
+        RowLazyPaginationScreen.routeName: (context) => const RowLazyPaginationScreen(),
         RowMovingScreen.routeName: (context) => const RowMovingScreen(),
         RowPaginationScreen.routeName: (context) => const RowPaginationScreen(),
         RowSelectionScreen.routeName: (context) => const RowSelectionScreen(),
-        RowWithCheckboxScreen.routeName: (context) =>
-            const RowWithCheckboxScreen(),
-        SelectionTypeColumnScreen.routeName: (context) =>
-            const SelectionTypeColumnScreen(),
-        TextTypeColumnScreen.routeName: (context) =>
-            const TextTypeColumnScreen(),
-        TimeTypeColumnScreen.routeName: (context) =>
-            const TimeTypeColumnScreen(),
-        ValueFormatterScreen.routeName: (context) =>
-            const ValueFormatterScreen(),
+        RowWithCheckboxScreen.routeName: (context) => const RowWithCheckboxScreen(),
+        SelectionTypeColumnScreen.routeName: (context) => const SelectionTypeColumnScreen(),
+        TextTypeColumnScreen.routeName: (context) => const TextTypeColumnScreen(),
+        TimeTypeColumnScreen.routeName: (context) => const TimeTypeColumnScreen(),
+        ValueFormatterScreen.routeName: (context) => const ValueFormatterScreen(),
+        CustomLoadingIndicatorScreen.routeName: (context) => const CustomLoadingIndicatorScreen(),
         // only development
         EmptyScreen.routeName: (context) => const EmptyScreen(),
         DevelopmentScreen.routeName: (context) => const DevelopmentScreen(),

demo/lib/screen/feature/custom_loading_indicator_screen.dart

@@ -0,0 +1,138 @@
+import 'package:flutter/material.dart';
+import 'package:pluto_grid_plus/pluto_grid_plus.dart';
+
+import '../../dummy_data/development.dart';
+
+class CustomLoadingIndicatorScreen extends StatefulWidget {
+  static const routeName = 'feature/custom-loading-indicator';
+
+  const CustomLoadingIndicatorScreen({super.key});
+
+  @override
+  _CustomLoadingIndicatorScreenState createState() =>
+      _CustomLoadingIndicatorScreenState();
+}
+
+class _CustomLoadingIndicatorScreenState
+    extends State<CustomLoadingIndicatorScreen> {
+  late List<PlutoColumn> columns;
+
+  late List<PlutoRow> rows;
+
+  PlutoGridStateManager? stateManager;
+
+  @override
+  void initState() {
+    super.initState();
+
+    columns = [
+      PlutoColumn(
+        title: 'column1',
+        field: 'column1',
+        type: PlutoColumnType.text(),
+      ),
+      PlutoColumn(
+        title: 'column2',
+        field: 'column2',
+        type: PlutoColumnType.text(),
+      ),
+      PlutoColumn(
+        title: 'column3',
+        field: 'column3',
+        type: PlutoColumnType.text(),
+      ),
+    ];
+
+    rows = DummyData.rowsByColumns(length: 10, columns: columns);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListenableBuilder(
+      listenable: Listenable.merge([stateManager]),
+      builder: (context, child) {
+        return Scaffold(
+          appBar: AppBar(
+            title: const Text('Custom Loading Indicator'),
+            actions: PlutoGridLoadingLevel.values.map((level) {
+              if (stateManager == null) return SizedBox.shrink();
+
+              return Padding(
+                padding: const EdgeInsets.all(8),
+                child: GestureDetector(
+                  onTap: () => stateManager?.setLoadingLevel(level),
+                  child: MouseRegion(
+                    cursor: SystemMouseCursors.click,
+                    child: Container(
+                      decoration: BoxDecoration(
+                        border: Border.all(
+                            color: stateManager?.loadingLevel == level
+                                ? Theme.of(context).colorScheme.primary
+                                : Colors.transparent),
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                      padding: const EdgeInsets.all(8),
+                      child: Text(level.name),
+                    ),
+                  ),
+                ),
+              );
+            }).toList(),
+          ),
+          persistentFooterButtons: [
+            TextButton(
+              onPressed: () {
+                stateManager?.setShowLoading(stateManager?.showLoading == false,
+                    level: stateManager!.loadingLevel);
+              },
+              child: const Text('Toggle Loading'),
+            )
+          ],
+          body: SafeArea(
+            child: Container(
+              padding: const EdgeInsets.all(8),
+              child: PlutoGrid(
+                columns: columns,
+                rows: rows,
+                mode: PlutoGridMode.readOnly,
+                onLoaded: (PlutoGridOnLoadedEvent event) {
+                  setState(() => stateManager = event.stateManager);
+
+                  stateManager?.setCustomLoadingIndicator(
+                      (context) => CustomLoadingIndicator());
+                },
+                configuration: const PlutoGridConfiguration(
+                    columnSize: PlutoGridColumnSizeConfig(
+                        autoSizeMode: PlutoAutoSizeMode.scale)),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+class CustomLoadingIndicator extends StatefulWidget {
+  const CustomLoadingIndicator({super.key});
+
+  @override
+  State<CustomLoadingIndicator> createState() => _CustomLoadingIndicatorState();
+}
+
+class _CustomLoadingIndicatorState extends State<CustomLoadingIndicator> {
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        Positioned.fill(
+          child: ColoredBox(
+            color:
+                Theme.of(context).colorScheme.onPrimary.withValues(alpha: .6),
+          ),
+        ),
+        Center(child: CircularProgressIndicator.adaptive()),
+      ],
+    );
+  }
+}

demo/lib/screen/home_screen.dart

@@ -1,6 +1,7 @@
 import 'dart:math';
 
 import 'package:demo/screen/empty_screen.dart';
+import 'package:demo/screen/feature/custom_loading_indicator_screen.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 
@@ -166,8 +167,7 @@ class HomeScreen extends StatelessWidget {
                               cursor: SystemMouseCursors.click,
                               child: GestureDetector(
                                 onTap: () {
-                                  launchUrl(
-                                      'https://www.buymeacoffee.com/manki');
+                                  launchUrl('https://www.buymeacoffee.com/manki');
                                 },
                                 child: Image.asset(
                                   'assets/images/buy_me_a_coffee.png',
@@ -215,8 +215,7 @@ class PlutoFeatures extends StatelessWidget {
         children: [
           PlutoListTile(
             title: 'Column moving',
-            description:
-                'Dragging the column heading left or right moves the column left and right.',
+            description: 'Dragging the column heading left or right moves the column left and right.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, ColumnMovingScreen.routeName);
             },
@@ -237,16 +236,14 @@ class PlutoFeatures extends StatelessWidget {
           ),
           PlutoListTile(
             title: 'Column resizing',
-            description:
-                'Dragging the icon to the right of the column title left or right changes the width of the column.',
+            description: 'Dragging the icon to the right of the column title left or right changes the width of the column.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, ColumnResizingScreen.routeName);
             },
           ),
           PlutoListTile(
             title: 'Column sorting',
-            description:
-                'Ascending or Descending by clicking on the column heading.',
+            description: 'Ascending or Descending by clicking on the column heading.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, ColumnSortingScreen.routeName);
             },
@@ -274,8 +271,7 @@ class PlutoFeatures extends StatelessWidget {
           ),
           PlutoListTile(
             title: 'Column footer',
-            description:
-                'Display each column fixed at the bottom. (For outputting data sum, average, etc.)',
+            description: 'Display each column fixed at the bottom. (For outputting data sum, average, etc.)',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, ColumnFooterScreen.routeName);
             },
@@ -340,8 +336,7 @@ class PlutoFeatures extends StatelessWidget {
           ),
           PlutoListTile(
             title: 'Row selection',
-            description:
-                'In Row selection mode, Shift + tap or long tap and then move or Control + tap to select a row.',
+            description: 'In Row selection mode, Shift + tap or long tap and then move or Control + tap to select a row.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, RowSelectionScreen.routeName);
             },
@@ -362,8 +357,7 @@ class PlutoFeatures extends StatelessWidget {
           ),
           PlutoListTile(
             title: 'Row lazy pagination',
-            description:
-                'Implement pagination in the form of fetching data from the server.',
+            description: 'Implement pagination in the form of fetching data from the server.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, RowLazyPaginationScreen.routeName);
             },
@@ -403,32 +397,28 @@ class PlutoFeatures extends StatelessWidget {
           ),
           PlutoListTile(
             title: 'Cell selection',
-            description:
-                'In cell selection mode, Shift + tap or long tap and then move to select cells.',
+            description: 'In cell selection mode, Shift + tap or long tap and then move to select cells.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, CellSelectionScreen.routeName);
             },
           ),
           PlutoListTile(
             title: 'Cell renderer',
-            description:
-                'You can change the widget of the cell through the renderer.',
+            description: 'You can change the widget of the cell through the renderer.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, CellRendererScreen.routeName);
             },
           ),
           PlutoListTile(
             title: 'Copy and Paste',
-            description:
-                'Copy and paste are operated depending on the cell and row selection status.',
+            description: 'Copy and paste are operated depending on the cell and row selection status.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, CopyAndPasteScreen.routeName);
             },
           ),
           PlutoListTile(
             title: 'Moving',
-            description:
-                'Change the current cell position with the arrow keys, enter key, and tab key.',
+            description: 'Change the current cell position with the arrow keys, enter key, and tab key.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, MovingScreen.routeName);
             },
@@ -451,22 +441,19 @@ class PlutoFeatures extends StatelessWidget {
             title: 'Add and Remove Columns, Rows',
             description: 'You can add or delete columns, rows.',
             onTapLiveDemo: () {
-              Navigator.pushNamed(
-                  context, AddAndRemoveColumnRowScreen.routeName);
+              Navigator.pushNamed(context, AddAndRemoveColumnRowScreen.routeName);
             },
           ),
           PlutoListTile(
             title: 'Dual mode',
-            description:
-                'Place the grid on the left and right and move or edit with the keyboard.',
+            description: 'Place the grid on the left and right and move or edit with the keyboard.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, DualModeScreen.routeName);
             },
           ),
           PlutoListTile(
             title: 'Grid as Popup',
-            description:
-                'You can call the grid by popping up with the TextField.',
+            description: 'You can call the grid by popping up with the TextField.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, GridAsPopupScreen.routeName);
             },
@@ -500,10 +487,16 @@ class PlutoFeatures extends StatelessWidget {
               Navigator.pushNamed(context, EmptyScreen.routeName);
             },
           ),
+          PlutoListTile(
+            title: 'Custom Loading Indicator',
+            description: 'Define a custom loading indicator.',
+            onTapLiveDemo: () {
+              Navigator.pushNamed(context, CustomLoadingIndicatorScreen.routeName);
+            },
+          ),
           PlutoListTile.amber(
             title: 'Development',
-            description:
-                'This screen is used during development, and various functions can be tested.',
+            description: 'This screen is used during development, and various functions can be tested.',
             onTapLiveDemo: () {
               Navigator.pushNamed(context, DevelopmentScreen.routeName);
             },
@@ -713,6 +706,13 @@ class PlutoContributors extends StatelessWidget {
               launchUrl('https://github.com/coruscant187');
             },
           ),
+          PlutoContributorTile(
+            name: 'sten435',
+            linkTitle: 'Github',
+            onTapLink: () {
+              launchUrl('https://github.com/sten435');
+            },
+          ),
           PlutoContributorTile.invisible(
             name: 'And you.',
             linkTitle: 'Github',