In this tutorial, You will learn how to show Loadingindicator, When a user waiting for a response after clicking on a button. In this example, We are going to implement two types of Loading indicators. They are
- Loading indicator with a custom image
- Loading indicator with Flutter’s CircularProgressIndicator
What is Stacked Layout?
Use Stack to arrange widgets on top of a base widget — often an image. The widgets can completely or partially overlap the base widget. Visit the Flutter’s example to a better understanding.
Loading indicator with a custom image
First step is, you have to add a spinner.gif image into the /assets folder and mentioned the path of the image in pubspec.yaml. you can get the image from my GitHub source code. Then you have to create a separate component for LoadingIndicator which name is loader.dart.
loader.dart
Loader widget is StatelessWidget. I have used ModalBarrier component for the overlay of the screen. As we saw earlier, The stacked layout contains multiple children widgets and arrange widgets on top of a base widget.
In our widget, the overlay will be at the bottom and the spinner image will be at the top. We have created a loader widget is configurable. You can pass any kind of loading text, overlay opacity ...etc; and even you can make it the image name also configurable.
Now we want to call the Loader widget from the home page. The _MyHomePageState widget will have an _isLoading property. This state will be changed when you click on the Loading Button. I am using Future.delayed function for mock asynchronous.
main.dart
We have finished the loading indicator with a custom image. Next, we are going to see Loading indicator with Flutter’s CircularProgressIndicator.
Loading indicator with Flutter’s CircularProgressIndicator
We have already done our widget is configurable. So this part will requires a few minor changes only. You have to add a new property isCustom. If this property is false, we have to show the CircularProgressIndicator. See the changes below in the Loader widget
When you want to show the Flutter’s CircularProgressIndicator, you just need to pass isCustom property as false while you calling the Loader widget as you can seen in below.
Loader(isCustom: false, loadingTxt: 'Content is loading...')
Conclusion
We have seen how to show Loadingindicator and I hope, you enjoyed this tutorial. Thanks for reading!
Source Code https://github.com/srajas0/flutter-loading-indicator