将Snapshot数据传输到另一个小部件

Question

我正在从Firebase按照下面的方式构建GridView。您将注意到，当单击其中一张卡片时，我将路由到DetailScreen() Stateless Widget。

这一切都工作良好的静态图像，但我想显示相同的URL成功加载是项目['拇指']从快照在Image.network中的DetailScreen。

body: StreamBuilder<QuerySnapshot>(
stream:
FirebaseFirestore.instance.collection('collection').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return GridView.builder(
itemCount: snapshot.data.docs.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: count),
itemBuilder: (BuildContext context, int index) {
var item = snapshot.data.docs[index];
return Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (_) {
return DetailScreen();
}));
},
child: Image.network(
item['thumb'],
fit: BoxFit.cover,
),
),
);
},
);
} else
return Text("No Data");
}));
}
}
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Center(
child: Hero(
tag: 'imageHero',
child: Image.network(
'Image From Firebase To Be Entered Here',
),
),
),
onTap: () {
Navigator.pop(context);
},
),
);
}
}

我不确定如何将快照数据传输到新的小部件中?

Answer 1

将DetailScreen更改为

class DetailScreen extends StatelessWidget {
String image;
DetailScreen ({@required this.image});
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Center(
child: Hero(
tag: 'imageHero',
child: Image.network(
image,
),
),
),
onTap: () {
Navigator.pop(context);
},
),
);
}
}

现在在你的卡片上这样做

Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (_) {
return DetailScreen(image: item['thumb']);
}));
},
child: Image.network(
item['thumb'],
fit: BoxFit.cover,
),
),
)

注意:不确定我们是否可以在路由中推送一个无状态小部件，但这就是我们实现这一点的方法。如果我们不能推送无状态小部件作为路由，你需要实现DetailScreen，如

class DetailScreen extends StatefulWidget {
String image;
DetailScreen({@required this.image});
@override
_DetailScreenState createState() => _DetailScreenState();
}
class _DetailScreenState extends State<DetailScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Center(
child: Hero(
tag: 'imageHero',
child: Image.network(
widget.image,
),
),
),
onTap: () {
Navigator.pop(context);
},
),
);
}
}

其余部分不变。