CODEWITHSUNDEEP
dartflutter
Kristofer
Kristofer

Reputation: 817

Adding Gridview into columns makes the page empty. Flutter

I'm trying to add a gridview that has 2 columns and 3 rows. My problem is that when I try to add it to my Row it makes the whole page disappear. Here is my code

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        elevation: 0.5,
        title: Text("Home", style: TextStyle(fontSize: 15, color: Colors.black45)),
        centerTitle: true,
        backgroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            new Container(
              margin: const EdgeInsets.all(25),
              child: Text("Shop Category", style: new TextStyle(fontSize: 18, color: Colors.black, fontFamily: 'Raleway'),textAlign: TextAlign.left,),
            ),
            new GridView.count(
              primary: true,
              crossAxisCount: 2,
              children: <Widget>[
                new Image.asset('assets/images/meat.jpg')
              ],
            )
          ],
        )
      ),
    );
  }

Upvotes: 6

Views: 7867

Answers (2)

Jitesh Mohite
Jitesh Mohite

Reputation: 34210

Column and GridView both take the full screen as it is the default behavior of both widgets, so we have to shrink GridView to the minimum size, that should be occupied in the screen.

GridView.count(
              primary: true,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 2,
              children: <Widget>[
                new Image.asset('assets/images/meat.jpg')
              ],
            )

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

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

Upvotes: 4

diegoveloper
diegoveloper

Reputation: 103421

Just add the shrinkWrap property to your GridView 

new GridView.count(
        shrinkWrap: true,

Upvotes: 22

Related Questions