CODEWITHSUNDEEP
firebasedartmaterial-designflutterfloating-action-button
Hector
Hector

Reputation: 447

Flutter: CircularProgressIndicator()

I am trying to change the FloatingActionButton.extended to change into a CircularProgressIndicator after it's pressed, wait for the ensureLoggedIn() function to complete then move to the next screen.

My code:

new FloatingActionButton.extended(
            elevation: 20.0,
            backgroundColor: Colors.white,
            onPressed: () async {
              await ensureLoggedIn();

              Navigator.push(
                  context, MaterialPageRoute(builder: (_) => HomeScreen()));
            },
            icon: Icon(
              Icons.insert_emoticon,
              size: 30.0,
              color: Colors.black,
            ),
            label: new Text(
              "JOIN NOW!",
              style: TextStyle(
                fontSize: 30.0,
                color: Colors.black,
              ),
            ),
          ),

Upvotes: 1

Views: 2146

Answers (1)

diegoveloper
diegoveloper

Reputation: 103541

I changed your code a little bit in order to handle a loading variable.

Put your login method outside your build method, like this:

    login() async {
        setState(() {
          isLoading = true;
        });
        //your task here
        await ensureLoggedIn();
        setState(() {
          isLoading = false;
        });
        Navigator.push(context, MaterialPageRoute(builder: (_) => HomeScreen()));
      }

Part of your widget :

    isLoading
              ? CircularProgressIndicator()
              : new FloatingActionButton.extended(
                  elevation: 20.0,
                  backgroundColor: Colors.white,
                  onPressed: login,
                  icon: Icon(
                    Icons.insert_emoticon,
                    size: 30.0,
                    color: Colors.black,
                  ),
                  label: new Text(
                    "JOIN NOW!",
                    style: TextStyle(
                      fontSize: 30.0,
                      color: Colors.black,
                    ),
                  ),
                )

Upvotes: 3

Related Questions