Set Chip in gridview.Count()

Question

I want to adjust my chip in gridview.count() but couldn't adjust. Here is the actual Screen I want

enter image description here

But I can't figure out how can I adjust it look like in this image.

my output till now

enter image description here

Edit: Now My output looks like this after using your code

Final Output

Padding(
                          padding:
                              const EdgeInsets.symmetric(horizontal: 10.0),
                          child: Transform(
                            transform: Matrix4.identity()..scale(0.7),
                            child: InkWell(
                              onTap: () {
                                Get.to(const DetailScreen());
                              },
                              child: GridView.builder(
                                shrinkWrap: true,
                                itemCount: 4,
                                gridDelegate:
                                    const SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisCount: 2,
                                  mainAxisSpacing: 10,
                                  crossAxisSpacing: 10,
                                  mainAxisExtent: 93,
                                ),
                                itemBuilder: (context, index) => Neumorphic(
                                  style: NeumorphicStyle(
                                      boxShape:
                                          NeumorphicBoxShape.roundRect(
                                              BorderRadius.circular(30.0)),
                                      color: Colors.transparent,
                                      depth: 10,
                                      intensity: 1.0),
                                  child: Chip(
                                    avatar: Neumorphic(
                                        style: NeumorphicStyle(
                                            depth: -4,
                                            boxShape: NeumorphicBoxShape
                                                .roundRect(
                                              BorderRadius.circular(17.0),
                                            ),
                                            color: Colors.grey[200],
                                            intensity: 1.0),
                                        child: CircleAvatar(
                                          backgroundColor: Colors.grey[200],
                                        )),
                                    backgroundColor: Colors.grey[200],
                                    label: const ListTile(
                                      title: Text(
                                        'Lorem Ipsum dolor sit',
                                        style: TextStyle(
                                            fontSize: 18,
                                            fontWeight: FontWeight.w500),
                                      ),
                                      subtitle: Text('Dolor sit'),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),

Answer 1

Try to Wrap your Neumorphic Widget inside GridView.builder

Your Widget:

Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
          shrinkWrap: true,
          itemCount: 4,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            mainAxisExtent: 93,
          ),
          itemBuilder: (context, index) => Neumorphic(
            style: NeumorphicStyle(
                boxShape: NeumorphicBoxShape.roundRect(
                  BorderRadius.circular(30.0),
                ),
                color: Colors.transparent,
                depth: 10,
                intensity: 1.0),
            child: Chip(
              avatar: Neumorphic(
                  style: NeumorphicStyle(
                      depth: -4,
                      boxShape: NeumorphicBoxShape.roundRect(
                        BorderRadius.circular(17.0),
                      ),
                      color: Colors.grey[200],
                      intensity: 1.0),
                  child: CircleAvatar(
                    backgroundColor: Colors.cyan[200],
                  )),
              backgroundColor: Colors.grey[200],
              label: const ListTile(
                title: Text(
                  'Lorem Ipsum dolor sit',
                  maxLines: 2,
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w500,
                   overflow: TextOverflow.ellipsis,
                  ),
                ),
                subtitle: Text('Dolor sit'),
              ),
            ),
          ),
        ),
      ),

Your Result screen->

After update result screen->