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

score 1 · Answer 1 · answered Nov 07 '21 at 04:22

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.

i had to change this tho width: MediaQuery.of(context).size.width * 4.0, — nonso edu, Nov 07 '21 at 09:17
Alright, I'm glad it helped you. You can mark this as the right answer. — Benedict, Nov 07 '21 at 09:23
@nonsoedu You do have enough reputation to accept answers. Click the "check mark" on the left side of this answer, below the score. — WSBT, Nov 08 '21 at 04:22
This solves half the problem, How can I limit the list to only have two rows. As seen in the questions design here : https://i.stack.imgur.com/mZlyN.jpg — Yonko Kilasi, Oct 04 '22 at 12:20

score 1 · Answer 2 · answered Jul 12 '22 at 11:29

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).

GridView.count adapt with child size

2 Answers2