How to hide Floating Action Button in Flutter

Question

I am a beginner in Flutter and I am using Futurebuilder and provider for the first time. Finally I have created an app that adds places. Using below code, I have achieved the app almost. But a little problem appears now. When app getting data from provider, it shows floating action button. I don't want that happen. Is there any way to hide the floating action button while getting data and show it to users after getting data from database?

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import './add_place_screen.dart';
import '../providers/great_places.dart';
import './place_detail_screen.dart';

class PlacesListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Places'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              Navigator.of(context).pushNamed(AddPlaceScreen.routeName);
            },
          ),
        ],
      ),
      body: FutureBuilder(
        future: Provider.of<GreatPlaces>(context, listen: false)
            .fetchAndSetPlaces(),
        builder: (ctx, snapshot) => snapshot.connectionState ==
                ConnectionState.waiting
            ? Center(
                child: CircularProgressIndicator(),
              )
            : Consumer<GreatPlaces>(
                child: Center(
                  child: const Text('Got no places yet, start adding some!'),
                ),
                builder: (ctx, greatPlaces, ch) => greatPlaces.items.length <= 0
                    ? ch
                    : ListView.builder(
                        itemCount: greatPlaces.items.length,
                        itemBuilder: (ctx, i) => ListTile(
                              leading: CircleAvatar(
                                backgroundImage: FileImage(
                                  greatPlaces.items[i].image,
                                ),
                              ),
                              title: Text(greatPlaces.items[i].title),
                              subtitle:
                                  Text(greatPlaces.items[i].location.address),
                              onTap: () {
                                Navigator.of(context).pushNamed(
                                  PlaceDetailScreen.routeName,
                                  arguments: greatPlaces.items[i].id,
                                );
                              },
                            ),
                      ),
              ),
      
      ),
floatingActionButton:  FloatingActionButton(
            onPressed: () {
                         },
            child: Icon(Icons.add),
          ),      
  

  );
  
  }
}

Answer 1

Make your class a StatefulWidget instead of StatelessWidget. This will help to achieve the visibility of Floating Action Button. And try to handle setstate(){} in build method which is continuously called on change in state.

Answer 2

you can try ValueNotifier, https://api.flutter.dev/flutter/foundation/ValueNotifier-class.html

A ChangeNotifier that holds a single value.

When value is replaced with something that is not equal to the old value as evaluated by the equality operator ==, this class notifies its listeners.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import './add_place_screen.dart';
import '../providers/great_places.dart';
import './place_detail_screen.dart';

class PlacesListScreen extends StatelessWidget {
  final ValueNotifier<bool> _isWaiting = ValueNotifier<bool>(false);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Places'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              Navigator.of(context).pushNamed(AddPlaceScreen.routeName);
            },
          ),
        ],
      ),
      body: FutureBuilder(
          future: Provider.of<GreatPlaces>(context, listen: false)
              .fetchAndSetPlaces(),
          builder: (ctx, snapshot) {
            _isWaiting.value =
                snapshot.connectionState == ConnectionState.waiting;

            return _isWaiting.value
                ? Center(
                    child: CircularProgressIndicator(),
                  )
                : Consumer<GreatPlaces>(
                    child: Center(
                      child:
                          const Text('Got no places yet, start adding some!'),
                    ),
                    builder: (ctx, greatPlaces, ch) =>
                        greatPlaces.items.length <= 0
                            ? ch
                            : ListView.builder(
                                itemCount: greatPlaces.items.length,
                                itemBuilder: (ctx, i) => ListTile(
                                  leading: CircleAvatar(
                                    backgroundImage: FileImage(
                                      greatPlaces.items[i].image,
                                    ),
                                  ),
                                  title: Text(greatPlaces.items[i].title),
                                  subtitle: Text(
                                      greatPlaces.items[i].location.address),
                                  onTap: () {
                                    Navigator.of(context).pushNamed(
                                      PlaceDetailScreen.routeName,
                                      arguments: greatPlaces.items[i].id,
                                    );
                                  },
                                ),
                              ),
                  );
          }),
      floatingActionButton: ValueListenableBuilder(
          valueListenable: _isWaiting,
          builder: (BuildContext context, bool value, Widget child) {
            return Visibility(
                visible: !value,
                child: FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.add),
                ));
          }),
    );
  }
}

Answer 3

class PlacesListScreen extends StatelessWidget {
 var fbVisible = false;
......

builder: (ctx, greatPlaces, ch) {
if (greatPlaces.items.length <= 0){
fbVisible = false;
return ch;
}
else {
fbVisible = true;                    
return ListView.builder(
.....

    floatingActionButton:  Visibility(visible:fbVisible,
    child:
    FloatingActionButton(
                onPressed: () {
                             },
                child: Icon(Icons.add),
              )),