Flutter Animated List: условно добавить элемент ListView - PullRequest
0 голосов
/ 10 июня 2019

У меня есть анимированный список в моем проекте флаттера.

Для каждого элемента в этом списке у меня есть сетка кнопок, которые динамически размещаются из потока Firestore. Иногда это возвращается с 10 пунктами в сетке, но иногда это возвращается с 0 пунктами.

Когда кнопка на сетке в элементе списка нажата, она начнет поиск в firestore и создаст новую сетку кнопок в следующем элементе списка ниже.

Проблема, с которой я столкнулся, заключается в том, что когда он возвращается с кнопками сетки 0, я не хочу, чтобы он создавал новый элемент списка (пустой элемент списка без кнопок сетки). Я попытался вернуть контейнер с размером 0 в качестве обходного пути, но анимированный список все еще дает ему некоторую высоту, чтобы вы могли видеть, что есть проблема. Я также понимаю, что это будет плохой практикой, так как в списке нет невидимых пустых элементов списка.

Я начинаю со списка продуктов в виде строк:

  List foodListGrids = ['breads','drinks']

У меня есть анимированный список:

AnimatedList(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  key: _FoodandDrinkKey,
  initialItemCount: foodListGrids.length,
  itemBuilder: (context, index, animation) {
        return SizeTransition(
                   sizeFactor: animation,
                   child: buildButtonGridItemsMenu(index),
             );
        },
   ),

Я установил размер AnimatedList равным длине списка продуктов.

Я установил дочерний элемент Анимированного списка в класс, который ищет базу данных огней и возвращает карточку с сеткой кнопок на ней следующим образом:

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<Widget> widgetList = [];
            List<DocumentSnapshot> documentList = snapshot.data.documents;
            if (documentList.length > 0) {
              for (int i = 0; i < 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');
          }
        },
      ),

затем в методе on on для каждой кнопки сетки я добавляю новый элемент списка, например:

void _insertCategoryGridItem(String id, int index) {
  if (!foodListGrids.contains(id)) {
    foodListGrids.add(id);
    _FoodandDrinkKey.currentState.insertItem(index + 1);
  }
}

Проблема с курицей или яйцом, которую я попытаюсь показать ниже:

  1. Элемент списка генерируется из индекса 0 в списке продуктов, и все данные потока получены из результатов списка 0 продуктов из базы данных.
  2. При нажатии для элемента сетки в первой строке списка нажимается для добавления новой строки списка с новым набором элементов сетки. Это тогда обновит массив списка продуктов и вызов для списка, чтобы добавить новую строку кнопок сетки. Проблема заключается в том, что это находится в сжатой сетке для первых строк, поэтому нет сведений о том, что будет возвращено для следующей строки, поэтому нет способа узнать, будет ли она возвращать сетку размером 0 в следующей строке списка в текущий способ настройки.

Я попытался вернуть ноль, контейнер 0 ширины и высоты, но мне не повезло. Я не уверен, что я могу сделать, чтобы это исправить.

Спасибо за вашу помощь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...