Implement Progress Indicator In Flutter Snackbar

In this article, we’ll take a look at how to implement a circular progress indicator within the Snackbar of a Flutter application.

Users are informed about the state of ongoing activities such as launching an app, submitting a form, or storing modifications via progress indicators. They convey the status of an app and provide information about potential actions, such as whether users may move away from the current screen.

Circular Progress Indicator In Snackbar – 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.
• Define a global key for your Scaffold

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
Code language: HTML, XML (xml)

• Add it to your Scaffold key attribute

return new Scaffold(
      key: _scaffoldKey,
Code language: JavaScript (javascript)

• 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...")
                        ],
                      ),
                      ));
                
                }
Code language: PHP (php)

• 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,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Code language: PHP (php)

Output

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