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

Kindly share the reproducible code that you've tried so far. Otherwise, how will people help you? — its-me-mahmud, Dec 31 '22 at 08:48
It sounds like you want to get a document based on what the user selected. If that is the case, you need to have an identifier available on the users selected element then use that as the reference for your `.get()` — Ronnie Royston, Dec 31 '22 at 16:13

Subash · Accepted Answer · 2023-01-01T12:10:59.983

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),
    ),
    );

It helps me a lot thanks. could you please help me to display the data of the sub-collections also — Mariam Ashraf Abdel Rahman Ahm, Jan 01 '23 at 09:44
I have updated my answer to fetch sub collection in details page, I haven't run the code, so you might encounter some issues though. — Subash, Jan 01 '23 at 12:12

score 0 · Answer 2 · answered Dec 31 '22 at 15:57

0

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.

answered Dec 31 '22 at 15:57

200_OK

1
1

could you please write its code because I couldn't apply it – Mariam Ashraf Abdel Rahman Ahm Jan 01 '23 at 10:12

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

2 Answers2