-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
iPhone X: Additional bottom padding for BottomNavigationBar #12099
Comments
This should be based on the MediaQuery.of().padding, same as appbar. |
Ran into the same problem. Still haven't found a way to detect the |
You may be able to work around this by wrapping the BottomNavigationBar in a SafeArea widget, I'm not sure where we've gotten as far as implementing that for iPhone X. @cbracken may know. |
I've got a patch to fix up the bottom bar and an engine patch to add support to expose the safe area insets. To land those, we need to get our build infra/bots upgraded to Xcode 9. I've filed the appropriate tickets to get it installed and will land the update work once they've completed it. |
I am doing as follows: final bool iphonex = MediaQuery.of(context).size.height >= 812.0;
final double bottomPadding = iphonex ? 16.0 : 0.0;
// add the padding to arround CupertinoTabBar |
If you're also targeting android you may also wish to key it on the platform. |
Here is my current workaround: Codeimport 'dart:io';
import 'package:flutter/widgets.dart';
import 'package:meta/meta.dart';
// workaround for iPhone X which draws navigation in the bottom of the screen.
// Wait until https://github.com/flutter/flutter/issues/12099 is fixed
class IPhoneXPadding extends Container {
final Widget child;
IPhoneXPadding({
@required this.child,
});
@override
Widget build(BuildContext context) {
var mediaQueryData = MediaQuery.of(context);
if (!_isIPhoneX(mediaQueryData)) {
// fallback for all non iPhone X
return child;
}
var homeIndicatorHeight =
// TODO verify exact values
mediaQueryData.orientation == Orientation.portrait ? 22.0 : 20.0;
var outer = mediaQueryData.padding;
var bottom = outer.bottom + homeIndicatorHeight;
return new MediaQuery(data: new MediaQueryData(
padding: new EdgeInsets.fromLTRB(
outer.left, outer.top, outer.right, bottom)),
child: child
);
}
bool _isIPhoneX(MediaQueryData mediaQuery) {
if (Platform.isIOS) {
var size = mediaQuery.size;
if (size.height == 812.0 || size.width == 812.0) {
return true;
}
}
return false;
}
} Usage @override
Widget build(BuildContext context) {
return new IPhoneXPadding(
child: new Scaffold(
bottomNavigationBar: _bottomNavBar,
body: /*...*/,
),
);
} ResultProblemThe |
Small update: I've got engine work in progress to resolve #12895, which is a pre-req for getting a universal solution for iPhone X issues. Once that's in, I'll clean up my preliminary patches for the bottom nav (as well as list and grid tiles). In the meantime, if you need a quick workaround, you could apply an inline patch to the bottom nav in a branch. You may need to tweak the numbers (25.0, 34.0) a little. Also fair warning that this is a quick adaptation of the preliminary patches mentioned above (which depend on upcoming engine changes), in order to work with a manual heuristic-based iPhone X check, so I haven't tried these exact patches out locally ;) BottomNavigationBar:
CupertinoTabBar:
|
I should clarify - the additional bottom padding is 34.0 for vertical orientation, 21.0 for horizontal. In both cases, minus 9.0 on the bottom nav for the moment. |
As of #13442, this is fixed on |
@passsy your detection for iPhone X worked for me, would you share how you came up with 812 as the size?
|
@deborah-ufw manual iPhone X detection should no longer be necessary. The framework now includes support for iOS safe area insets. See the SafeArea class for details. If, rather than automatically applying padding, you need the pixel values of the safe area insets, they've available via As a bonus, these will work with all future iPhone X-like iPhone models, as well as any upcoming 'creative' displays on Android phones as well -- the only one I'm currently aware of is the Essential Phone, which has a camera notch, but I'm sure there'll be more. |
Still would like to know how the number was arrived at. :)
… On Feb 12, 2018, at 11:39 AM, Chris Bracken ***@***.***> wrote:
@deborah-ufw <https://github.com/deborah-ufw> manual iPhone X detection should no longer be necessary. The framework now includes support for iOS safe area insets. See the SafeArea <https://docs.flutter.io/flutter/widgets/SafeArea-class.html> class for details.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub <#12099 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAXG50EFNdHLQGdDX2_fopnUJYUM2fLjks5tUJN5gaJpZM4PYJoo>.
|
812 is the iPhone X's screen height in logical pixels (375 x 812); I'm assuming the reason for checking both width/height was to deal with both screen orientations. |
Thank you, but how was logical pixels calculated? I would like to know how exactly 812 was arrived at.
… On Feb 12, 2018, at 12:18 PM, Chris Bracken ***@***.***> wrote:
812 is the iPhone X's screen height in logical pixels (375 x 812); I'm assuming width/height to deal with orientation.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub <#12099 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAXG566OFDa4iJofCYFYy8YLwS1B0h1Zks5tUJyhgaJpZM4PYJoo>.
|
Flutter computes logical pixels consistently with what the device OS reports. Apple documents the iPhone X screen as 375 x 812 logical pixels (see the bit under screen size). In terms of what computations Flutter does in order to report the dimensions in MediaQuery, we're just reporting what the underlying OS reports back to us, multiplied by the scale factor they report to us. An iPhone X reports a logical resolution of 375 x 812 and a scale factor of 3. In terms of how we get those values on iOS, the scale is via a call to Using the |
While we're talking screen sizes -- I find The Ultimate Guide to iPhone Resolutions far handier than Apple's official docs. Leaving a link here in case others find it useful. |
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
Steps to Reproduce
On the iPhone X,
BottomNavigationBar
should include additional bottom padding to avoid placingBottomNavigationBarItem
s under the indicator for accessing the Home screen.See Apple's Human Interface Guidelines for iPhone X.
Dependent on issue #12098
Example:
Flutter Doctor
The text was updated successfully, but these errors were encountered: