I have got a gridview which contains thumbnails for videos. Now this list of thumbnails is generated from a stream. What I need is, when user taps on any of the image the particular video should get opened in a pageview. I have already achieved this but then the video opened in the pageview does not listen to any changes.
I am not sure if I can use the same stream in the gridview as well as in the pageview.
Here's some of my code :
StreamBuilder(
stream: Firestore.instance
.collection("videos")
.where("userKey", isEqualTo: userKey)
.where("isActive", isEqualTo: true)
.snapshots(),
builder:
(context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasData) {
videos = snapshot.data.documents
.map((doc) =>
Video.fromMap(doc.data, doc.documentID))
.toList();
return videos != null && videos.length > 0
? Stack(
children: <Widget>[
GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio:
MediaQuery.of(context)
.size
.width /
(MediaQuery.of(context)
.size
.height /
1.4),
crossAxisCount: 3),
itemCount: videos.length,
// padding: EdgeInsets.all(8.0),
itemBuilder:
(BuildContext context, int index) {
return Padding(
padding:
const EdgeInsets.all(1.0),
child: GestureDetector(
onLongPress: () {
Get.defaultDialog(
title: "Delete Video ?",
onConfirm: () async {
await DeleteVideo(
videos[index].id);
Get.back();
},
textConfirm: "Yes",
textCancel: "No",
confirmTextColor:
Colors.white,
cancelTextColor:
Colors.black,
buttonColor: Colors.red
.withOpacity(0.7),
backgroundColor:
Colors.white,
middleText:
"Do you want to delete this video ?");
},
onTap: () {
_pageController =
PageController(
initialPage: index);
currentlyPlayingVideoKey =
videos[index].id;
Get.dialog(
setupAlertDialoadContainer());
// opens a complete new window for each video
//Get.to(ProfileSingleVideo(
//videoKey:
//videos[index].id,
//goBackForMusic: true));
},
Widget setupAlertDialoadContainer(String page) {
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
),
context: context,
isScrollControlled: true,
builder: (context) => Container(
child: new PageView.builder(
controller: _pageController,
itemCount: videos.length,
scrollDirection: Axis.vertical,
pageSnapping: true,
reverse: false,
onPageChanged: (page) {
setState(() {
currentlyPlayingVideoKey = videos[page].id;
});
},
itemBuilder: (context, position) {
return pageViewContent(video: videos[position]);
}),
));
}
}
Again, I am able to open the videos in the pageview and jump to the video that I want to on tap. But, the video does not listen to the changes that i make when video gets opened in the pageview. E.g. liking that video does not increement its counter although liking does work in other screens where pageview is placed directly inside of the Streambuilder. I dont want to place pageview inside the streambuider in this case though.
Screenshot below to imagine it better.
