What widget should I use?

Question

This is what I am doing now. Main Page:

I would like to make it same like this picture.Example:

I have tried couple ways and widget to build it but couldn't figure it out. Also, I want to retrieve the data from the Firebase and show them as the content.

Code 1: https://pastebin.com/A0nK1riQ

Code 2: https://pastebin.com/i1T7gBNy

    Widget build(BuildContext context) {
    return Container(
      child: StreamBuilder(
          stream: _products.snapshots(),
          builder: (context, AsyncSnapshot<QuerySnapshot> streamSnapshot) {
            if (streamSnapshot.hasData) {
              return ListView.builder(
                  itemCount: streamSnapshot.data!.docs.length,
                  itemBuilder: (context, index) {
                    final DocumentSnapshot documentSnapshot =
                        streamSnapshot.data!.docs[index];
                    return Container(
                      margin: const EdgeInsets.all(10),
                      child: ListTile(
                        title: Text(documentSnapshot['name']),
                        subtitle: Text(documentSnapshot['price'].toString()),
                        trailing: SizedBox(
                          width: 100,
                        ),
                      ),
                    );
                  });
            }
            return SizedBox.shrink();
          }),
    );
  }

Now i can retrieve the data from Firebase, however, I cannot show these data in the widget like card or container. — MrDoufy, Sep 29 '22 at 10:04
You can use [`NavigationRail`](https://stackoverflow.com/a/62254850/7666442) — AskNilesh, Sep 29 '22 at 10:04
ya, the side tab is using the navigationrail. But I want to show the content of each tab. — MrDoufy, Sep 29 '22 at 10:05

score 0 · Answer 1 · answered Sep 29 '22 at 10:16

0

You may use GridView.builder

https://api.flutter.dev/flutter/widgets/GridView-class.html

and in gridview build use column

answered Sep 29 '22 at 10:16

Abdulkadir Güllüoğlu

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 04 '22 at 12:47

score 0 · Answer 2 · answered Sep 29 '22 at 10:24

According to me, first you have to check which NavigationRail icon clicked then put the condition on it's GestureDetector like

// global variable
 String itemClickedValue = "";

then set the value in it according to user click

itemClickedValue = "first";

then check the condition while fetching data like

if(itemClickedValue.compareTo("first") == 0){
// pass that documentId or api and then show in list
}

What widget should I use?

2 Answers2