GridView.count adapt with child size

Question

I am trying to create this design

but here is what I've done so far

I am using a gridview.count, my question is how can I stop my child container from inheriting from the parent gridView Container height, or any workaround to this will be helpfull to

here are the important code:

  Container(
            height: height(context) * 0.2,
            child: GridView.count(
              scrollDirection: Axis.horizontal,
              crossAxisCount: 2,
              children: [
                RoudedCategories("Busines"),
                RoudedCategories("social"),
                RoudedCategories("incubation"),
                RoudedCategories("incubation"),
                RoudedCategories("incubation"),
                RoudedCategories("incubation"),
                RoudedCategories("fire"),
                RoudedCategories("Stupid"),
                RoudedCategories("Stupid"),
                RoudedCategories("Stupid"),
                RoudedCategories("Stupid"),
                RoudedCategories("Stupid"),
              ],
            ),
          ),

The RoudedCategories code

class RoudedCategories extends StatelessWidget {
  const RoudedCategories(this.text, {Key? key}) : super(key: key);

  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      margin: EdgeInsets.only(right: 10, bottom: 10),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.grey,
          ),
          borderRadius: BorderRadius.circular(15)),
      child: Text(
        text,
        style: textTheme(context).bodyText2,
      ),
    );
  }
}

Answer 1

The easiest way is to use SingleChildScrollView with Wrap. Keep it flexible by using Wrap inside SingleChildScrollView without the use of wrap. If you do so, you will lose flexibility and will have to guess/compute the right size for the amount of RoudedCategories. Just use wrap directly or with another widget (container without sizes, etc) accordingly to your needs.

Padding(
    padding: const EdgeInsets.all(10.0),
    child: SingleChildScrollView(
      scrollDirection: Axis.vertical,
      controller: ScrollController(),
      child: Wrap(
          direction: Axis.horizontal,
          spacing: 5.0,
          runSpacing: 5.0,
          runAlignment: WrapAlignment.spaceEvenly,
          children: [
                  for (Category category in yourCategoryList)
                    RoudedCategories(context, category.name) //or send the full category object
                ],
        ),
     ),
  ),

Note how the categories and being put in the UI. Is not a good pratice to hardcode your RoudedCategories one-by-one. Simply create them automatically and on demand with for inside childreen[] (since dart version 2.3). This will make your code neater, easier and ready to scable, even to implement API calls from a server (wich in real life is how this would be used).

Answer 2

I think you are using the wrong widget for this. Check this out:

      Padding(
        padding: const EdgeInsets.all(10.0),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          controller: ScrollController(),
          child: SizedBox(
            width: MediaQuery.of(context).size.width * 1.5,
            child: Wrap(
              direction: Axis.horizontal,
              spacing: 5.0,
              runSpacing: 5.0,
              runAlignment: WrapAlignment.spaceEvenly,
              children: const [
                RoudedCategories('Text Sample'),
                RoudedCategories('Text Sam'),
                RoudedCategories('Text Sample 3'),
                RoudedCategories('Text 2'),
                RoudedCategories('Another Text Sample'),
                RoudedCategories('Text Sample Al'),
                RoudedCategories('Small Text Sample'),
                RoudedCategories('Text Sle'),
                RoudedCategories('Text Sample'),
                RoudedCategories('Text 5'),
                RoudedCategories('Text Sample'),
                RoudedCategories('Text Example'),
                RoudedCategories('Text Sample'),
                RoudedCategories('Text Sam'),
                RoudedCategories('Text Sample 3'),
                RoudedCategories('Text 2'),
                RoudedCategories('Another Text Sample'),
                RoudedCategories('Text Sample Al'),
                RoudedCategories('Small Text Sample'),
                RoudedCategories('Text Sle'),
              ],
            ),
          ),
        ),
      ),

Using the Wrap widget you can flow all children in a specific direction, maintaining their sizes and taking the available spacing horizontally and vertically.