title: Flutter Animated List: Conditionally add ListView item
body: <p>I am have an animated list in my flutter project. </p>
  
  <p>For every element in that list I have a grid of buttons that are placed dynamically  from a Firestore stream. Sometimes that will come back with 10 items in the grid but other times that will comeback with 0 items. </p>
  
  <p>When a button on the grid in a list element is pushed it will search firestore and create a new grid of buttons in the next list element below. </p>
  
  <p>The problem that I have is when it comes back with 0 grid buttons I don't want it to create a new list element (an empty list element with no grid buttons). I tried returning a container with 0 size as a work around but animated list still gives it some height so you can see there is a problem. I also understand that this would be bad practice as you have non visible empty list elements in the list.</p>
  
  <p>I start with a list of foods as strings:</p>
  
  <pre><code>  List foodListGrids = ['breads','drinks']
  </code></pre>
  
  <p>I then have an animated list:</p>
  
  <pre><code>AnimatedList(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    key: _FoodandDrinkKey,
    initialItemCount: foodListGrids.length,
    itemBuilder: (context, index, animation) {
          return SizeTransition(
                     sizeFactor: animation,
                     child: buildButtonGridItemsMenu(index),
               );
          },
     ),
  </code></pre>
  
  <p>I set the AnimatedList size to the length of the foods list. </p>
  
  <p>I set the child of the Animated List to a class that searches firebase and returns a card with the grid of buttons on it like this:</p>
  
  <pre><code>StreamBuilder(
          stream: Firestore.instance
              .collection(widget.categoryType)
              .where(widget.relationship, isEqualTo: widget.searchString)
              .snapshots(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (!snapshot.hasData) {
              return Container(width: 0, height: 0,);
            } else if (snapshot.hasData) {
              List&lt;Widget&gt; widgetList = [];
              List&lt;DocumentSnapshot&gt; documentList = snapshot.data.documents;
              if (documentList.length &gt; 0) {
                for (int i = 0; i &lt; documentList.length; i++) {
                  widgetList.add(ButtonTheme(
                    minWidth: 16,
                    height: 30,
                    child: GridButton(snapshot, i, widget.listIndex),
                  ));
                }
                return Container(
                    width: double.infinity,
                    child: Wrap(
                      children: widgetList,
                      alignment: WrapAlignment.center,
                    ));
              } else{
                return Text('NO DATA BECAUSE NUMBER OF GRID ITEMS IS 0');
              }
            } else {
              return Text('NO DATA BECAUSE GRID ITEMS CALL IS NULL');
            }
          },
        ),
  </code></pre>
  
  <p>then in the on pressed method for each grid button I add a new list element like this:</p>
  
  <pre><code>void _insertCategoryGridItem(String id, int index) {
    if (!foodListGrids.contains(id)) {
      foodListGrids.add(id);
      _FoodandDrinkKey.currentState.insertItem(index + 1);
    }
  }
  </code></pre>
  
  <p>The problem is a chicken or the egg problem I will try to show below:</p>
  
  <ol>
  <li>List item is generated from the index 0 in the food list and all stream data is if from food list index 0  firebase results. </li>
  <li>On pressed for a grid item in the first list row is pressed to add a new list row with a new set of grid items. This will then update the food list array and the call for the list to add new row of grid buttons. The issue is because this is in the onpressed for the first rows grid there is no knowledge of what will be returned for the next row so there is no way of knowing if it will return a grid of size 0 in the next list row in the current way it is setup.</li>
  </ol>
  
  <p>I have tried returning null, container of 0 width and height but have had no luck. I am not sure what I can do to fix it.</p>
  
  <p>Thanks for your help</p>