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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget. In this class we would call CircularIndicator() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Circular Progress Indicator')), body: Center( child: CircularIndicator() ) ) ); } } |
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.
|
1 2 3 4 5 |
class CircularIndicator extends StatefulWidget { CircularIndicatorWidget createState() => CircularIndicatorWidget(); } |
5. Create a class named as CircularIndicatorWidget extends with State.
|
1 2 3 4 |
class CircularIndicatorWidget extends 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
|
1 |
bool visible = true ; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
loadProgress(){ if(visible == true){ setState(() { visible = false; }); } else{ setState(() { visible = true; }); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Visibility( maintainSize: true, maintainAnimation: true, maintainState: true, visible: visible, child: Container( margin: EdgeInsets.only(top: 50, bottom: 30), child: CircularProgressIndicator() ) ), RaisedButton( onPressed: loadProgress, color: Colors.pink, textColor: Colors.white, padding: EdgeInsets.fromLTRB(8, 8, 8, 8), child: Text('Click Here To Show Hide Circular Progress Indicator'), ), ], ), )); } |
9. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Circular Progress Indicator')), body: Center( child: CircularIndicator() ) ) ); } } class CircularIndicator extends StatefulWidget { CircularIndicatorWidget createState() => CircularIndicatorWidget(); } class CircularIndicatorWidget extends State { bool visible = true ; loadProgress(){ if(visible == true){ setState(() { visible = false; }); } else{ setState(() { visible = true; }); } } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Visibility( maintainSize: true, maintainAnimation: true, maintainState: true, visible: visible, child: Container( margin: EdgeInsets.only(top: 50, bottom: 30), child: CircularProgressIndicator() ) ), RaisedButton( onPressed: loadProgress, color: Colors.pink, textColor: Colors.white, padding: EdgeInsets.fromLTRB(8, 8, 8, 8), child: Text('Click Here To Show Hide Circular Progress Indicator'), ), ], ), )); } } |
Screenshots:
