i want to create a listview with firebase in flutter that will show title subtitle and image and when user click on listview that will open a webview - firebase

Question

I sm creating a flutter app where i want to create a listview with firebase in flutter that will show title subtitle and image and when user click on listview that will open a webview but I want the web view URL should come from the firebase title subtitle and the image part already working I stuck in the URL part please help how to do this
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:watched_movie_list/Widget/webviewx.dart';
class ListviewPage extends StatefulWidget {
final firBaseLists;
final String webviewTitle;
final String weburl;
ListviewPage(
{this.firBaseLists, required this.webviewTitle, required this.weburl});
#override
_ListviewPageState createState() => _ListviewPageState();
}
class _ListviewPageState extends State<ListviewPage> {
#override
Widget build(BuildContext context) {
return StreamBuilder(
stream: FirebaseFirestore.instance.collection('listview').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Center(
child: CupertinoActivityIndicator(
radius: 20,
),
);
}
return Scaffold(
appBar: AppBar(
title: Text(
' नवीनतम सूचनाएं',
style: TextStyle(color: Colors.black),
),
leading: BackButton(color: Colors.black),
backgroundColor: Colors.white,
),
body: Container(
height: 800,
color: Color(0xfff5f5f5),
child: ListView(
children: snapshot.data!.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data =
document.data()! as Map<String, dynamic>;
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => InAppWebViewx(
title: widget
.firBaseLists["${data['titletext']}"],
url: widget.firBaseLists("${data['url']}"),
)));
},
child: Container(
height: 150,
decoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.circular(18)),
margin:
EdgeInsets.only(top: 8, right: 12, left: 12, bottom: 2),
child: Row(
children: [
Container(
padding: const EdgeInsets.only(top: 15, left: 20),
height: 150,
width: 330,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.network(
"${data['img']}",
height: 40,
width: 40,
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(
"${data['titletext']}",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(
"${data['subtitle']}",
maxLines: 2,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
),
),
],
),
),
);
}).toList(),
),
),
);
},
);
}
}```

Answer 1

You should use Listview.builder instead of Listview. Inside the Listview.builder you could capture the data with index of the itemBuilder and pass it to the WebView. Here's the link to get started on Listview.builder https://www.geeksforgeeks.org/listview-builder-in-flutter/