How to invisible widget when there is no data in firebase?

Issue

i am new to flutter, i’m trying to invisible button when there is no data in Firebase.

To get data i’m using StreamBuilder, if snapshot.data!.docs is null i want to invisible CustomButton which is outside of StreamBuilder.

StreamBuilder:

bool _isVisible = true; //variable

@override
   Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      key: _scaffoldKey,
      appBar: _appBar(context),
      body: CommonRefreshIndicator(
        child: StreamBuilder(
          stream: FirebaseFirestore.instance
              .collection('users')
              .doc(_currentUser!.uid)
              .collection('favourites')
              .snapshots(),
          builder:
              (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            if (snapshot.hasError) {
              return const CustomProgressIndicator();
            }
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CustomProgressIndicator();
            }

            final data = snapshot.data!.docs;
            allData = snapshot.data!.docs;

            if (data.isNotEmpty) {   //update based on data
              _isVisible = true;  
            } else {
              _isVisible = false;
            }

            return data.isNotEmpty
                ? _favItemListView(data)
                : const Center(
                    child: Text('No data found'),
                  );
          },
        ),
      ),
      bottomNavigationBar: _addAllToFavButton(size),
    );
  }

CustomButton:

Padding _addAllToFavButton(Size size) => Padding(
        padding: kSymmetricPaddingHor,
        child: Visibility(
          visible: _isVisible,
          child: CustomButton(
            label: 'Add all to my cart',
            onPressed: () {},
          ),
        ),
      );

i have tried with Visibility widget and its work but whenever i’m deleting all data CustomButton is still visible, to invisivle CustomButton every time need to do hot reload.

NOTE: setState is also not working its giving me error.

if any one can help me! Thanks.

Solution

If you want to hide your CustomButton when there is no data you can try this:

Put your _favItemListView(data) & _addAllToFavButton(size) inside Stack and give Positioned to your CustomButton with its bottom : 1 property.

StreamBuilder

return data.isNotEmpty
       ? Stack(
          children: [
           _favItemListView(data),
           _addAllToFavButton(size),
          ],
        )
        : const Center(
           child: Text('No data found'),
        );

CustomButton:

Positioned _addAllToFavButton(Size size) => Positioned(
        width: size.width,
        bottom: 1,                        //bottom property
        child: Padding(
          padding: kSymmetricPaddingHor,
          child: CustomButton(
            label: 'Add all to my cart',
            onPressed: () {}
            },
          ),
        ),
      );

Answered By – Encycode

Answer Checked By – Marie Seifert (FlutterFixes Admin)