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),
],
),
),
Author by
Roman Traversine
Updated on December 10, 2022Comments
-
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 about 5 yearsthank you so much for your answer. its work for me. very helpful answer. god bless you thanks :)
-
Roman Traversine about 5 yearsand this answer work for me too. how can I dont think like that. hehe once again thank you so much. god bless you ::)