GridView is not working inside SingleChildScrollView-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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),
              ),
            ),
          ],
        ),
      ),
    ),
  ],
),