Add a Padding inside Children<Widget> in Flutter

1,563

Solution 1

for the space to each other in gridview set the mainAxisSpacing & crossAxisSpacing properties of gridview ,

GridView.count(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          crossAxisCount: 6,
          mainAxisSpacing: 8.0,
          crossAxisSpacing: 8.0,
          children: <Widget>[
            Image.asset('images/user.png', width: 30.0),
            Image.asset('images/user.png', width: 30.0),
            Image.asset('images/user.png', width: 30.0),
            Image.asset('images/user.png', width: 30.0),
            Image.asset('images/user.png', width: 30.0),
            Image.asset('images/user.png', width: 30.0),
            Image.asset('images/user.png', width: 30.0),
            Image.asset('images/user.png', width: 30.0),
            Image.asset('images/user.png', width: 30.0),
            Image.asset('images/user.png', width: 30.0),
            Image.asset('images/user.png', width: 30.0),
          ],
        ),

Solution 2

You can add SizedBox between children.

SizedBox(
  width: 200.0,
  height: 300.0,
)

Your code can be edited into

Container(
    margin: new EdgeInsets.all(2.0),
    color: Colors.red,
    padding: EdgeInsets.all(10.0),
    child: GridView.count(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      crossAxisCount: 6,
      children: <Widget>[
        Image.asset('images/user.png', width: 30.0),
        SizedBox(width: 10,height: 10,),
        Image.asset('images/user.png', width: 30.0),
        SizedBox(width: 10,height: 10,),
        Image.asset('images/user.png', width: 30.0),
        SizedBox(width: 10,height: 10,),
        Image.asset('images/user.png', width: 30.0),
        SizedBox(width: 10,height: 10,),
        Image.asset('images/user.png', width: 30.0),
        SizedBox(width: 10,height: 10,),
        Image.asset('images/user.png', width: 30.0),
        SizedBox(width: 10,height: 10,),
        Image.asset('images/user.png', width: 30.0),
        SizedBox(width: 10,height: 10,),
        Image.asset('images/user.png', width: 30.0),
        SizedBox(width: 10,height: 10,),
        Image.asset('images/user.png', width: 30.0),
        SizedBox(width: 10,height: 10,),
        Image.asset('images/user.png', width: 30.0),
        SizedBox(width: 10,height: 10,),
        Image.asset('images/user.png', width: 30.0),
      ],
    ),
  ),
Share:
1,563
Roman Traversine
Author by

Roman Traversine

Updated on December 10, 2022

Comments

  • Roman Traversine
    Roman Traversine over 1 year

    I've a gridview that contains some images.

    but you know, it's so close each other and I want give them a space one of other.

    but I still cant make them .

    I've try to make some experiments. but it still give me nothing. the problem is the padding is inside the gridview. if i put them (all items) in 1 container, 1 container, 1 container etc, there are a lot of container inside the gridview.

    `Container(
                margin: new EdgeInsets.all(2.0),
                color: Colors.red,
                padding: EdgeInsets.all(10.0),
                child: GridView.count(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  crossAxisCount: 6,
                  children: <Widget>[
                    Image.asset('images/user.png', width: 30.0),
                    Image.asset('images/user.png', width: 30.0),
                    Image.asset('images/user.png', width: 30.0),
                    Image.asset('images/user.png', width: 30.0),
                    Image.asset('images/user.png', width: 30.0),
                    Image.asset('images/user.png', width: 30.0),
                    Image.asset('images/user.png', width: 30.0),
                    Image.asset('images/user.png', width: 30.0),
                    Image.asset('images/user.png', width: 30.0),
                    Image.asset('images/user.png', width: 30.0),
                    Image.asset('images/user.png', width: 30.0),
                  ],
                ),
              ),
    

    here the preview: https://imgur.com/ot3phXV`

  • Roman Traversine
    Roman Traversine about 5 years
    thank you so much for your answer. its work for me. very helpful answer. god bless you thanks :)
  • Roman Traversine
    Roman Traversine about 5 years
    and this answer work for me too. how can I dont think like that. hehe once again thank you so much. god bless you ::)