[Feature] Ability to Customize Default Loading Widget

[Murkrow02]

Hi! First of all, thank you for your work on this awesome package! It's been extremely helpful for our project, and the features are excellent.

I would like to ask if it's possible to customize the default loading widget, as I didn't find a way to do this in the documentation. The current stock loading indicator works well, but having the option to tailor it to match our app's design would make for a more seamless user experience.

If there is already a way to customize it that I may have missed, I’d appreciate any guidance. Otherwise, it would be great to consider adding this as an enhancement for more flexible UI customization

[doonfrs]

Hi, @Murkrow02
I don't remember if you can customize it, but you can :
_stateManager!.setShowLoading(false);

Disable it and use your loader, you may include the grid inside the stack and show a loader over it, or you may change the grid opacity while it is in the loading state if you do not find a way to customize it from the package.

good luck!

[Murkrow02]

Thank you for the suggestion!

I’d actually like to display the loading indicator directly over the rows of the table, if possible, rather than using a Stack layout. Having a built-in option to customize the loading state directly on the rows would be an awesome feature to enhance the flexibility of this package!

In the meantime, your workaround should work well. I’ll give it a try. Thanks again for your help!

[stan-at-work]

I will add it, and create a PR

[stan-at-work]

Thank you for the suggestion!

I’d actually like to display the loading indicator directly over the rows of the table, if possible, rather than using a Stack layout. Having a built-in option to customize the loading state directly on the rows would be an awesome feature to enhance the flexibility of this package!

In the meantime, your workaround should work well. I’ll give it a try. Thanks again for your help!

How to Use setCustomLoadingIndicator in PlutoGrid

The setCustomLoadingIndicator method allows you to define a custom widget to display as the loading indicator in a PlutoGrid. Below is an explanation based on the provided example.

---

Step-by-Step Usage

1. Define a Custom Loading Indicator

Create a custom widget that represents your loading indicator. This widget will be shown when the grid is in a loading state.

In the provided code, the CustomIndicator widget does the following:

• Creates a semi-transparent white overlay.
• Displays a "Custom Loading Indicator" text in the center.

class CustomIndicator extends StatelessWidget {
  const CustomIndicator({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: ColoredBox(
            color: Colors.white.withOpacity(0.5),
          ),
        ),
        Center(
          child: Text('Custom Loading Indicator'),
        ),
      ],
    );
  }
}

---

2. Set the Custom Loading Indicator

In the onLoaded callback of the PlutoGrid, use the setCustomLoadingIndicator method to set your custom widget:

onLoaded: (event) {
  stateManager = event.stateManager;
  // Set custom loading indicator
  stateManager?.setCustomLoadingIndicator(
    (context) => const CustomIndicator(),
  );
},

---

3. Toggle the Loading Indicator

You can programmatically control the visibility of the loading indicator using stateManager?.setShowLoading.

In the provided code:

• A FloatingActionButton toggles the visibility of the loading indicator.
• The PlutoGridLoadingLevel.custom is used to specify the loading level.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    // Toggle loading visibility
    stateManager?.setShowLoading(
      stateManager?.showLoading == false,
      level: PlutoGridLoadingLevel.custom, // Specify loading level
    );
  },
  child: const Icon(Icons.refresh),
),

---

Full Flow

1. Start the App: When you run the app, the PlutoGrid displays the rows and columns.
2. Press the FloatingActionButton: This toggles the loading indicator's visibility.
3. Custom Indicator: Instead of the default loader, your custom widget (CustomIndicator) appears.

---

Key Points

• Customization: Your loading indicator can include any widget (e.g., progress bars, animations, or custom graphics).
• Dynamic Control: Use setShowLoading and setLoadingLevel to toggle and scope the loading states.

[stan-at-work]

@Murkrow02

Navigate to the example, to see a demo.

[stan-at-work]

@doonfrs @Murkrow02 I created a #102 for it

This can be closed