Flutter Firebase-从下拉菜单中显示数据库集合中的数据

时间:2020-03-23 13:49:20

标签: firebase flutter google-cloud-firestore

我正在创建一个网上商店,并将其数据添加到我的firebase数据库中,该数据库为shop-mens-bottoms / shoes / tops,并希望通过下拉菜单显示每种服装,因此用户可以在衣服之间进行过滤以及他们选择的衣服数据都会显示出来。

我当前的代码仅显示一个类别,并且想知道如何使用下拉菜单显示这些类别,我们将不胜感激!

class ListPage extends StatefulWidget {
  @override 
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {

  Future getTops() async {
      var firestone = Firestore.instance;

      QuerySnapshot tops = await firestone.collection("shop/mens/tops").getDocuments();

      return tops.documents;

    }

    Future getBottoms() async {
      var firestone = Firestore.instance;

      QuerySnapshot bottoms = await firestone.collection("shop/mens/bottoms").getDocuments();

      return bottoms.documents;

    }

    Future getShoes() async {
      var firestone = Firestore.instance;

      QuerySnapshot shoes = await firestone.collection("shop/mens/shoes").getDocuments();

      return shoes.documents;

    }

  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
          future: getBottoms(),
          builder: (_, snapshot) {
          if(snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: Text('..loading'),
              );
          } else {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (_, index) {
                return ListTile(
                  leading: Image.network( snapshot.data[index].data["image"],),
                  title: Text(snapshot.data[index].data["name"],
                        style: TextStyle(fontSize: 15), 
                        textAlign: TextAlign.left,),
                  subtitle: Text(snapshot.data[index].data["price"],
                        style: TextStyle(fontWeight: 
                        FontWeight.bold, fontSize: 15),),
                        );
              }
            );
          }
          }
      )
    );
  }
}

0 个答案:

没有答案