Flutter Firebase / Firestore文档参考Future Builder List视图

时间:2018-12-09 02:42:57

标签: firebase flutter google-cloud-firestore

只是开始使用Firestore和Flutter,并尝试将我的文档项从Firestore放入ListView中并遇到错误。这是我的数据结构:

Firestore Data Structure

,这是我到目前为止的页面代码。

import 'package:flutter/material.dart';
import 'package:async/async.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter_firestore_test/ui/restaurantDetail.dart';

class RestaurantList extends StatefulWidget {

  final String title;
  final String director;
  RestaurantList({Key key,this.title, this.director}) : super(key: key);



  @override
  _RestaurantListState createState() => _RestaurantListState();
}

class _RestaurantListState extends State<RestaurantList> {

  Future getList() async{
    var firestore = Firestore.instance;

    DocumentReference docRef = firestore.collection('Restaurant').document('Test');
    var data;
    docRef.get().then((datasnapshot){
      if(datasnapshot.exists){
        data = datasnapshot.data['Locations'];
      }
    });
    return data;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${widget.title}'),
        centerTitle: true,
        backgroundColor: Colors.blueGrey,
      ),
      body: new Container(
        child: FutureBuilder(
            future: getList(),
            builder: (_, snapshot){
              if(snapshot.connectionState == ConnectionState.waiting){
                return CircularProgressIndicator();
//                return Center(
//                  child: Text("Loading..."),
//                );
              }else{
                return ListView.builder(
                    itemCount: snapshot.data.length,
                    itemBuilder: (_, index){
                      if(snapshot.data[index].data["title"]==true){
                        return ListTile(
                          title: new Center(child: Text(snapshot.data[index].data["name"],
                            style: TextStyle(fontSize: 25.0),),),
                        );
                      }else if(snapshot.data[index].data["title"]==false) {
                        return ListTile(
                          title: Text(snapshot.data[index].data["name"],
                          style: TextStyle(
                              fontWeight: FontWeight.w500,
                              color: Colors.black),
                          ),
                          subtitle: Text('Insert Type of food?',
                          style: TextStyle(
                            color: Colors.grey),
                          ),
                          onTap: (){
                            Navigator.push(
                                context,
                                MaterialPageRoute(builder: (context)=> RestaurantDetail())
                            );
                          },
                        );
                      }
                    });
            }}),
      ),
    );
  }
}

在我的数据文档中,出于外观原因,我在地图中有一个order字段和title字段。顺序是我希望数据按照的顺序,因为Firestore默认使用字母顺序。 Title bool是这样,因此List View Centers数据被视为列表中的标题,并使其无法点击。

我确实可以使用一个版本,在该版本中,我使每个列表项成为一个集合中的自己的文档,但是试图在单个文档中查看其限制。

1 个答案:

答案 0 :(得分:0)

firestore内置了排序功能,您可以使用方法orderBy(field)对数据进行排序。 有关更多详细信息,请参见https://firebase.google.com/docs/firestore/query-data/order-limit-data

您需要编辑此行

DocumentReference docRef = firestore.collection('Restaurant').document('Test');

DocumentReference docRef = firestore.collection('Restaurant').orderBy('order').document('Test');