Flutter Firestore > Streambuilder > ListView to detailpage onTap

Question

我正在改变我的应用程序获取数据的方式。我以前使用 json 文件来做，但我现在改用 Firestore。我已经成功地使用 Streambuilder > ListView.builder 构建了一个列表，但我无法弄清楚如何将数据获取到详细信息页面。我似乎无法在互联网上找到任何解决方案。没有人在博客或教程中提到详细信息页面...

Streambuilder > ListView.Builder > 列表项目 > 单击项目 > 具有相同数据的详细信息页面。

这是我目前所知道的...

@override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return new Scaffold(
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('Crete').
        where('prefecture', isEqualTo: 'Heraklion',).
        where('type', isEqualTo: 'historical site',).snapshots(),
        builder: (context, snapshot) {
        if (!snapshot.hasData) return const Center(child: CircularProgressIndicator(),);
        return ListView.builder(
          itemCount: snapshot.data.docs.length,
          itemBuilder: (context, index) =>
              _buildListItemHeraklionHistoricalSites(context, snapshot.data.docs[index]),
        );
      }),
    );
  }

_buildListItemHeraklionHistoricalSites:

Widget _buildListItemHeraklionHistoricalSites(BuildContext context, DocumentSnapshot document){
  return InkWell(
    onTap: () => DetailsPageHistory(),
    child: Container(
      width: SizeConfig.blockSizeHorizontal*90,
      height: SizeConfig.blockSizeVertical*20,
      margin: EdgeInsets.only(bottom: 15, left: 20, right: 20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        image: DecorationImage(image: CachedNetworkImageProvider(document['image']),
        fit: BoxFit.cover,),
      ),
      child: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.2),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        ],
      )
    ),
  );
}

Answer 1

您可以通过构造函数将数据传递给DetailsPageHistory()。

改变这个：

    onTap: () => DetailsPageHistory(),

对此：

    onTap: () => Navigator.push(
                   context,
                   MaterialPageRoute(builder: (context) => DetailsPageHistory(document: document)),
                 ),

在您的 DetailsPageHistory 小部件中，您可以像这样定义参数：

    class DetailsPageHistory extends StatelessWidget {
      final DocumentSnapshot document;
    
      const DetailsPageHistory({Key key, @required this.document,}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        ...
      }

查看如何 send data to a new screen

Flutter Firestore > Streambuilder > ListView to detailpage onTap

Flutter Firestore > Streambuilder > ListView to detailpage onTap

firebase

flutter

google-cloud-firestore

stream-builder