Flutter Gridview in Column. What's solution..?

Question

I have a problem with gridview and column. In this case, i want put an image in upper of gridview. Please give me a solution..

return new Container(
  child: new Column(
    children: <Widget>[
      new Container(
        child: new Image.asset(
          "assets/promo.png",
          fit: BoxFit.cover,
        ),
      ),
      new Container(
        child: new GridView.count(
          crossAxisCount: 2,
          childAspectRatio: (itemWidth / itemHeight),
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: new List<Widget>.generate(16, (index) {
            return new GridTile(
                header: new Container(
                  padding: const EdgeInsets.all(10.0),
                  alignment: Alignment.centerRight,
                  child: new Icon(
                    Icons.shopping_cart,
                    size: 20.0,
                    color: Colors.red,
                  ),
                ),
                child: new MyList(
                  nomor: '$index',
                ));
          }),
        ),
      ),
    ],
  ),
);

and this is the result: Flutter Gridview in Column

Jared Burrows · Accepted Answer · 2019-04-09 03:37:36Z

156

You just need to put your grid view into Expanded widget, for example:

body: new Column(
  children: <Widget>[
    new Expanded(
      child: GridView.count(
        // Create a grid with 2 columns. If you change the scrollDirection to
        // horizontal, this would produce 2 rows.
        crossAxisCount: 2,
        // Generate 100 Widgets that display their index in the List
        children: List.generate(10, (index) {
          return _buildCard(index);
        }),
      ),
    ),
    new Text("text")
  ],
),

edited Apr 9, 2019 at 3:37

Jared Burrows

55.9k26 gold badges160 silver badges190 bronze badges

answered Jul 4, 2018 at 6:33

Ruslan Leshchenko

4,3034 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pineapple Express Over a year ago

This only works when the GridView is the first item of Column. To make the GridView fit into any where in the column, remove the Expanded wrapper and add shrinkWrap: true property in Gridview.count

CopsOnRoad · Accepted Answer · 2019-10-24 11:57:55Z

139

Reason for the error:

Column expands to the maximum size in main axis direction (vertical axis), and so does the GridView (scroll direction is vertical by default)

Solution

You need to constrain the height of the GridView, so that it expands to fill the remaining space inside Column, there are several ways of solving this issue, use whichever suits you better.

If you want to allow GridView to take up all remaining space inside Column use Flexible.

Column(
  children: <Widget>[
    Flexible(
      child: GridView(...),
    )
  ],
)

If you want to limit your GridView to certain height, you can use SizedBox.

Column(
  children: <Widget>[
    SizedBox(
      height: 200, // constrain height
      child: GridView(...),
    )
  ],
)

If your GridView is small, you may try shrinkWrap property on it.

Column(
  children: <Widget>[
    GridView(
      shrinkWrap: true, // use it
    )
  ],
)

answered Oct 24, 2019 at 11:57

CopsOnRoad

271k97 gold badges702 silver badges471 bronze badges

7 Comments

MisterJimson Over a year ago

Great answer. Covers more cases than the currently accepted one.

Muhammad Usman Over a year ago

I have put Gridview inside Expanded widget but it is still not working!!

CopsOnRoad Over a year ago

@VinothVino That's not possible as of today, you need to use third party library, like staggered_grid_view.

http8086 Over a year ago

upvote, The reason understanding the problem is much more important than just final solution

Martin Braun Over a year ago

I also want to mention that I think the answer could be improved, as it doesn't explain the difference between using a Flexible and shrinkWrap: true. I would love if it would be edited to include some more information in regards of this.

|

Jitesh Mohite · Accepted Answer · 2020-07-24 20:16:15Z

If Column is the parent of GridView then it will give rendering issue as It happens because Column and GridView both take the entire space of the screen individually which is there default behavior(Default axis of scrolling is Vertical).

Solution:

To solve the above problem we have to disable scrolling of GridView, This can be possible by shrinkWrap and physics property

shrinkWrap:true - With this GridView only occupies the space it needs

physics: NeverScrollableScrollPhysics() - It disables scrolling functionality of GridView, which means now we have only SingleChildScrollView who provide the scrolling functionality.

Code:

SingleChildScrollView
   Column
        GridView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                //...
                )

BraveEvidence · Accepted Answer · 2019-01-11 05:59:35Z

18

The answer mentioned by @RuslanLeshchenko is correct but if it is still not working for you, trying the following properties on GridView

Try changing shrinkwrap to true
Apply physics: BouncingScrollPhysics()

answered Jan 11, 2019 at 5:59

BraveEvidence

6516 gold badges64 silver badges148 bronze badges

1 Comment

YSR fan Over a year ago

Worked for me. I set this property to my GridView. I have Column and first two children are two image and 3rd one is GridView with 10 items. So the complete Column height is more than the Device height. When we scroll the grid i could not see all items. Thanks,

Dharman · Accepted Answer · 2025-04-14 12:34:37Z

10

You can solve it by these two properties and change them as follows :

shrinkWrap: true,
primary: false,

shrinkWrap will wrap your and will handle overflow.
Through primary we can set either you want to make this list scrollable or it's parent list. By setting it to false it allows to take scroll of parent list or scrollable view.

NOTE : You can also wrap your column with SingleChildScrollView to have scroll in your view.

edited Apr 14 at 12:34

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jan 11, 2023 at 9:27

Pranav Dave

86911 silver badges16 bronze badges

Comments

Arul · Accepted Answer · 2021-06-12 18:13:11Z

2

Just wrap with scaffold and scrollview

Scaffold(
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    child: Column(
            children: [ 
          ...

Tested working on dialog model aswell.

answered Jun 12, 2021 at 18:13

Arul

1,21716 silver badges26 bronze badges

Comments

Colibri · Accepted Answer · 2022-01-26 08:16:17Z

0

I had the same problem and couldn't fix. Then again I used a GridView.builder().

I changed it to GridView.count and added shrinkWrap: true and physics: NeverScrollableScrollPhysics() as mentioned in the other comments.

It works fine now. Thanks!

answered Jan 26, 2022 at 8:16

Colibri

74312 silver badges16 bronze badges

Comments

Aditya Pal · Accepted Answer · 2020-07-26 14:44:09Z

-2

Try changing childAspectRatio property of GridView to 0.8 or lower.

answered Jul 26, 2020 at 14:44

Aditya Pal

9

Comments

gerl · Accepted Answer · 2021-07-24 16:53:24Z

-2

body:Container(
   body: Container(
          child: Column(
            children: [
              Text('Exemple'),
              Expanded(
                child: GridView.count(
                    children: <Widget>[
                          //Widgets
                    ]
               )
             )
           ]
         )
       )

edited Jul 24, 2021 at 16:53

gerl

1,1912 gold badges17 silver badges54 bronze badges

answered Jul 23, 2021 at 14:06

user16263838

1

Comments

hsul4n · Accepted Answer · 2021-10-07 11:37:26Z

Just wrap GridView inside ListView

Column(
    children: <Widget>[
        ListView(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            children: [
                GridView(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                ),
            ],
        ),
)

Also it works with SingleChildScrollView

SingleChildScrollView(
    child: Column(
        children: <Widget>[
            ListView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                children: [
                    GridView(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                    ),
                ],
            ),
    )
)

Works like a charm (:

Collectives™ on Stack Overflow

Flutter Gridview in Column. What's solution..?

10 Answers 10

1 Comment

7 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

1 Comment

7 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related