GridView is not working inside SingleChildScrollView

Question

I have a Column and inside that Column, I have SingleChildScrollView and inside it I have another Column. This is not working:

  Column(
      children: <Widget>[
        SliderWidget(SliderList, "text", "text"),
        const SizedBox(height: 20),
        SingleChildScrollView(
          child: Column(
            children: [
              text("Some text"),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(24.0),
                  child:
                      GridListing(FavouriteList, false),
                ),
              ),
            ],
          ),
        ),
      ],
    ),

Please suggest me alternate.

score 3 · Accepted Answer · answered Aug 05 '22 at 16:31

SingleChildScrollView and Expanded both are trying to get infinite height. Providing height on GridView will solve the issue.

To understand the overflow, we need to check how SingleChildScrollView is getting size and setting on children. In order to get available space, we need wrap SingleChildScrollView with Expanded widget.

Now we can wrap GridView with SizedBox(height:x

return Scaffold(
  body: LayoutBuilder(
    builder: (context, constraints) => Column(
      children: <Widget>[
        // SliderWidget(SliderList, "text", "text"),
        const SizedBox(height: 20),
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Text("Some text"),
                SizedBox(
                  height: constraints.maxHeight * .6,
                  child: GridView.count(
                    crossAxisCount: 2,
                    crossAxisSpacing: 4,
                    mainAxisSpacing: 4,
                    children: List.generate(
                      222,
                      (index) => Container(
                        color: Colors.red,
                        width: 200,
                        height: 200,
                        child: Text(" $index"),
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 500,
                  color: Colors.pink,
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
);

A better way of doing it will be using CustomScrollView

score 0 · Answer 2 · answered Aug 05 '22 at 14:04

If you use the IntrinsicHeight widget around the inner column flutter can display your widget tree.

Column(
  children: <Widget>[
    SliderWidget(SliderList, "text", "text"),
    const SizedBox(height: 20),
    SingleChildScrollView(
      child: IntrinsicHeight( // added widget
        child: Column(
          children: [
            text("Some text"),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(24.0),
                child:
                    GridListing(FavouriteList, false),
              ),
            ),
          ],
        ),
      ),
    ),
  ],
),

It's not working. Same – Sandeep Sharma Aug 05 '22 at 14:06 — Sandeep Sharma, Aug 05 '22 at 14:06

GridView is not working inside SingleChildScrollView

2 Answers2