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

Question

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

Answer 1

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,required this.docId}) : super(key: key);
  final Map<String,dynamic> details; // <== this field holds the details.
  final String docId;
  final String subCollection = ''; // <== specify name of your sub collection

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: FirebaseFirestore.instance
            .document(docId)
            .collection(subCollection)
            .get(),
        builder: (context, snapshot){
          if (snapshot.connectionState == ConnectionState.done) {
            // If we got an error
            if (snapshot.hasError) {
              return Center(
                child: Text(
                  '${snapshot.error} occurred',
                  style: TextStyle(fontSize: 18),
                ),
              );

              // if we got our data
            } else if (snapshot.hasData) {
              // Extracting data from snapshot object
              final Map<String,dynamic>? data = snapshot.data as Map<String,dynamic>;
              //return your widget for details page here.
              return Container();
            }
          }

          // Displaying LoadingSpinner to indicate waiting state
          return Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  }
}

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,
      docId: snapshots.data!.docs[index].id,
    )))}
    },
    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),
    ),
    );