Displaying the data from the firebase in list that if I pressed on one of its item it takes me to a-CodePudding

I'm using flutter web in my graduation project and saving my data in the firebase so I'm displaying my data by the following code

StreamBuilder<QuerySnapshot> (
    stream: FirebaseFirestore.instance.collection('Guests').snapshots(),
    builder: (context, snapshots) {
      return (snapshots.connectionState == ConnectionState.waiting)
          ? Center(
        child: CircularProgressIndicator(),)
          : ListView.builder(
          itemCount: snapshots.data!.docs.length,
          itemBuilder: (context, index){
            var data = snapshots.data!.docs[index].data() as Map<String,dynamic>;

            return ListTile(
              title: Text(
                data['Drug Name'],
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                    color: Colors.black54,
                    fontSize: 20,
                    fontWeight: FontWeight.bold),
              ),
              subtitle: Text(
                data['Drug Serial Number'],
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                    color: Colors.black54,
                    fontSize: 16,
                    fontWeight: FontWeight.bold),
              ),
            );

and the output that the List of the items So i want when press on one of them the app takes me to another page which display the whole data of that item (its filed and sub-collection and their fields).

if anyone know how to do that I'll be thankful

I'm trying to find a piece of code which do what I'm asking for

CodePudding user response：

Create a new page in which you wish to display the details. Let's call it DetailsPage as:

class DetailsPage extends StatelessWidget {
  const DetailsPage({Key? key,required this.details}) : super(key: key);
  final Map<String,dynamic> details; // <== this field holds the details.

  @override
  Widget build(BuildContext context) {
    //return the widget for the details page.
    return Container();
  }
}

and add a method to navigate to this page on clicking a particular list item in your previous page. ListTile provides a method called onTap which can be used as:

StreamBuilder<QuerySnapshot> (
        stream: FirebaseFirestore.instance.collection('Guests').snapshots(),
    builder: (context, snapshots) {
    return (snapshots.connectionState == ConnectionState.waiting)
    ? Center(
    child: CircularProgressIndicator(),)
        : ListView.builder(
    itemCount: snapshots.data!.docs.length,
    itemBuilder: (context, index){
    var data = snapshots.data!.docs[index].data() as Map<String,dynamic>;

    return ListTile(
    onTap: (){
    Navigator.of(context).push(MaterialPageRoute(builder: (context)=> DetailsPage(
      details: data,
    )))}
    },
    title: Text(
    data['Drug Name'],
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(
    color: Colors.black54,
    fontSize: 20,
    fontWeight: FontWeight.bold),
    ),
    subtitle: Text(
    data['Drug Serial Number'],
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(
    color: Colors.black54,
    fontSize: 16,
    fontWeight: FontWeight.bold),
    ),
    );

CodePudding user response：

You can move the page that shows the whole data using ListTile.onTap() and Navigator API.

And in the detailed page, You can fetch the sub-collection using DocumentReference.collection(String collectionPath) in cloud_firebase package and files (if stored in firebase storage) using Reference.getData() in firebase_storage package

For not fetching the same data, you can try Proxy pattern. try reading this. It may suit your case.