CODEWITHSUNDEEP
androidfluttersafearea
Dhaval Bhagwat
Dhaval Bhagwat

Reputation: 13

Flutter Safe Area issue

I am developing an app where I need to use the safe area to avoid unnecessary swiping. Though I have implemented the safe area in a custom container to render the screens, it leaves a white margin on top.

When I add these parameters to the SafeArea() widget,

top: false,
maintainBottomViewPadding: true,

the white space goes away. However, the size of the app bar is too big. This is the minimal code

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class DashboardActivity extends StatefulWidget {
  @override
  _DashboardActivityState createState() => _DashboardActivityState();
}

class _DashboardActivityState extends State<DashboardActivity> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      //top: false,
      //maintainBottomViewPadding: true,
      child: Scaffold(
        
        backgroundColor: Colors.white,
        resizeToAvoidBottomInset: true,
        appBar: CupertinoNavigationBar(
          backgroundColor: Colors.grey,
          leading: InkWell(
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
            ),
            onTap: () => Navigator.pop(context),
          ),
          middle: Text(
            "Dashboard",
          ),
        ),
        body: Text(
          'This is an example use of SafeArea',
        ),
      ),
    );
  }
}

example image

This only happens on tall displays, i.e. something more than an 18:9 aspect ratio.

Can someone tell me what's wrong and how can I fix this?

Upvotes: 0

Views: 7892

Answers (1)

Narek Pogosyan
Narek Pogosyan

Reputation: 66

SafeArea is basically the same Padding widget. The difference is it adds padding to its child widget when it is necessary (For example, it will indent the child by enough to avoid the status bar at the top of the screen).

The reason why it is working on smaller screens is that SafeArea doesn't add any padding there (it is like to have something like this padding: EdgeInsets.symmetric(vertical: 0))

When you are wrapping your Scaffold inside SafeArea on taller screens it is calculating necessary padding value and adding it to Scaffold.

This is why you are getting this: enter image description here

The correct use case of SafeArea is to use it inside body:.

Flutter AppBar and CupertinoAppBar widgets is handling device screen types by themselves.

Upvotes: 2

Related Questions