Question 313180 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – GridView.builder inside scrollBottomSheet

I was creating bottomScrollSheet with some buttons in it. When i added GridVieb.builder to add list of widgets terminal returned an error:

Vertical viewport was given unbounded height.

and

RenderBox was not laid out: RenderViewport#82680 NEEDS-LAYOUT
NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
‘package:flutter/src/rendering/box.dart’: Failed assertion: line 1972
pos 12: ‘hasSize’

I added shrinkWrap but it didn’t help.

Code:

GestureDetector(
          onTap: () {
            showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return SizedBox(
                    child: Column(
                      children: [
                        Row(
                          children: [
                            IconButton(
                              onPressed: () {},
                              icon: Image.asset('assets/icons/x.png'),
                            ),
                            const SizedBox(width: 100),
                            const Text(
                              'Categories',
                              style: AppTextStyles.style16w600,
                            ),
                          ],
                        ),
                        GridView.builder(
                            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1),
                            shrinkWrap: true,
                            itemBuilder: (context, index) {
                              // return CategoryWidget();
                              return Container(
                                height: 100,
                                child: Text('hoi'),
                              );
                            })
                      ],
                    ),
                  );
                });
          },
Tags:

2

Answers


  1. 0

    Try to add mainAxisSize: MainAxisSize.min to your column like this:

    Column(
    mainAxisSize: MainAxsisSize.min,
    children: [
        ...
    ]
)

    Although your GridView sets shrinkWrap: true, your Column tries to take infinite amount of hight space. This does not work in a ScrollView (BottomScrollSheet). MainAxsisSize.min just takes the space it needs

    Login or Signup to reply.
  2. 0

    Your code is almost correct, the few things you need to do left is to wrap the top column with a SingleChildScrollView and set a fixed height for the GridView.builder.

    I made a few tweaks from the snippet you provided. You can modify it accordingly.

    showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              IconButton(
                onPressed: () {},
                icon: Container(),
              ),
              const SizedBox(width: 100),
              const Text(
                'Categories',
              ),
            ],
          ),
          Container(
            decoration: BoxDecoration(
              border: Border.all(width: 2, color: Colors.red)
            ),
            height: 300,
            child: GridView.builder(
              itemCount: 10,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return Container(
                  height: 100,
                  child: Text('hoi'),
                );
              }),
          )
        ],
      ),
    );
  }
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search