Fix CupertinoTabView tree re-shape on view inset change (#29024)

packages/flutter/lib/src/cupertino/tab_scaffold.dart

@@ -194,14 +194,12 @@ class _CupertinoTabScaffoldState extends State<CupertinoTabScaffold> {
       tabNumber: widget.tabBar.items.length,
       tabBuilder: widget.tabBuilder,
     );
+    EdgeInsets contentPadding = EdgeInsets.zero;
 
     if (widget.resizeToAvoidBottomInset) {
       // Remove the view inset and add it back as a padding in the inner content.
       newMediaQuery = newMediaQuery.removeViewInsets(removeBottom: true);
-      content = Padding(
-        padding: EdgeInsets.only(bottom: existingMediaQuery.viewInsets.bottom),
-        child: content,
-      );
+      contentPadding = EdgeInsets.only(bottom: existingMediaQuery.viewInsets.bottom);
     }
 
     if (widget.tabBar != null &&
@@ -219,10 +217,7 @@ class _CupertinoTabScaffoldState extends State<CupertinoTabScaffold> {
       // translucent, let main content draw behind the tab bar but hint the
       // obstructed area.
       if (widget.tabBar.opaque(context)) {
-        content = Padding(
-          padding: EdgeInsets.only(bottom: bottomPadding),
-          child: content,
-        );
+        contentPadding = EdgeInsets.only(bottom: bottomPadding);
       } else {
         newMediaQuery = newMediaQuery.copyWith(
           padding: newMediaQuery.padding.copyWith(
@@ -234,7 +229,10 @@ class _CupertinoTabScaffoldState extends State<CupertinoTabScaffold> {
 
     content = MediaQuery(
       data: newMediaQuery,
+      child: Padding(
+        padding: contentPadding,
         child: content,
+      ),
     );
 
     // The main content being at the bottom is added to the stack first.

packages/flutter/test/cupertino/README.md

@@ -3,5 +3,8 @@
 Avoid importing the Material 'package:flutter/material.dart' in these tests as
 we're trying to test the Cupertino package in standalone scenarios.
 
-Some tests may be replicated in the Material tests when Material reuses
+The 'material' subdirectory contains tests for cross-interactions of Material
+Cupertino widgets in hybridized apps.
+
+Some tests may also be replicated in the Material tests when Material reuses
 Cupertino components on iOS such as page transitions and text editing.

packages/flutter/test/cupertino/material/README.md

+# Tests for the Cupertino+Material mixed usages
+
+In this package, we test for interactions between Material and Cupertino
+widgets.

packages/flutter/test/cupertino/material/tab_scaffold_test.dart

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import '../../painting/mocks_for_image_cache.dart';
+
+List<int> selectedTabs;
+
+void main() {
+  setUp(() {
+    selectedTabs = <int>[];
+  });
+
+  testWidgets('Last tab gets focus', (WidgetTester tester) async {
+    // 2 nodes for 2 tabs
+    final List<FocusNode> focusNodes = <FocusNode>[FocusNode(), FocusNode()];
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Material(
+          child: CupertinoTabScaffold(
+            tabBar: _buildTabBar(),
+            tabBuilder: (BuildContext context, int index) {
+              return TextField(
+                focusNode: focusNodes[index],
+                autofocus: true,
+              );
+            },
+          ),
+        ),
+      ),
+    );
+
+    expect(focusNodes[0].hasFocus, isTrue);
+
+    await tester.tap(find.text('Tab 2'));
+    await tester.pump();
+
+    expect(focusNodes[0].hasFocus, isFalse);
+    expect(focusNodes[1].hasFocus, isTrue);
+
+    await tester.tap(find.text('Tab 1'));
+    await tester.pump();
+
+    expect(focusNodes[0].hasFocus, isTrue);
+    expect(focusNodes[1].hasFocus, isFalse);
+  });
+
+  testWidgets('Do not affect focus order in the route', (WidgetTester tester) async {
+    final List<FocusNode> focusNodes = <FocusNode>[
+      FocusNode(), FocusNode(), FocusNode(), FocusNode(),
+    ];
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Material(
+          child: CupertinoTabScaffold(
+            tabBar: _buildTabBar(),
+            tabBuilder: (BuildContext context, int index) {
+              return Column(
+                children: <Widget>[
+                  TextField(
+                    focusNode: focusNodes[index * 2],
+                    decoration: const InputDecoration(
+                      hintText: 'TextField 1',
+                    ),
+                  ),
+                  TextField(
+                    focusNode: focusNodes[index * 2 + 1],
+                    decoration: const InputDecoration(
+                      hintText: 'TextField 2',
+                    ),
+                  ),
+                ],
+              );
+            },
+          ),
+        ),
+      ),
+    );
+
+    expect(
+      focusNodes.any((FocusNode node) => node.hasFocus),
+      isFalse,
+    );
+
+    await tester.tap(find.widgetWithText(TextField, 'TextField 2'));
+
+    expect(
+      focusNodes.indexOf(focusNodes.singleWhere((FocusNode node) => node.hasFocus)),
+      1,
+    );
+
+    await tester.tap(find.text('Tab 2'));
+    await tester.pump();
+
+    await tester.tap(find.widgetWithText(TextField, 'TextField 1'));
+
+    expect(
+      focusNodes.indexOf(focusNodes.singleWhere((FocusNode node) => node.hasFocus)),
+      2,
+    );
+
+    await tester.tap(find.text('Tab 1'));
+    await tester.pump();
+
+    // Upon going back to tab 1, the item it tab 1 that previously had the focus
+    // (TextField 2) gets it back.
+    expect(
+      focusNodes.indexOf(focusNodes.singleWhere((FocusNode node) => node.hasFocus)),
+      1,
+    );
+  });
+
+  testWidgets('Tab bar respects themes', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      CupertinoApp(
+        home: CupertinoTabScaffold(
+          tabBar: _buildTabBar(),
+          tabBuilder: (BuildContext context, int index) {
+            return const Placeholder();
+          },
+        ),
+      ),
+    );
+
+    BoxDecoration tabDecoration = tester.widget<DecoratedBox>(find.descendant(
+      of: find.byType(CupertinoTabBar),
+      matching: find.byType(DecoratedBox),
+    )).decoration;
+
+    expect(tabDecoration.color, const Color(0xCCF8F8F8));
+
+    await tester.tap(find.text('Tab 2'));
+    await tester.pump();
+
+    // Pump again but with dark theme.
+    await tester.pumpWidget(
+      CupertinoApp(
+        theme: const CupertinoThemeData(
+          brightness: Brightness.dark,
+          primaryColor: CupertinoColors.destructiveRed,
+        ),
+        home: CupertinoTabScaffold(
+          tabBar: _buildTabBar(),
+          tabBuilder: (BuildContext context, int index) {
+            return const Placeholder();
+          },
+        ),
+      ),
+    );
+
+    tabDecoration = tester.widget<DecoratedBox>(find.descendant(
+      of: find.byType(CupertinoTabBar),
+      matching: find.byType(DecoratedBox),
+    )).decoration;
+
+    expect(tabDecoration.color, const Color(0xB7212121));
+
+    final RichText tab1 = tester.widget(find.descendant(
+      of: find.text('Tab 1'),
+      matching: find.byType(RichText),
+    ));
+    // Tab 2 should still be selected after changing theme.
+    expect(tab1.text.style.color, CupertinoColors.inactiveGray);
+    final RichText tab2 = tester.widget(find.descendant(
+      of: find.text('Tab 2'),
+      matching: find.byType(RichText),
+    ));
+    expect(tab2.text.style.color, CupertinoColors.destructiveRed);
+  });
+
+  testWidgets('Does not lose state when focusing on text input', (WidgetTester tester) async {
+    // Regression testing for https://github.com/flutter/flutter/issues/28457.
+
+    await tester.pumpWidget(
+      MediaQuery(
+        data: const MediaQueryData(
+          viewInsets:  EdgeInsets.only(bottom: 0),
+        ),
+        child: MaterialApp(
+          home: Material(
+            child: CupertinoTabScaffold(
+              tabBar: _buildTabBar(),
+              tabBuilder: (BuildContext context, int index) {
+                return const TextField();
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+
+    final EditableTextState editableState = tester.state<EditableTextState>(find.byType(EditableText));
+
+    await tester.enterText(find.byType(TextField), "don't lose me");
+
+    await tester.pumpWidget(
+      MediaQuery(
+        data: const MediaQueryData(
+          viewInsets:  EdgeInsets.only(bottom: 100),
+        ),
+        child: MaterialApp(
+          home: Material(
+            child: CupertinoTabScaffold(
+              tabBar: _buildTabBar(),
+              tabBuilder: (BuildContext context, int index) {
+                return const TextField();
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+
+    // The exact same state instance is still there.
+    expect(tester.state<EditableTextState>(find.byType(EditableText)), editableState);
+    expect(find.text("don't lose me"), findsOneWidget);
+  });
+}
+
+CupertinoTabBar _buildTabBar({ int selectedTab = 0 }) {
+  return CupertinoTabBar(
+    items: const <BottomNavigationBarItem>[
+      BottomNavigationBarItem(
+        icon: ImageIcon(TestImageProvider(24, 24)),
+        title: Text('Tab 1'),
+      ),
+      BottomNavigationBarItem(
+        icon: ImageIcon(TestImageProvider(24, 24)),
+        title: Text('Tab 2'),
+      ),
+    ],
+    currentIndex: selectedTab,
+    onTap: (int newTab) => selectedTabs.add(newTab),
+  );
+}

packages/flutter/test/cupertino/tab_scaffold_test.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import 'package:flutter/cupertino.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import '../painting/mocks_for_image_cache.dart';
@@ -111,18 +110,16 @@ void main() {
 
     await tester.pumpWidget(
       CupertinoApp(
-        home: Material(
-          child: CupertinoTabScaffold(
+        home: CupertinoTabScaffold(
           tabBar: _buildTabBar(),
           tabBuilder: (BuildContext context, int index) {
-              return TextField(
+            return CupertinoTextField(
               focusNode: focusNodes[index],
               autofocus: true,
             );
           },
         ),
       ),
-      ),
     );
 
     expect(focusNodes[0].hasFocus, isTrue);
@@ -147,30 +144,24 @@ void main() {
 
     await tester.pumpWidget(
       CupertinoApp(
-        home: Material(
-          child: CupertinoTabScaffold(
+        home: CupertinoTabScaffold(
           tabBar: _buildTabBar(),
           tabBuilder: (BuildContext context, int index) {
             return Column(
               children: <Widget>[
-                  TextField(
+                CupertinoTextField(
                   focusNode: focusNodes[index * 2],
-                    decoration: const InputDecoration(
-                      hintText: 'TextField 1',
+                  placeholder: 'TextField 1',
                 ),
-                  ),
-                  TextField(
+                CupertinoTextField(
                   focusNode: focusNodes[index * 2 + 1],
-                    decoration: const InputDecoration(
-                      hintText: 'TextField 2',
-                    ),
+                  placeholder: 'TextField 2',
                 ),
               ],
             );
           },
         ),
       ),
-      ),
     );
 
     expect(
@@ -178,7 +169,7 @@ void main() {
       isFalse,
     );
 
-    await tester.tap(find.widgetWithText(TextField, 'TextField 2'));
+    await tester.tap(find.widgetWithText(CupertinoTextField, 'TextField 2'));
 
     expect(
       focusNodes.indexOf(focusNodes.singleWhere((FocusNode node) => node.hasFocus)),
@@ -188,7 +179,7 @@ void main() {
     await tester.tap(find.text('Tab 2'));
     await tester.pump();
 
-    await tester.tap(find.widgetWithText(TextField, 'TextField 1'));
+    await tester.tap(find.widgetWithText(CupertinoTextField, 'TextField 1'));
 
     expect(
       focusNodes.indexOf(focusNodes.singleWhere((FocusNode node) => node.hasFocus)),
@@ -471,6 +462,50 @@ void main() {
     expect(find.text('Page 2', skipOffstage: false), findsNothing);
     expect(find.text('Page 4', skipOffstage: false), findsNothing);
   });
+
+  testWidgets('Does not lose state when focusing on text input', (WidgetTester tester) async {
+    // Regression testing for https://github.com/flutter/flutter/issues/28457.
+
+    await tester.pumpWidget(
+      MediaQuery(
+        data: const MediaQueryData(
+          viewInsets:  EdgeInsets.only(bottom: 0),
+        ),
+        child: CupertinoApp(
+          home: CupertinoTabScaffold(
+            tabBar: _buildTabBar(),
+            tabBuilder: (BuildContext context, int index) {
+              return const CupertinoTextField();
+            },
+          ),
+        ),
+      ),
+    );
+
+    final EditableTextState editableState = tester.state<EditableTextState>(find.byType(EditableText));
+
+    await tester.enterText(find.byType(CupertinoTextField), "don't lose me");
+
+    await tester.pumpWidget(
+      MediaQuery(
+        data: const MediaQueryData(
+          viewInsets:  EdgeInsets.only(bottom: 100),
+        ),
+        child: CupertinoApp(
+          home: CupertinoTabScaffold(
+            tabBar: _buildTabBar(),
+            tabBuilder: (BuildContext context, int index) {
+              return const CupertinoTextField();
+            },
+          ),
+        ),
+      ),
+    );
+
+    // The exact same state instance is still there.
+    expect(tester.state<EditableTextState>(find.byType(EditableText)), editableState);
+    expect(find.text("don't lose me"), findsOneWidget);
+  });
 }
 
 CupertinoTabBar _buildTabBar({ int selectedTab = 0 }) {