Flutter: How to display a floatingActionButton only after the FutureBuilder ends

Question

I would like to display a floatingActionButton only after my future loads the data (ConnectionState.done).

It is simply displayed during the waiting and is not cool. I would like it to be displayed after future processing (ConnectionState.done).

Does anyone give a tip?

My code:

 @override
  void initState() {
    _future = getFuture();
    super.initState();
  }

  Future<List<Associated>> getFuture() async {
    return _webClient.findAll();
  }

 //@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Associated>>(

        future: _future, 

        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none:
              break;
            case ConnectionState.waiting:
              return Progress();
              break;
            case ConnectionState.active:
              break;
              case ConnectionState.done:
               if (snapshot.hasData) {
                final List<Associated> associateds = snapshot.data;
                if (associateds.isNotEmpty) {
                  return Container(

                    child: Form(
                      child: SingleChildScrollView(
                        child: associatedWidgets(associateds),
                      ),
                    ),
                  );
                }
              }
              return CenteredMessage(
                'Not found.',
                icon: Icons.warning,
              );
              break;
          }

        },
      ),
      floatingActionButton: Button(
        Icons.save,
        onClick: () {
          _update(context);
        },
      ),
    );
  }

Shri Hari L · Answer 1 · 2020-08-16T18:57:08.537

As far as I understand your question, I would like to answer it.
Make it simple like this.

Also, we should not call setState() inside of FutureBuilder.

So, considering this situation, we can do something like this.
Define a variable bool isLoading = true;

@override
  void initState() {
    getFuture().then((value){
        setState(() { 
          _future = value;
          isLoading = false;
        });
    }).catch((e) {
     // Some Error Handling
    });
    super.initState();
  }

and in assigning the FloatingActionButton, do something like this.

  floatingActionButton: isLoading? null : Button(
        Icons.save,
        onClick: () {
          _update(context);
        },
      ),

But in this case, you have to use widgets other FutureBuilder, like this.

Scaffold(
   body: isLoading ? Progress(): ListView()
);

Tip: You can just use FloatingActionButton widget with onPressed instead of Button

This statement setState(() { isLoading = false; }); causes an error: — Adalberto Júnior, Aug 16 '20 at 13:18
Yes, I figured out, we can't use `setState()` in `FutureBuilder`. I have suggested another idea. Take a look at it whether it suits your case. — Shri Hari L, Aug 16 '20 at 18:58

Flutter: How to display a floatingActionButton only after the FutureBuilder ends

1 Answers1