Flutter AppBar 上面有额外的 space

Question

首先，看一下应用栏的图像，标题上方有额外的 space（忽略文本红色）。

其次是我的代码：

caffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          elevation: 0,
          titleSpacing: 10,
          centerTitle: false,

          title: Text(
            'Profile',
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w600,
                backgroundColor: Colors.red),
          ),

          // toolbarHeight: 10,

          backgroundColor: Colors.amberAccent,
          // flexibleSpace: Align(
          //   alignment: Alignment.centerLeft,
          //   child: Container(
          //       width: double.infinity,
          //       margin: EdgeInsets.only(left: 20),
          //       child: Row(
          //         mainAxisAlignment: MainAxisAlignment.spaceBetween,
          //         children: [
          //           Text(
          //             'Profile',
          //             style: TextStyle(
          //                 fontSize: 20, fontWeight: FontWeight.w600),
          //           ),
          //           Align(
          //             alignment: Alignment.centerRight,
          //             child: Visibility(
          //               child: Container(
          //                 height: 100,
          //                 margin: EdgeInsets.only(right: 5, top: 0.0),
          //                 padding: EdgeInsets.only(top: 0.0),
          //                 child: IconButton(
          //                     icon: Icon(
          //                       Icons.close,
          //                       color:
          //                           isDark ? Colors.white : Colors.black87,
          //                       size: 25,
          //                     ),
          //                     onPressed: () {
          //                       setState(() {
          //                         editCheck = false;
          //                         showClose = false;
          //                       });
          //                     }),
          //               ),
          //               visible: showClose,
          //             ),
          //           ),
          //         ],
          //       )),
          // ),

          actions: [
            Visibility(
              child: Container(
                height: 100,
                margin: EdgeInsets.only(right: 5, top: 0.0),
                padding: EdgeInsets.only(top: 0.0),
                child: IconButton(
                    icon: Icon(
                      Icons.close,
                      color: isDark ? Colors.white : Colors.black87,
                      size: 25,
                    ),
                    onPressed: () {
                      setState(() {
                        editCheck = false;
                        showClose = false;
                      });
                    }),
              ),
              visible: showClose,
            ),
          ],
        ),

现在真正的问题来了，如您所见，我已经注释掉了 FlexibleSpace 代码，因为此代码有效，但 FlexibleSpace 中的关闭按钮“X”在 iOS 中不起作用，但它工作正常在 Android。所以请帮我删除标题上方多余的 space。

谢谢

Answer 1

用 SafeArea 包裹你的 scaffold。

 @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body:

Flutter AppBar 上面有额外的 space

Flutter AppBar has extra space above

android

appbar

ios

flutter