CODEWITHSUNDEEP
flutterdartlayout
Sandeep Sharma
Sandeep Sharma

Reputation: 705

GridView is not working inside SingleChildScrollView

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.

Upvotes: 0

Views: 4770

Answers (4)

Gurvann Brenne
Gurvann Brenne

Reputation: 21

just found out a fabulous way to do it without a parent SizedBox or any parent wrapper:

This is probably due to updates who were not available 2 years ago

GridView.count(
  crossAxisCount: 2,
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  children: const [
    ColoredBox(color: Colors.red),
    ColoredBox(color: Colors.red),
    ColoredBox(color: Colors.red),
    ColoredBox(color: Colors.red),
    ColoredBox(color: Colors.red),
    ColoredBox(color: Colors.red),
    ColoredBox(color: Colors.red),
    ColoredBox(color: Colors.red),
  ],
)

Hope this help. Have a nice day cause i'm having one

Upvotes: 2

User Rebo
User Rebo

Reputation: 4580

I would propose to use the shrinkWrap option if using a ListView or GridView inside a SingleChildScrollView. The NeverScrollableScrollPhysics lets pass the scroll events to the SingleChildScrollView.

GridView.extent(
  physics: const NeverScrollableScrollPhysics(),
  maxCrossAxisExtent: 150,
  shrinkWrap: true,
  children: [...]
),

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63569

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

Upvotes: 4

jojo
jojo

Reputation: 21

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

Upvotes: 0

Related Questions