Load Show Hide CircularProgressIndicator on Button Click in Flutter

The CircularProgressIndicator widget also known as material style rounded loading bar is used to show display loading indicator while loading data from Internet. The most use of CircularProgressIndicator is when we are retrieving some JSON data from and to show time delay using progress indicator we can use CircularProgressIndicator. In this tutorial we would use Load Show Hide CircularProgressIndicator on Button Click in Flutter iOS Android app.

Contents in this project Load Show Hide CircularProgressIndicator on Button Click in Flutter Android iOS Example:

1. Import material.dart package in your app’s main.dart file.

2. Call our main MyApp class using void main runApp() method.

3. Create our main MyApp class extends with State less widget. In this class we would call CircularIndicator() class.

4. Create a class named as CircularIndicator() extends with State full widget. In this class we would create CircularIndicatorWidget class using createState() method. This method would enable mutable state in given class.

5. Create a class named as CircularIndicatorWidget extends with State.

6. Create a Boolean variable named as visible with default true value in CircularIndicatorWidget class. We would use this variable with State to show and hide the CircularProgressIndicator

7. Create a function named as loadProgress(). In this method we would toggle the visible bool variable value. On true value the loading indicator will display on screen and on false value the loading indicator will hide from the screen.

8. Create 1 Visibility widget with CircularProgressIndicator() widget with 1 raised button in Widget build area. We would hide the Visibility widget using bool value and so the child CircularProgressIndicator() widget will also hide with it.

9. Complete source code for main.dart file:

Screenshots:

Load Show Hide CircularProgressIndicator on Button Click in Flutter

Leave a Reply

Your email address will not be published.