Список рендеринга флаттера из базы данных на основе условий в выпадающем меню

Question

Я пытаюсь выяснить, как отобразить список из определенной коллекции в firebase и изменить этот список при выборе параметров в раскрывающемся меню. Я мог бы получить список на 1 коллекции, но когда я добавляю свое выпадающее меню со значением по умолчанию «потерянным», ничего не отображается. Вот то, что у меня пока работает, но не совсем то, что я хочу.

class _ListPageState extends State<ListPage>{
  List<String> _type = ['lost', 'found'];
  String _selectedView = 'lost';

//this getData pulls from 'lost' collection, since I set _selectedView to lost by default
  Future getData() async{
    var firestore = Firestore.instance;
    QuerySnapshot qn = await firestore.collection(_selectedView).getDocuments();
    return qn.documents;
  }

  navigateToDetail(DocumentSnapshot post){
    Navigator.push(context, MaterialPageRoute(builder: (context) => DetailPage(post: post,)));
  }
  Widget _viewType() {

    return new DropdownButtonFormField(
      value: _selectedView,
      onChanged: (newValue) {
        setState(() {
          _selectedView = newValue;
        });
      },
      items: _type.map((view) {
        return new DropdownMenuItem(
          child: new Text(view),
          value: view,
        );
      }).toList(),
    );
  }
  @override
  Widget build(BuildContext context){
    return ListView(
      children: <Widget>[
        _viewType(),
        FutureBuilder(//it's not rendering any of this when adding the dropdown above it
          future: getData(),
          builder: (_, snapshot){
        if(snapshot.connectionState == ConnectionState.waiting){
          return Center(
            child: Text("Loading"),
          );
        }
        else{
          return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (_, index){
              return ListTile(
                title: Text(snapshot.data[index].data["Title"]),
                onTap: () => navigateToDetail(snapshot.data[index]),
              );
          });

        }
      }),]
    );
  }
}

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

Answer 1

Спасибо за быстрое прояснение.

То, что здесь происходит, это то, что вы поместили ListView внутрь ListView. Вы должны использовать Column.

По умолчанию (как указано в документации ):

Виджет Столбец не прокручивается (и в целом онсчитается ошибкой иметь больше детей в столбце, чем поместится в доступной комнате). Если у вас есть строка виджетов, и вы хотите, чтобы они могли прокручиваться, если места недостаточно, рассмотрите возможность использования ListView.

В вашем случае вы хотите разместить ListView, который будет переполненColumn, который не может прокручиваться. Чтобы избежать этого, рассмотрите возможность использования Expanded, чтобы занять оставшееся пространство, чтобы высота каким-то образом была ограничена, а ListView знал свои пределы и работал правильно.

class _ListPageState extends State<ListPage> {
  List<String> _type = ['lost', 'found'];
  String _selectedView = 'lost';

//this getData pulls from 'lost' collection, since I set _selectedView to lost by default
  Future getData() async {
    var firestore = Firestore.instance;
    QuerySnapshot qn = await firestore.collection(_selectedView).getDocuments();
    return qn.documents;
  }

  navigateToDetail(DocumentSnapshot post) {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => DetailPage(
                  post: post,
                )));
  }

  Widget _viewType() {
    return new DropdownButtonFormField(
      value: _selectedView,
      onChanged: (newValue) {
        setState(() {
          _selectedView = newValue;
        });
      },
      items: _type.map((view) {
        return new DropdownMenuItem(
          child: new Text(view),
          value: view,
        );
      }).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _viewType(),
        Expanded(
          child: FutureBuilder(
            //it's not rendering any of this when adding the dropdown above it
            future: getData(),
            builder: (_, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Center(
                  child: Text("Loading"),
                );
              } else {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (_, index) {
                    return ListTile(
                      title: Text(snapshot.data[index].data["Title"]),
                      onTap: () => navigateToDetail(snapshot.data[index]),
                    );
                  },
                );
              }
            },
          ),
        ),
      ],
    );
  }
}