Search code examples
iosandroid-studiodartflutteriphone-x

Container is not the same height on IOS and Android


My container is set to height (110) but in iOS (onlIphoneX) it gets the height with size similar to 90. How to fix it?

On Android and previous versions of Iphone, it's perfect.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:pequeno_form_flutter/ui/app/login/login_block.dart';

class NavigationDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
    Color color = Theme.of(context).primaryColor;
    // TODO: implement build
    return Drawer(
      child: ListView(
        // Important: Remove any padding from the ListView.
        padding: EdgeInsets.zero,
        children: <Widget>[
          Container(
            height: 90,
            child: DrawerHeader(
              padding: EdgeInsets.all(0.0),
              decoration: BoxDecoration(
                color: color,
              ),
              child: LoginView(),
            ),
          ),

        ],
      ),
    );
  }
}

Container with wrong height on IphoneX

Container with wrong height

Container with correct height on Iphone 8 plus and earlier. Container with correct height on Iphone 8 plus and earlier.


Solution

  • Wrap your ListView in SafeArea and you will see the container coming back to original height.

    SafeArea(child: ListView(...))