What widget should I use?-CodePudding

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

CodePudding user response：

You may use GridView.builder

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

and in gridview build use column

CodePudding user response：

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
}