How to work with progress indicator in flutter

Question

I m newbie in flutter and wanted to know what is better way to add CircularProgressIndicator in my layout  For example  my login view  This view have username  password and login Button  I did want create a overlay layout  with Opacity  that  when loading  show progress indicator like I use in NativeScript  but I m little confused with how to do and too if it is the better way  On NativeScript  for example  I add IndicatorActivity in main layout and set busy to true or false  so it overlay all view components when is loading   Edit   I was able to reach this result       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   Flutter Demo             theme  new ThemeData              primarySwatch  Colors blue                         home  new MyHomePage title   Flutter Demo Home Page                                  class MyHomePage extends StatefulWidget         MyHomePage  Key key  this title     super key  key          final String title          override        MyHomePageState createState     gt  new  MyHomePageState               class  MyHomePageState extends State lt MyHomePage gt          bool  loading   false         void  onLoading             setState                 loading   true            new Future delayed new Duration seconds  3    login                               Future  login   async          setState                loading   false                              override       Widget build BuildContext context                var body   new Column                children   lt Widget gt                   new Container                    height  40 0                    padding  const EdgeInsets all 10 0                     margin  const EdgeInsets fromLTRB 15 0  150 0  15 0  0 0                     decoration  new BoxDecoration                      color  Colors white                                         child  new TextField                      decoration  new InputDecoration collapsed hintText   username                                                            new Container                    height  40 0                    padding  const EdgeInsets all 10 0                     margin  const EdgeInsets all 15 0                     decoration  new BoxDecoration                      color  Colors white                                         child  new TextField                      decoration  new InputDecoration collapsed hintText   password                                                                                        var bodyProgress   new Container              child  new Stack                children   lt Widget gt                   body                  new Container                    alignment  AlignmentDirectional center                    decoration  new BoxDecoration                      color  Colors white70                                         child  new Container                      decoration  new BoxDecoration                        color  Colors blue 200                         borderRadius  new BorderRadius circular 10 0                                             width  300 0                      height  200 0                      alignment  AlignmentDirectional center                      child  new Column                        crossAxisAlignment  CrossAxisAlignment center                        mainAxisAlignment  MainAxisAlignment center                        children   lt Widget gt                           new Center                            child  new SizedBox                              height  50 0                              width  50 0                              child  new CircularProgressIndicator                                value  null                                strokeWidth  7 0                                                                                                                 new Container                            margin  const EdgeInsets only top  25 0                             child  new Center                              child  new Text                                 loading   wait                                    style  new TextStyle                                  color  Colors white                                                                                                                                                                                                                                                                         return new Scaffold              appBar  new AppBar                title  new Text widget title                              body  new Container                decoration  new BoxDecoration                  color  Colors blue 200                                 child   loading   bodyProgress   body                            floatingActionButton  new FloatingActionButton                onPressed   onLoading                tooltip   Loading                 child  new Icon Icons check                                                 I m still adapting to the idea of   states  This code is within the expected when working with flutter   Thanks

User · Answer

Create a bool isLoading and set it to false  With the help of ternary operator  When user clicks on login button set state of isLoading to true  You will get circular loading indicator in place of login button   isLoading   new PrimaryButton                        key  new Key  login                          text   Login                         height  44 0                        onPressed  setState    isLoading   true                         Center                        child  CircularProgressIndicator                             You can see Screenshots how it looks while before login is clicked   After login is clicked   In mean time you can run login process and login user  If user credentials are wrong then again you will setState of isLoading to false  such that loading indicator will become invisible and login button visible to user  By the way  primaryButton used in code is my custom button  You can do same with OnPressed in button

User · Answer

