In this article, we’ll learn how to add a circular progress indicator inside a Snackbar in a Flutter application.
Progress indicators inform users about ongoing activities like app launches, form submissions, or saving changes. They show the status of an app and guide users on whether they can navigate away from the current screen.
Circular Progress Indicator In Snackbar – Flutter
- A clever way to show a loading indicator is by displaying a Snackbar at the bottom of the screen with a progress indicator as its child. In this post, we’ll set up the Snackbar and then add a progress indicator to it.
- Define a global key for your
Scaffold
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
- Add it to your
Scaffold
key
attribute
return new Scaffold(
key: _scaffoldKey,
- My button
onPressed
callback:
onPressed: () {
_scaffoldKey.currentState.showSnackBar(
new SnackBar(duration: new Duration(seconds: 4), content:
new Row(
children: <Widget>[
new CircularProgressIndicator(),
new Text(" Signing-In...")
],
),
));
}
- It all relies on how you want to construct your layout, and I’m not sure what you’re thinking of.
Source Code – Progress Bar Snackbar Flutter
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'FlutterCorner',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: new MyHomePage(title: 'Progress Indicator - FlutterCorner.com'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return new Scaffold(
key: _scaffoldKey,
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Container(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
_scaffoldKey.currentState.showSnackBar(
new SnackBar(
duration: new Duration(seconds: 4),
content: new Row(
children: <Widget>[
new CircularProgressIndicator(),
new Text(" Signing-In...")
],
),
),
);
},
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
height: 70,
width: 250,
color: Colors.black,
child: Center(
child: Text(
"Show Progress Indicator",
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
),
),
],
),
),
),
);
}
}
FAQ
- How to put a progress indicator in snackbar in Flutter: One clever approach to accomplish displaying a loading indicator is to display a SnackBar at the bottom of the page which has a progress indicator as a child. In this post we’ll see how to get the SnackBar up and running and then add a progress indicator to it.
Conclusion
Circular progress indicators show progress by animating an indicator in a clockwise fashion around an unseen circular track. They may be immediately attached to a surface like a button or a card.
In this article, we took a look at how to implement a progress indicator within the snackbar of a Flutter application. As always, If you have found this article useful do not forget to share it and leave a comment if you have any questions.
Happy Coding…!!!
Leave a Reply