Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding Gridview into columns makes the page empty. Flutter

Tags:

flutter

dart

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')
              ],
            )
          ],
        )
      ),
    );
  }
like image 558
Kristofer Avatar asked Dec 04 '18 01:12

Kristofer


People also ask

How do I stop GridView scrolling in Flutter?

You can provide physics: NeverScrollableScrollPhysics() on GridView to disable scroll effect. If you want scrollable as secondary widget use primary: false, To have Full Page scrollable, you can use body:SingleChildScrollView(..) or better using body:CustomScrollView(..) Save this answer.

How do you use columns and rows together in Flutter?

To create a row or column in Flutter, you add a list of children widgets to a Row or Column widget. In turn, each child can itself be a row or column, and so on. The following example shows how it is possible to nest rows or columns inside of rows or columns. The left column's widget tree nests rows and columns.

How do you get rid of extra space in container in Flutter?

Set it like this => padding: EdgeInsets. zero. This will eliminate all the unwanted spaces around your gridview. Actually, this is the correct answer among all the other answers.


1 Answers

Just add the shrinkWrap property to your GridView

new GridView.count(
        shrinkWrap: true,
like image 90
diegoveloper Avatar answered Sep 30 '22 03:09

diegoveloper