Flutter 渲染列表来自 firebase 基于下拉菜单中的条件

Question

I'm trying to figure out how to render a list from a specific collection in firebase and to change that list when selecting options from dropdown menu. I could get the list rendered on 1 collection, but when I add my dropdown menu, with the default value being 'lost', nothing is displayed. Here's what I have so far that works, but not entirely what I want.

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]),
              );
          });

        }
      }),]
    );
  }
}

Thanks in advance for any help. Please let me know if there's any more code you'd like to see. I this I have to wrap part of it with setState(), but I'm not quite sure where.

Answer 1

Thanks for the fast clarification.

What is happening here is that you have put a ListView inside a ListView . You should use a Column .

By default (as mentioned in the documentation ):

The Column widget does not scroll (and in general it is considered an error to have more children in a Column than will fit in the available room). If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.

In your case, you want to place a ListView that will overflow the Column that can't scroll. To avoid that, consider using an Expanded to take the remaining space so that the height is somehow constrained and the ListView knows its limits and work properly.

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]),
                    );
                  },
                );
              }
            },
          ),
        ),
      ],
    );
  }
}