CODEWITHSUNDEEP
androidflutterflutter-layout
Varsha Soni
Varsha Soni

Reputation: 21

How to design screen like this in flutter

Category screen create in flutter for mobile platform

enter image description here

Upvotes: 0

Views: 149

Answers (1)

Nabin Dhakal
Nabin Dhakal

Reputation: 2182

Try as follows:

enter image description here

Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Flexible(
                  child: SizedBox(
                      width: 150,
                      child: ListView.builder(
                          shrinkWrap: true,
                          itemCount: 10,
                          itemBuilder: (ctx, i) {
                            return Container(
                                height: 50,
                                width: 50,
                                decoration: BoxDecoration(
                                  color: Colors.grey,
                                  border: Border.all(),
                                ),
                                child: Column(children: [
                                  const Icon(Icons.person),
                                  Text("Cat" + i.toString())
                                ]));
                          }))),
              Flexible(
                  child: Container(
                      child: SingleChildScrollView(
                          child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                    GridView.builder(
                      itemCount: 50,
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 3,
                              crossAxisSpacing: 4.0,
                              childAspectRatio: 3 / 2,
                              mainAxisSpacing: 4.0),
                      itemBuilder: (BuildContext context, int index) {
                        return Column(children: [
                          const CircleAvatar(
                              radius: 24, // Image radius
                              backgroundImage: NetworkImage(
                                'https://opengraph.githubassets.com/2ddb0ff05ef9ccfce35abb56e30d9c5068e01d1d10995484cfd07becee9accf7/dartpad/dartpad.github.io',
                              )),
                          Text("Title" + index.toString())
                        ]);
                      },
                    ),
                  ]))))
            ])

Upvotes: 1

Related Questions