在网格视图和顶部栏之间添加空格

Question

我想在顶部栏和网格视图之间添加空间。您可以查看图像。图像

Material myItems(IconData icon, String heading, int color) {
return Material(
color: Colors.white,
elevation: 14.0,
shadowColor: Color(0x802196F3),
borderRadius: BorderRadius.circular(24.0),
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[

Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
heading,
style: TextStyle(
color: new Color(color),
fontSize: 20.0,
),
),
),
Material(
color:  new Color(color),
borderRadius: BorderRadius.circular(24.0),
child: Padding(padding: const EdgeInsets.all(16.0),
child: Icon(
icon,
color: Colors.white,
size: 30.0,),
),
),
],
),
],
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("files/bg.jpg"),
fit: BoxFit.cover,
),
),
child: StaggeredGridView.count(
crossAxisCount: 2,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
children: <Widget>[
myItems(Icons.graphic_eq, "Example1", 0xffed622b),
myItems(Icons.bookmark, "Example2", 0xffed622b),
myItems(Icons.settings, "Example3", 0xffed622b),
myItems(Icons.add, "Example4", 0xffed622b),
],
staggeredTiles: [
StaggeredTile.extent(1, 130.0),
StaggeredTile.extent(1, 130.0),
StaggeredTile.extent(1, 130.0),
StaggeredTile.extent(1, 130.0),
],
),
),
);

在此处输入图像描述

Answer 1

有两件事，将顶级Center封装在Scaffold中。使Center成为Scaffold的body。其次，将相同的Center封装在SafeArea中。https://api.flutter.dev/flutter/widgets/SafeArea-class.html

SafeArea是一个颤振小部件，它巧妙地在Android/iOS导航和状态UI周围添加填充。