I suggest to use this plugin flutter easyloading flutter easyloading is clean and lightweight Loading widget for Flutter App  easy to use without context  support iOS and Android Add this to your package s pubspec yaml file  dependencies    flutter easyloading   2 0 0  Now in your Dart code  you can use  import  package flutter easyloading flutter easyloading dart    To use  First  initialize FlutterEasyLoading in MaterialApp CupertinoApp class MyApp extends StatelessWidget        This widget is the root of your application     override   Widget build BuildContext context        return MaterialApp        title   Flutter EasyLoading         theme  ThemeData          primarySwatch  Colors blue                 home  MyHomePage title   Flutter EasyLoading          builder  EasyLoading init                  EasyLoading is a singleton  so you can custom loading style any where like this  import  dart async   import  package flutter material dart   import  package flutter cupertino dart   import  package flutter easyloading flutter easyloading dart   import    custom animation dart    void main       runApp MyApp       configLoading       void configLoading       EasyLoading instance       displayDuration   const Duration milliseconds  2000        indicatorType   EasyLoadingIndicatorType fadingCircle       loadingStyle   EasyLoadingStyle dark       indicatorSize   45 0       radius   10 0       progressColor   Colors yellow       backgroundColor   Colors green       indicatorColor   Colors yellow       textColor   Colors yellow       maskColor   Colors blue withOpacity 0 5        userInteractions   true       customAnimation   CustomAnimation       Then  use per your requirement import  package flutter material dart   import  package flutter easyloading flutter easyloading dart   import  package dio dio dart    class TestPage extends StatefulWidget      override    TestPageState createState     gt   TestPageState       class  TestPageState extends State lt TestPage gt       override   void initState         super initState           EasyLoading show            override   void deactivate         EasyLoading dismiss        super deactivate           void loadData   async       try         EasyLoading show          Response response   await Dio   get  https   github com          print response         EasyLoading dismiss          catch  e          EasyLoading showError e toString           print e                 override   Widget build BuildContext context        return Scaffold        appBar  AppBar          title  Text  Flutter EasyLoading                   body  Center          child  FlatButton            textColor  Colors blue            child  Text  loadData              onPressed                   loadData                   await Future delayed Duration seconds  2                   EasyLoading show status   loading                      await Future delayed Duration seconds  5                   EasyLoading dismiss

User · Answer

class Loader extends StatefulWidget          override       State createState     gt  LoaderState               class LoaderState extends State lt Loader gt  with SingleTickerProviderStateMixin         AnimationController controller        Animation lt double gt  animation          override       void initState             super initState            controller   AnimationController              duration  Duration milliseconds  1200   vsync  this           animation   CurvedAnimation parent  controller  curve  Curves elasticOut           animation addListener                this setState                             animation addStatusListener  AnimationStatus status               controller repeat                    override       void dispose             controller dispose            super dispose                    override       Widget build BuildContext context            return Column            mainAxisAlignment  MainAxisAlignment center            children   lt Widget gt               Container                color  Colors blue                height  3 0                width  animation value   100 0                             Padding                padding  EdgeInsets only bottom  5 0                              Container                color  Colors blue 300                 height  3 0                width  animation value   75 0                             Padding                padding  EdgeInsets only bottom  5 0                              Container                color  Colors blue                height  3 0                width  animation value   50 0                                                            Expanded                          child  Padding                            padding                                EdgeInsets only left  20 0  right  5 0  top 20 0                             child  GestureDetector                              onTap                                     Navigator push                                    context                                    MaterialPageRoute                                        builder   context    gt  FirstScreen                                                                 child  Container                                  alignment  Alignment center                                  height  45 0                                  decoration  BoxDecoration                                      color  Color 0xFF1976D2                                       borderRadius  BorderRadius circular 9 0                                    child  Text  Login                                       style  TextStyle                                          fontSize  20 0  color  Colors white

User · Answer

