我想导航到另一个页面并使用 Firestore 数据进行解析，但是当我使用 MaterialPageRoute 时我该怎么做？

问题描述

我想从产品页面导航到产品详细信息页面，但我直接使用来自 firebase firestore 的数据。我在 MaterialPageRoute 中放什么作为参数？我还使用 StreamBuilder 从 firebase 获取数据快照。 下面是代码。这是产品页面。

class PopularRecipes extends StatefulWidget {
  const PopularRecipes({Key key}) : super(key: key);

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

class _PopularRecipesstate extends State<PopularRecipes> {
  final Stream _productStream =
      FirebaseFirestore.instance.collection('products').snapshots();
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.start,children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 10.0,horizontal: 20),child: CustomText(
            text: 'Popular Recipes',size: 20,),Container(
          height: 500,child: StreamBuilder(
              stream: _productStream,builder: (context,snapshot) {
                if (snapshot.data == null)
                  return Center(
                    child: CircularProgressIndicator(
                      backgroundColor: Colors.teal,);
                return ListView.builder(
                    itemCount: snapshot.data.docs.length,itemBuilder: (context,index) =>
                        _popularWidget(context,snapshot.data.docs[index]));
              }),],);
  }

  Widget _popularWidget(BuildContext context,DocumentSnapshot document) {
    return Stack(
      children: [
        Container(
          margin: EdgeInsets.fromLTRB(40,5,20,5),height: 160,width: double.infinity,decoration: Boxdecoration(
              color: Colors.white,borderRadius: BorderRadius.circular(20)),child: Padding(
            padding: const EdgeInsets.fromLTRB(100,10,20.0),child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.start,children: [
                    GestureDetector(
                      onTap: () => Navigator.push(context,MaterialPageRoute(builder: (_) => DetailsScreen())),child: Container(
                        width: 160,child: Text(
                          document['name'],style: TextStyle(
                              fontSize: 19.0,fontWeight: FontWeight.w600),overflow: TextOverflow.ellipsis,maxLines: 2,Column(
                      children: [
                        CustomText(
                          text: 'Ush.',size: 14,color: Colors.grey,CustomText(
                          text: document['price'],)
                  ],ratingBarIndicator(
                  rating: document['rating'].todouble(),index) => Icon(
                    Icons.star,color: Colors.Amber.shade200,itemCount: 5,itemSize: 15.0,unratedColor: Colors.grey.shade300,direction: Axis.horizontal,SizedBox(
                  height: 10,Container(
                  height: 40,child: ListView(
                    scrollDirection: Axis.horizontal,children: [
                      Row(
                        children: [
                          for (var tag in document['tags'])
                            Container(
                              decoration: Boxdecoration(
                                borderRadius: BorderRadius.circular(6),color: Colors.grey.shade200,margin: EdgeInsets.only(right: 4),child: Padding(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 8.0,vertical: 6),child: Text(
                                  tag.toString(),style: TextStyle(
                                    fontSize: 14,textAlign: TextAlign.center,)
                        ],Positioned(
          top: 10,left: 20,bottom: 10,child: GestureDetector(
            onTap: () => Navigator.push(
                context,child: ClipRRect(
              borderRadius: BorderRadius.circular(20),child: Image.network(
                document['image'],width: 110,fit: BoxFit.cover,)
      ],);
  }
}

这是我点击特定产品卡片时想要转到的 DetailsS​​creen 页面。

class DetailsScreen extends StatefulWidget {
  const DetailsScreen({Key key}) : super(key: key);

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

class _DetailsScreenState extends State<DetailsScreen> {
  @override
  Widget build(BuildContext context) {
    return Text(document['name']);
  }
}

在处理 firebase 数据时，如何使用 MaterialPageRoute 将数据从上一页传递到详细信息页面？谢谢。

解决方法

在您的 DetailsScreen 页面中添加产品变量

class DetailsScreen extends StatefulWidget {
  final DocumentSnapshot product;
  const DetailsScreen({Key key,@required this.product}) : super(key: key);

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

class _DetailsScreenState extends State<DetailsScreen> {
  @override
  Widget build(BuildContext context) {
    return Text(widget.product['name']);
  }
}

在 onTap 内：

GestureDetector(
  onTap: () => Navigator.push(context,MaterialPageRoute(builder: (_) => DetailsScreen(document))),//pass the product