close

Progress indicator in snackbar in flutter

Hello Guys how are you all? Hope you all are fine. Today in this tutorial we are going to learn Progress indicator in snackbar in flutter. So without wasting your time. Lets start this tutorial.

Progress indicator in snackbar in flutter

  • One neat way to do this is to show a SnackBar at the bottom while the Signing-In process is taken place, this is a an example of what I mean. Here is how to setup the SnackBar.
  • 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 really depends on how you want to build your layout, and I am not sure what you have in mind.

Complete Source Code

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,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output

Faq

  1. Progress indicator in snackbar in flutter

    One neat way to do this is to show a SnackBar at the bottom while the Signing-In process is taken place, this is a an example of what I mean. Here is how to setup the SnackBar.Define a global key for your Scaffold

  2. Progress indicator in snackbar in flutter

    One neat way to do this is to show a SnackBar at the bottom while the Signing-In process is taken place, this is a an example of what I mean. Here is how to setup the SnackBar.Define a global key for your Scaffold

Summery

So, It’s All About this tutorial. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

Leave a Comment

%d bloggers like this: