将数据传递到详细信息页面抖动

时间:2020-09-22 03:08:22

标签: firebase flutter

你好,我是新手,我想知道 当用户单击电影从Firebase到moviedetail()时,如何传递电影详细信息数据? 我希望当用户单击电影时,确切的电影信息将显示在moviedetail()页面中 我尝试使用Future Builder,但仍然无法将数据传递给moviedetails()

这是我的代码

import 'package:cinema_project/screens/moviedetail.dart';
import 'package:cinema_project/shared/loading.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class ShowingPage extends StatefulWidget {



  final String id;
  ShowingPage(this.id);



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

class _ShowingPageState extends State<ShowingPage> {


  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
          stream: Firestore.instance.collection("nowshowing").snapshots(),
          builder: (context , snapshot ){
                         if(snapshot.data == null) return Loading();
             return GridView.builder(
          padding: const EdgeInsets.all(4.0),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 20/30,
          mainAxisSpacing: 30.0,
          crossAxisSpacing: 10.0
        ),
        itemCount: snapshot.data.documents.length , itemBuilder: (context,index){ 
            DocumentSnapshot showing = snapshot.data.documents[index]; 
        return GestureDetector(
          onTap: (){
            Navigator.push(context, MaterialPageRoute(
              builder: (_){
                return MovieDetail();
              }));
          },
                  child: Padding(
                        padding: const EdgeInsets.symmetric(),
                            child: GestureDetector(
                              child: Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(25.0),
                                image: DecorationImage(
                                fit: BoxFit.fill,
                                image: NetworkImage(showing['img'])),
                                boxShadow:[ 
                                  BoxShadow(
                                    offset: Offset(0, 4),
                                    blurRadius: 4,
                                    color: Colors.black26,
                                  )
                                ]
                              ),
                              ),
                            ),
                        
                      ),
        );
  }
); });}} 

2 个答案:

答案 0 :(得分:0)

构造函数中的简单传递数据。

您可以在这里

显示页面类

onTap: (){
            Navigator.push(context, MaterialPageRoute(
              builder: (_){
                return MovieDetail(
                 movieData : snapshot.data.documents[index];
            }));},

MovieDetail页面上 在构造函数中定义您的变量,只需使用如widget.movi​​eData ['movieName']

dynamic moviedata;
MovieDetail({Key key,this.moviedata}) : super(key: key);

答案 1 :(得分:0)

Navigator.push(context, MaterialPageRoute(
              builder: (_){
                return MovieDetail(
                 movieData : snapshot.data.documents[index];
            }));

//MovieDetail Page
//Create a constructor and retrieve the value.
var movieData;
MovieDetail(this.movieData)

您可以在Constructor的帮助下传递数据,但不是首选方法,因为当您的应用程序运行整个窗口小部件树时,将对其进行重新构建,并且在仅更改一个窗口小部件时不需要重新构建整个窗口小部件。

因此,您可以使用Constructor而不是Provider来抖动https://flutter.dev/docs/development/data-and-backend/state-mgmt/options