Flutter already provides us two progress indicators as material widgets: the LinearProgressIndicator and the CircularProgressIndicator and this is awesome.
Complete Code For Display Progress Indicator In Flutter:
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
Future _incrementCounter() async {
return Future.delayed(Duration(seconds: 2), () {
setState(() {
_counter++;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.deepPurple[300],
title: Text('Loading Indicator'),
),
body: Center(
child: Text('Current counter is $_counter')
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_onPressed(context);
},
child: Icon(Icons.add),
backgroundColor: Colors.deepPurple[300],
),
);
}
void _onPressed(BuildContext context) async {
DialogBuilder(context).showLoadingIndicator('Calculating $_counter + 1');
await _incrementCounter();
DialogBuilder(context).hideOpenDialog();
}
}
class DialogBuilder {
DialogBuilder(this.context);
final BuildContext context;
void showLoadingIndicator([String text]) {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0))
),
backgroundColor: Colors.black87,
content: LoadingIndicator(
text: text
),
)
);
},
);
}
void hideOpenDialog() {
Navigator.of(context).pop();
}
}
class LoadingIndicator extends StatelessWidget{
LoadingIndicator({this.text = ''});
final String text;
@override
Widget build(BuildContext context) {
var displayedText = text;
return Container(
padding: EdgeInsets.all(16),
color: Colors.black87,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
_getLoadingIndicator(),
_getHeading(context),
_getText(displayedText)
]
)
);
}
Padding _getLoadingIndicator() {
return Padding(
child: Container(
child: CircularProgressIndicator(
strokeWidth: 3
),
width: 32,
height: 32
),
padding: EdgeInsets.only(bottom: 16)
);
}
Widget _getHeading(context) {
return
Padding(
child: Text(
'Please wait …',
style: TextStyle(
color: Colors.white,
fontSize: 16
),
textAlign: TextAlign.center,
),
padding: EdgeInsets.only(bottom: 4)
);
}
Text _getText(String displayedText) {
return Text(
displayedText,
style: TextStyle(
color: Colors.white,
fontSize: 14
),
textAlign: TextAlign.center,
);
}
}