Flutter - сбор Firebase в отдельный массив с помощью FutureBuilder - PullRequest
Новая
       4

Flutter - сбор Firebase в отдельный массив с помощью FutureBuilder

0 голосов
/ 29 мая 2020

У меня есть коллекция базы данных firestore со следующим примером: 

    ID: 1, Name: Name1, Description: Desc1, Location: USA;
    ID: 2, Name: Name2, Description: Desc2, Location: Mexico;
    ID: 3, Name: Name3, Description: Desc3, Location: USA;
    ID: 4, Name: Name4, Description: Desc4, Location: USA;
    ID: 5, Name: Name5, Description: Desc5, Location: Mexico;
    ID: 6, Name: Name6, Description: Desc6, Location: Canada;
    ID: 7, Name: Name7, Description: Desc7, Location: Mexico;

Код флаттера для отображения списка, а затем страницы сведений выглядит следующим образом: 

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: ListPage(),
    );
  }
}

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

class _ListPageState extends State<ListPage> {
  Future _data;
  Future getDB() async {
    var firestore = Firestore.instance;
    QuerySnapshot qn = await firestore.collection('myColl').getDocuments();
    return qn.documents;
  }

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

  @override
  void initState() {
    super.initState();
    _data = getDB();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
          future: _data,
          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['Location']),
                      onTap: () => navigateToDetail(snapshot.data[index]),
                    );
                  });
            }
          }),
    );
  }
}

class DetailPage extends StatefulWidget {
  final DocumentSnapshot post;
  DetailPage({this.post});
  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.post.data[' Name'] ?? 'Default Name'),
      ),
      body: Container(
        child: Card(
            child: ListTile(
          title: Text(widget.post.data[' Name'] ?? 'Default Name'),
          subtitle: Text(widget.post.data['Description'] ?? 'Default Desd'),
        )),
      ),
    );
  }
}

Я использование FutureBuilder для создания списков. Что отлично работает. Я хотел изменить это, чтобы иметь в приведенном выше примере БД Списки в соответствии с местоположениями.

  1. Экран с местоположениями () в качестве первого экрана без дубликатов onTap () Переходит к
  2. Экран с Идентификаторы и onTap () Переход к экрану
  3. с деталями.

Я застрял в том, как мне управлять Future после того, как он сделает запрос, возврат представляет собой список массив. Лучше всего перебрать каждый (snapshot.item.length) и создать отдельный список?

...