Search code examples
androidiosflutterappbar

Flutter AppBar has extra space above

First, have a look at the image of the app bar with the extra space above the Title (just ignore the text red color). AppBar

Secondly following is my code:

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,
            ),
          ],
        ),

Now comes the real problem that as you can see I have commented out the FlexibleSpace code as this code works but the close button "X" in the FlexibleSpace doesn't work in iOS but it works fine in Android. So help me in removing this extra space above the title.

Thanks

Solution

  • Wrap your scaffold with SafeArea.

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