Unverified Commit 324ef1d1 authored by Chris Bracken's avatar Chris Bracken Committed by GitHub

Apply media bottom padding to CupertinoTabBar (#13372)

This adjusts the CupertinoTabBar height in the presence of bottom
padding. On the iPhone X, this will increase the height to account for
the home indicator widget.
parent 10a4f329
......@@ -92,6 +92,7 @@ class CupertinoTabBar extends StatelessWidget implements PreferredSizeWidget {
@override
Widget build(BuildContext context) {
final double bottomPadding = MediaQuery.of(context).padding.bottom;
Widget result = new DecoratedBox(
decoration: new BoxDecoration(
border: const Border(
......@@ -105,7 +106,7 @@ class CupertinoTabBar extends StatelessWidget implements PreferredSizeWidget {
),
// TODO(xster): allow icons-only versions of the tab bar too.
child: new SizedBox(
height: _kTabBarHeight,
height: _kTabBarHeight + bottomPadding,
child: IconTheme.merge( // Default with the inactive state.
data: new IconThemeData(
color: inactiveColor,
......@@ -119,6 +120,8 @@ class CupertinoTabBar extends StatelessWidget implements PreferredSizeWidget {
fontWeight: FontWeight.w500,
color: inactiveColor,
),
child: new Padding(
padding: new EdgeInsets.only(bottom: bottomPadding),
child: new Row(
// Align bottom since we want the labels to be aligned.
crossAxisAlignment: CrossAxisAlignment.end,
......@@ -127,6 +130,7 @@ class CupertinoTabBar extends StatelessWidget implements PreferredSizeWidget {
),
),
),
),
);
if (!opaque) {
......
......@@ -35,7 +35,9 @@ void main() {
});
testWidgets('Active and inactive colors', (WidgetTester tester) async {
await pumpWidgetWithBoilerplate(tester, new CupertinoTabBar(
await pumpWidgetWithBoilerplate(tester, new MediaQuery(
data: const MediaQueryData(),
child: new CupertinoTabBar(
items: <BottomNavigationBarItem>[
const BottomNavigationBarItem(
icon: const ImageIcon(const TestImageProvider(24, 24)),
......@@ -49,6 +51,7 @@ void main() {
currentIndex: 1,
activeColor: const Color(0xFF123456),
inactiveColor: const Color(0xFF654321),
),
));
final RichText actualInactive = tester.widget(find.descendant(
......@@ -64,8 +67,49 @@ void main() {
expect(actualActive.text.style.color, const Color(0xFF123456));
});
testWidgets('Adjusts height to account for bottom padding', (WidgetTester tester) async {
final CupertinoTabBar tabBar = new CupertinoTabBar(
items: <BottomNavigationBarItem>[
const BottomNavigationBarItem(
icon: const ImageIcon(const TestImageProvider(24, 24)),
title: const Text('Aka'),
),
const BottomNavigationBarItem(
icon: const ImageIcon(const TestImageProvider(24, 24)),
title: const Text('Shiro'),
),
],
);
// Verify height with no bottom padding.
await pumpWidgetWithBoilerplate(tester, new MediaQuery(
data: const MediaQueryData(),
child: new CupertinoTabScaffold(
tabBar: tabBar,
tabBuilder: (BuildContext context, int index) {
return const Placeholder();
},
),
));
expect(tester.getSize(find.byType(CupertinoTabBar)).height, 50.0);
// Verify height with bottom padding.
await pumpWidgetWithBoilerplate(tester, new MediaQuery(
data: const MediaQueryData(padding: const EdgeInsets.only(bottom: 40.0)),
child: new CupertinoTabScaffold(
tabBar: tabBar,
tabBuilder: (BuildContext context, int index) {
return const Placeholder();
},
),
));
expect(tester.getSize(find.byType(CupertinoTabBar)).height, 90.0);
});
testWidgets('Opaque background does not add blur effects', (WidgetTester tester) async {
await pumpWidgetWithBoilerplate(tester, new CupertinoTabBar(
await pumpWidgetWithBoilerplate(tester, new MediaQuery(
data: const MediaQueryData(),
child: new CupertinoTabBar(
items: <BottomNavigationBarItem>[
const BottomNavigationBarItem(
icon: const ImageIcon(const TestImageProvider(24, 24)),
......@@ -76,11 +120,14 @@ void main() {
title: const Text('Tab 2'),
),
],
),
));
expect(find.byType(BackdropFilter), findsOneWidget);
await pumpWidgetWithBoilerplate(tester, new CupertinoTabBar(
await pumpWidgetWithBoilerplate(tester, new MediaQuery(
data: const MediaQueryData(),
child: new CupertinoTabBar(
items: <BottomNavigationBarItem>[
const BottomNavigationBarItem(
icon: const ImageIcon(const TestImageProvider(24, 24)),
......@@ -92,6 +139,7 @@ void main() {
),
],
backgroundColor: const Color(0xFFFFFFFF), // Opaque white.
),
));
expect(find.byType(BackdropFilter), findsNothing);
......@@ -100,7 +148,9 @@ void main() {
testWidgets('Tap callback', (WidgetTester tester) async {
int callbackTab;
await pumpWidgetWithBoilerplate(tester, new CupertinoTabBar(
await pumpWidgetWithBoilerplate(tester, new MediaQuery(
data: const MediaQueryData(),
child: new CupertinoTabBar(
items: <BottomNavigationBarItem>[
const BottomNavigationBarItem(
icon: const ImageIcon(const TestImageProvider(24, 24)),
......@@ -113,6 +163,7 @@ void main() {
],
currentIndex: 1,
onTap: (int tab) { callbackTab = tab; },
),
));
await tester.tap(find.text('Tab 1'));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment