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.

Answer 1

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