Implement Progress Indicator In Flutter Snackbar

Haris Bin Nasir Avatar

·

·

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

  1. 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

Your email address will not be published. Required fields are marked *