Showing one card in flutter when no other cards are displaying

Question

I have a group of cards that are connected to my cloud firestore which shows when the icon related to each card is chosen. However, I want a card that tells the user to choose an icon when none of the other cards are showing. This is my code:

class Tips extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: StreamBuilder(
            stream:
                FirebaseFirestore.instance.collection('moodIcons').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) return Text('Loading data... Please Wait');

              var currentCards = 0;

              return Container(
                  child: new ListView(
                    children: snapshot.data.documents.map<Widget>((DocumentSnapshot document) {
                      if (document.data()['display'] == true) {
                          //code to display each card when specific icon is chosen
                      } else {
                        if (currentCards < 1) {
                          currentCards++;
                          return new Card(
                              child: new Column(
                                children: <Widget>[
                                  new Container(
                                    width: 400.0,
                                    height: 45.0,
                                    child: new Text(
                                      "Choose an icon to show a tip!",
                                  ),
                                ],
                              ));

Currently, the card shows all the time but I want it to disappear when an icon is clicked. When an icon is clicked, the value of display becomes true. I tried to use a counter so that if the value of display is true then it adds one to the counter then if the counter is more than 0, the card in the else statement wont show. However, this didn't work as I couldn't return the value of the counter from within the if statement. Any help would be appreciated!

Answer 1

If you want this to be done by StatelessWidget you need some state management like Bloc or Riverpod, your own etc. a good answer here You need to abstract your stream and create an event/action when you click on the icon. That event is to be handlined via the above mentioned approaches. where a new card will be pushed to the stream.

Or you can make your widget Stateful, create a list of Card Widgets (to provide to your list builder) and use setState to add a element to a Card to the list.

Answer 2

You could conditionally add an item at the beginning of your ListView if no document is set to display: true:

class Tips extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('moodIcons').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) return Text('Loading data... Please Wait');
          return Container(
            child: new ListView(children: [
              if (!snapshot.data.documents
                  .any((doc) => doc.data()['display'] == true))
                Card(child: Text("Choose an icon to show a tip!")),
              ...snapshot.data.documents
                  .where((doc) => doc.data()['display'] == true)
                  .map((doc) => MyWidget(doc))
                  .toList(),
            ]),
          );
        },
      ),
    );
  }
}