Display CircularProgressIndicator while logging a user in-CodePudding

I'm currently working on a login screen for a Flutter app by following this video. Hence, my code is almost completely identical to the code to this video on GitHub.

I added a way to store the email and password of the user in the current state and also added a CircularProgressIndicator to the login button as soon as the button is pressed.

The latter is done by the following code (I removed all the style-related code to make it a bit more readable):

  Widget _buildLoginBtn() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 25.0),
      child: ElevatedButton(
        child: _isLoggingIn ? Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Login"),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: SizedBox(
                child: CircularProgressIndicator(),
              ),
            )
          ],
        ) : Text("Login"),
        onPressed: () => _handleLogin(),
      ),
    );
  }

Originally, I just wanted to test, whether changing the state really leads to the CircularProgressIndicator being displayed by setting _isLoggingIn to true.

After I saw that this is working just fine, I wanted to make it, so that the CircularProgressIndicator disappears again after some time (e.g. in case the login attempt is rejected). Hence, as I haven't set up an API by now, I just wanted the application to wait for some seconds before turning the progress bar off by setting _isLoggingIn to false again.

However, it turns out that thereby nothing happens visibly (only console outputs that indicate the waiting), or - in case I had _isLoggingIn previously set to true - the progress bar just stops spinning for 3 seconds and then disappears.

This is the result of the following code:

  void _handleLogin() {
    setState(() {
      _isLoggingIn = true;
    });

    print("Start Logging In");

    sleep(Duration(seconds: 3));

    print("Stop Logging In");

    setState(() {
      _isLoggingIn = false;
    });

  }

From a logical point of view this seems very logical as I basically just block the main thread, so the UI is only updated after I set _isLoggingIn to true and to false again.

I instantly thought about some functionality for async processing. I read some things on async-await, the Future function type and the FutureBuilder but as I'm pretty new to Flutter I didn't really grasp which functions to make async and also which function type I need to convert to Future<void> or how to properly trigger the async processing. Also I didn't really deal with Futures and async-await statements prior to this.

So I hope someone could give me some insight into this topic and how to solve this problem properly?

CodePudding user response：

I always use a Flutter package EasyLoading because it simplifies that process! there will no need for using a bool and setstate to add a circularprogressIndicator.

import 'package:flutter_easyloading/flutter_easyloading.dart';

Widget _buildLoginBtn() {
return Container(
  padding: EdgeInsets.symmetric(vertical: 25.0),
  child: ElevatedButton(
    child: Text("Login"),
    onPressed: () => _handleLogin(),
  ),
);
}

void _handleLogin() {
EasyLoading.show(dismissOnTap: false, status: "Loading...");
print("Start Logging In");

sleep(Duration(seconds: 3));

print("Stop Logging In");
EasyLoading.dismiss();
}

CodePudding user response：

Don't need package use mvvm format and also for indicator there will be a widget name CupertinoActivityIndicator use that