1  Without plugin      class IndiSampleState extends State lt ProgHudPage gt       override   Widget build BuildContext context        return new Scaffold          appBar  new AppBar            title  new Text  Demo                       body  Center            child  RaisedButton              color  Colors blueAccent              child  Text  Login                onPressed     async                 showDialog                    context  context                    builder   BuildContext context                        return Center child  CircularProgressIndicator                                          await loginAction                  Navigator pop context                                                  Future lt bool gt  loginAction   async         replace the below line of code with your login request     await new Future delayed const Duration seconds  2        return true          2  With plugin  check this plugin progress hud   add the dependency in the pubspec yaml file  dev dependencies    progress hud     import the package  import  package progress hud progress hud dart     Sample code is given below to show and hide the indicator  class ProgHudPage extends StatefulWidget      override    ProgHudPageState createState     gt   ProgHudPageState       class  ProgHudPageState extends State lt ProgHudPage gt      ProgressHUD  progressHUD     override   void initState          progressHUD   new ProgressHUD        backgroundColor  Colors black12        color  Colors white        containerColor  Colors blue        borderRadius  5 0        loading  false        text   Loading                 super initState            override   Widget build BuildContext context        return new Scaffold          appBar  new AppBar            title  new Text  ProgressHUD Demo                       body  new Stack            children   lt Widget gt                progressHUD              new Positioned                  child  RaisedButton                    color  Colors blueAccent                    child  Text  Login                      onPressed     async                       progressHUD state show                        await loginAction                         progressHUD state dismiss                                                            bottom  30 0                  right  10 0                                  Future lt bool gt  loginAction  async        replace the below line of code with your login request     await new Future delayed const Duration seconds  2        return true

User · Answer

Centered on screen  Column      mainAxisAlignment  MainAxisAlignment center      mainAxisSize  MainAxisSize max      crossAxisAlignment  CrossAxisAlignment start      children            Row              mainAxisAlignment  MainAxisAlignment center              mainAxisSize  MainAxisSize max              children   CircularProgressIndicator

User · Answer

In flutter  there are a few ways to deal with Asynchronous actions  A lazy way to do it can be using a modal  Which will block the user input  thus preventing any unwanted actions  This would require very little change to your code  Just modifying your  onLoading to something like this   void  onLoading       showDialog      context  context      barrierDismissible  false      builder   BuildContext context          return Dialog          child  new Row            mainAxisSize  MainAxisSize min            children                new CircularProgressIndicator                new Text  quot Loading quot                                                   new Future delayed new Duration seconds  3            Navigator pop context     pop dialog      login             The most ideal way to do it is using FutureBuilder and a stateful widget  Which is what you started  The trick is that  instead of having a boolean loading   false in your state  you can directly use a Future lt MyUser gt  user And then pass it as argument to FutureBuilder  which will give you some info such as  quot hasData quot  or the instance of MyUser when completed  This would lead to something like this    immutable class MyUser     final String name     MyUser this name      class MyApp extends StatelessWidget        This widget is the root of your application     override   Widget build BuildContext context        return new MaterialApp        title   Flutter Demo         home  new MyHomePage title   Flutter Demo Home Page                  class MyHomePage extends StatefulWidget     MyHomePage  Key key  this title     super key  key      final String title      override    MyHomePageState createState     gt  new  MyHomePageState       class  MyHomePageState extends State lt MyHomePage gt      Future lt MyUser gt  user     void  logIn         setState            user   new Future delayed const Duration seconds  3                return new MyUser  quot Toto quot                             Widget  buildForm AsyncSnapshot lt MyUser gt  snapshot        var floatBtn   new RaisedButton        onPressed            snapshot connectionState    ConnectionState none    logIn   null        child  new Icon Icons save              var action           snapshot connectionState    ConnectionState none  amp  amp   snapshot hasData               new Stack                  alignment  FractionalOffset center                  children   lt Widget gt                     floatBtn                    new CircularProgressIndicator                      backgroundColor  Colors red                                                                        floatBtn       return new ListView        padding  const EdgeInsets all 15 0           children   lt Widget gt             new ListTile              title  new TextField                           new ListTile              title  new TextField obscureText  true                          new Center child  action                            override   Widget build BuildContext context        return new FutureBuilder        future  user        builder   context  AsyncSnapshot lt MyUser gt  snapshot            if  snapshot hasData              return new Scaffold              appBar  new AppBar                title  new Text  quot Hello   snapshot data name  quot                                          else             return new Scaffold              appBar  new AppBar                title  new Text  quot Connection quot                               body   buildForm snapshot

