How to make a container width sync dynamically with its content? flutter

Muhammad Yafi A 0
Viewed 48

So i wanna achieve this design

i have tried to use Wrap but it doesn't show like this. anyone know how to make it look like this?

code

Wrap(
              children: [
                GridView(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 100,
                    mainAxisSpacing: 10,
                    mainAxisExtent: 40,
                    crossAxisSpacing: 8,
                  ),
                  children: [
                    ReviewWidget('Tempat tidak sesuai dengan foto'),
                    ReviewWidget('Tempat tidak ditemukan'),
                    ReviewWidget('Tailor tidak dapat ditemui'),
                    ReviewWidget('tidak sesuai dengan foto'),
                    ReviewWidget('tailor jele'),
                  ],
                ),
              ],
            ),

the result :

container is not sync with the content

containers flutter
1 Answers

the GridView force its children to be on a default aspect ratio so it's children take the same space on the screen

based on what I understood that you want the widgets to take space based on it's content, so there is no need for gridView here, just use Wrap and wrap your children widget with it :

Wrap(
          children: [
                ReviewWidget('Tempat tidak sesuai dengan foto'),
                ReviewWidget('Tempat tidak ditemukan'),
                ReviewWidget('Tailor tidak dapat ditemui'),
                ReviewWidget('tidak sesuai dengan foto'),
                ReviewWidget('tailor jele'),
          ],
        ),

and make sure that ReviewWidget isn't constrained with a hardcoded width and height, so it will take the size of the content widget

you can add also add padding to that widget if you need it, Ex:

Padding(padding: const EdgeInsets.all(10), child: ReviewWidget())

Hope this helps

Gwhyyy0
Related