Flutter Firestore > Streambuilder > ListView to detailspage onTap

Question

我正在更改我的应用程序获取数据的方式。我以前使用json文件，但现在改为Firestore。我已经成功地用Streambuilder>ListView.builder，但我不知道如何将数据获取到详细页面。我在互联网上似乎找不到任何解决方案。没有人在博客或教程中提到细节页面。。。

流生成器>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]),
);
}),
);
}

_buildListItemHeraklion历史站点：

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) {
...
}

检查如何将数据发送到新屏幕