Добавить пространство между видом сетки и верхней панелью

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 body из Scaffold. Во-вторых, заверните те же Center в SafeArea. https://api.flutter.dev/flutter/widgets/SafeArea-class.html

SafeArea - это виджет-флаттер, который интеллектуально добавляет отступы вокруг Android / iOS навигационных и статусных интерфейсов.