User · Answer

isloading  progressIos Container    progressIos int i        return Container          color  i    1               AppColors liteBlack               i    2   AppColors darkBlack   i    3   AppColors pinkBtn               child  Center child  CupertinoActivityIndicator

User · Answer

I took the following approach  which uses a simple modal progress indicator widget that wraps whatever you want to make modal during an async call    The example in the package also addresses how to handle form validation while making async calls to validate the form  see flutter issues 9688 for details of this problem   For example  without leaving the form  this async form validation method can be used to validate a new user name against existing names in a database while signing up   https   pub dartlang org packages modal progress hud  Here is the demo of the example provided with the package  with source code      Example could be adapted to other modal progress indicator behaviour  like different animations  additional text in modal  etc

User · Answer

For me  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 lt ScaffoldState gt   scaffoldKey   new GlobalKey lt ScaffoldState gt       Add it to your Scaffold key attribute  return new Scaffold        key   scaffoldKey            My SignIn button onPressed callback   onPressed                          scaffoldKey currentState showSnackBar                        new SnackBar duration  new Duration seconds  4   content                        new Row                          children   lt Widget gt                             new CircularProgressIndicator                              new Text    Signing-In                                                                                                       handleSignIn                          whenComplete      gt                        Navigator of context  pushNamed   Home                                            It really depends on how you want to build your layout  and I am not sure what you have in mind   Edit  You probably want it this way  I have used a Stack to achieve this result and just show or hide my indicator based on onPressed    class TestSignInView extends StatefulWidget      override    TestSignInViewState createState     gt  new  TestSignInViewState        class  TestSignInViewState extends State lt TestSignInView gt      bool  load   false     override   Widget build BuildContext context        Widget loadingIndicator   load  new Container        color  Colors grey 300         width  70 0        height  70 0        child  new Padding padding  const EdgeInsets all 5 0  child  new Center child  new CircularProgressIndicator            new Container        return new Scaffold        backgroundColor  Colors white        body   new Stack children   lt Widget gt  new Padding          padding  const EdgeInsets symmetric vertical  50 0  horizontal  20 0           child  new ListView             children   lt Widget gt               new Column                mainAxisAlignment  MainAxisAlignment center                crossAxisAlignment  CrossAxisAlignment center                children   lt Widget gt               new TextField                new TextField                 new FlatButton color Colors blue child  new Text  Sign In                    onPressed                     setState                      load true                                         Navigator of context  push new MaterialPageRoute builder       gt new HomeTest                                                                                new Align child  loadingIndicator alignment  FractionalOffset center

User · Answer

You can use FutureBuilder widget instead  This takes an argument which must be a Future  Then you can use a snapshot which is the state at the time being of the async call when loging in  once it ends the state of the async function return  will be updated and the future builder will rebuild  itself so you can then ask  for the new state   FutureBuilder    future   myFutureFunction      builder   context  AsyncSnapshot lt List lt item gt  gt  snapshot        if   snapshot hasData          return Center          child  CircularProgressIndicator                   else          Send the user to the next page            Here you have an example on how to build a Future  Future lt void gt  myFutureFunction   async   await callToApi

User · Answer

This is my solution with stack  import  package flutter material dart   import  package shared preferences shared preferences dart   import  dart async    final themeColor   new Color 0xfff5a623   final primaryColor   new Color 0xff203152   final greyColor   new Color 0xffaeaeae   final greyColor2   new Color 0xffE8E8E8    class LoadindScreen extends StatefulWidget     LoadindScreen  Key key  this title     super key  key     final String title     override   LoginScreenState createState     gt  new LoginScreenState       class LoginScreenState extends State lt LoadindScreen gt      SharedPreferences prefs     bool isLoading   false     Future lt Null gt  handleSignIn   async       setState            isLoading   true              prefs   await SharedPreferences getInstance        var isLoadingFuture   Future delayed const Duration seconds  3              return false              isLoadingFuture then  response          setState              isLoading   response                            override   Widget build BuildContext context        return Scaffold          appBar  AppBar            title  Text              widget title              style  TextStyle color  primaryColor  fontWeight  FontWeight bold                          centerTitle  true                     body  Stack            children   lt Widget gt               Center                child  FlatButton                    onPressed  handleSignIn                    child  Text                       SIGN IN WITH GOOGLE                       style  TextStyle fontSize  16 0                                          color  Color 0xffdd4b39                     highlightColor  Color 0xffff7f7f                     splashColor  Colors transparent                    textColor  Colors white                    padding  EdgeInsets fromLTRB 30 0  15 0  30 0  15 0                                   Loading             Positioned                child  isLoading                     Container                        child  Center                          child  CircularProgressIndicator                            valueColor  AlwaysStoppedAnimation lt Color gt  themeColor                                                                             color  Colors white withOpacity 0 8                                             Container

User · Answer

Step 1  Create Dialog     showAlertDialog BuildContext context         AlertDialog alert AlertDialog          content  new Row              children                   CircularProgressIndicator                   Container margin  EdgeInsets only left  5  child Text  Loading                                      showDialog barrierDismissible  false          context context          builder  BuildContext context             return alert                              Step 2 Call it  showAlertDialog context   await firebaseAuth signInWithEmailAndPassword email  email  password  password   Navigator pop context     Example With Dialog and login form  import  package flutter cupertino dart   import  package flutter material dart   import  package firebase auth firebase auth dart   class DynamicLayout extends StatefulWidget     override   State lt StatefulWidget gt  createState            TODO  implement createState     return new MyWidget              showAlertDialog BuildContext context     AlertDialog alert AlertDialog      content  new Row          children               CircularProgressIndicator               Container margin  EdgeInsets only left  5  child Text  Loading                          showDialog barrierDismissible  false      context context      builder  BuildContext context         return alert                   class MyWidget extends State lt DynamicLayout gt     Color color   Colors indigoAccent    String title  app     GlobalKey lt FormState gt  globalKey GlobalKey lt FormState gt       String email password    login   async     var currentState  globalKey currentState     if currentState validate             currentState save            FirebaseAuth firebaseAuth FirebaseAuth instance          try             showAlertDialog context             AuthResult authResult await firebaseAuth signInWithEmailAndPassword                email  email  password  password             FirebaseUser user authResult user            Navigator pop context            catch e             print e                 else               override   Widget build BuildContext context        return new Scaffold          appBar AppBar          title  Text   title                          body  Container child  Form              key  globalKey              child  Container                padding  EdgeInsets all 10                 child  Column children   lt Widget gt                 TextFormField decoration  InputDecoration icon  Icon Icons email  labelText   Email                     ignore  missing return               validator  val                   if val isEmpty                    return  Please Enter Your Email                                  onSaved  val                   email val                                                    TextFormField decoration  InputDecoration icon  Icon Icons lock  labelText   Password                 obscureText  true                       ignore  missing return                   validator  val                       if val isEmpty                        return  Please Enter Your Password                                          onSaved  val                       password val                                                        RaisedButton color  Colors lightBlue textColor  Colors white child  Text  Login                      onPressed login

User · Answer

You can do it for center transparent progress indicator  Future lt Null gt   submitDialog BuildContext context  async     return await showDialog lt Null gt         context  context        barrierDismissible  false        builder   BuildContext context            return SimpleDialog            elevation  0 0            backgroundColor  Colors transparent            children   lt Widget gt               Center                child  CircularProgressIndicator

[dart] How to work with progress indicator in flutter?

Examples related to dart

Examples related to flutter