Add an iOS style demo to the gallery (#12651)

* Built first tab

* Small additions

* started tab 3

* Need color arithmetics

* tab 2 built

* finalize

* lint and tests

* review

* Reapply docs after rebase

* use color.computeLuminance

* linter

* nit

dev/benchmarks/complex_layout/pubspec.yaml

@@ -11,7 +11,7 @@ dependencies:
   flutter_gallery_assets:
     git:
       url: https://flutter.googlesource.com/gallery-assets
-      ref: 0b6cdb29b24ecc60781c2828086d955dacdc0152
+      ref: 6427f36af1bdb2fffaeda1c46d5e52d7b636c93d
 
 dev_dependencies:
   flutter_test:

examples/flutter_gallery/ios/Runner.xcodeproj/project.pbxproj

@@ -242,13 +242,16 @@
 			files = (
 			);
 			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
 			);
 			name = "[CP] Check Pods Manifest.lock";
 			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-Runner-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n";
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
 		9740EEB61CF901F6004384FC /* Run Script */ = {
@@ -271,9 +274,14 @@
 			files = (
 			);
 			inputPaths = (
+				"${SRCROOT}/Pods/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh",
+				"${PODS_ROOT}/../../../../bin/cache/artifacts/engine/ios/Flutter.framework",
+				"${BUILT_PRODUCTS_DIR}/url_launcher/url_launcher.framework",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Flutter.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/url_launcher.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

examples/flutter_gallery/lib/demo/cupertino/cupertino.dart

@@ -5,5 +5,6 @@
 export 'cupertino_activity_indicator_demo.dart';
 export 'cupertino_buttons_demo.dart';
 export 'cupertino_dialog_demo.dart';
+export 'cupertino_navigation_demo.dart';
 export 'cupertino_slider_demo.dart';
 export 'cupertino_switch_demo.dart';

examples/flutter_gallery/lib/gallery/app.dart

@@ -138,8 +138,8 @@ class GalleryAppState extends State<GalleryApp> {
       );
     }
 
-    final Map<String, WidgetBuilder> _kRoutes = new Map<String,
-      WidgetBuilder>.fromIterable(
+    final Map<String, WidgetBuilder> _kRoutes =
+        new Map<String, WidgetBuilder>.fromIterable(
       // For a different example of how to set up an application routing table
       // using named routes, consider the example in the Navigator class documentation:
       // https://docs.flutter.io/flutter/widgets/Navigator-class.html

examples/flutter_gallery/lib/gallery/item.dart

@@ -285,6 +285,13 @@ List<GalleryItem> _buildGalleryItems() {
       routeName: CupertinoDialogDemo.routeName,
       buildRoute: (BuildContext context) => new CupertinoDialogDemo(),
     ),
+    new GalleryItem(
+      title: 'Navigation',
+      subtitle: 'Cupertino styled navigation patterns',
+      category: 'Cupertino Components',
+      routeName: CupertinoNavigationDemo.routeName,
+      buildRoute: (BuildContext context) => new CupertinoNavigationDemo(),
+    ),
     new GalleryItem(
       title: 'Sliders',
       subtitle: 'Cupertino styled sliders',

examples/flutter_gallery/pubspec.yaml

@@ -6,12 +6,13 @@ dependencies:
   intl: 0.15.2
   string_scanner: 1.0.2
   url_launcher: 0.4.2+5
+  cupertino_icons: 0.1.1
 
   # Also update dev/benchmarks/complex_layout/pubspec.yaml
   flutter_gallery_assets:
     git:
       url: https://flutter.googlesource.com/gallery-assets
-      ref: 0b6cdb29b24ecc60781c2828086d955dacdc0152
+      ref: 6427f36af1bdb2fffaeda1c46d5e52d7b636c93d
 
 dev_dependencies:
   flutter_test:
@@ -137,6 +138,8 @@ flutter:
     - packages/flutter_gallery_assets/shrine/vendors/peter-carlsson.png
     - packages/flutter_gallery_assets/shrine/vendors/sandra-adams.jpg
     - packages/flutter_gallery_assets/shrine/vendors/zach.jpg
+    - packages/flutter_gallery_assets/cupertino_navigation/person1.jpg
+    - packages/flutter_gallery_assets/cupertino_navigation/person2.jpg
   fonts:
     - family: Raleway
       fonts:

examples/flutter_gallery/test/live_smoketest.dart

@@ -96,6 +96,7 @@ const List<Demo> demos = const <Demo>[
   const Demo('Activity Indicator', synchronized: false),
   const Demo('Buttons'),
   const Demo('Dialogs'),
+  const Demo('Navigation'),
   const Demo('Sliders'),
   const Demo('Switches'),
 

examples/flutter_gallery/test_driver/transitions_perf_test.dart

@@ -70,6 +70,7 @@ const List<Demo> demos = const <Demo>[
   const Demo('Activity Indicator', synchronized: false),
   const Demo('Buttons'),
   const Demo('Dialogs'),
+  const Demo('Navigation'),
   const Demo('Sliders'),
   const Demo('Switches'),
 

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

@@ -44,7 +44,7 @@ class CupertinoTabBar extends StatelessWidget implements PreferredSizeWidget {
     this.backgroundColor: _kDefaultTabBarBackgroundColor,
     this.activeColor: CupertinoColors.activeBlue,
     this.inactiveColor: CupertinoColors.inactiveGray,
-    this.iconSize: 24.0,
+    this.iconSize: 30.0,
   }) : assert(items != null),
        assert(items.length >= 2),
        assert(0 <= currentIndex && currentIndex < items.length),
@@ -111,10 +111,12 @@ class CupertinoTabBar extends StatelessWidget implements PreferredSizeWidget {
             color: inactiveColor,
             size: iconSize,
           ),
-          child: DefaultTextStyle.merge( // Default with the inactive state.
+          child: new DefaultTextStyle( // Default with the inactive state.
             style: new TextStyle(
+              fontFamily: '.SF UI Text',
               fontSize: 10.0,
-              letterSpacing: 0.12,
+              letterSpacing: -0.24,
+              fontWeight: FontWeight.w500,
               color: inactiveColor,
             ),
             child: new Row(

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

@@ -70,14 +70,23 @@ class CupertinoIcons {
   static const IconData flag = const IconData(0xf42c, fontFamily: iconFont, fontPackage: iconFontPackage);
 
   /// A magnifier loop outline.
-  static const IconData search = const IconData(0xf4c6, fontFamily: iconFont, fontPackage: iconFontPackage);
+  static const IconData search = const IconData(0xf4a5, fontFamily: iconFont, fontPackage: iconFontPackage);
 
   /// A checkmark.
-  static const IconData check_mark = const IconData(0xf41e, fontFamily: iconFont, fontPackage: iconFontPackage);
+  static const IconData check_mark = const IconData(0xf3fd, fontFamily: iconFont, fontPackage: iconFontPackage);
 
   /// A checkmark in a circle.
-  static const IconData check_mark_circled = const IconData(0xf41f, fontFamily: iconFont, fontPackage: iconFontPackage);
+  static const IconData check_mark_circled = const IconData(0xf3fe, fontFamily: iconFont, fontPackage: iconFontPackage);
 
   /// A thicker left chevron used in iOS for the nav bar back button.
-  static const IconData back = const IconData(0xf3f0, fontFamily: iconFont, fontPackage: iconFontPackage);
+  static const IconData back = const IconData(0xf3cf, fontFamily: iconFont, fontPackage: iconFontPackage);
+
+  /// Outline of a simple front-facing house.
+  static const IconData home = const IconData(0xf447, fontFamily: iconFont, fontPackage: iconFontPackage);
+
+  /// A right facing shopping cart outline.
+  static const IconData shopping_cart = const IconData(0xf3f7, fontFamily: iconFont, fontPackage: iconFontPackage);
+
+  /// 3 solid dots.
+  static const IconData ellipsis = const IconData(0xf46a, fontFamily: iconFont, fontPackage: iconFontPackage);
 }

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

@@ -5,6 +5,7 @@
 import 'dart:ui' show ImageFilter;
 
 import 'package:flutter/foundation.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
 
 import 'button.dart';
@@ -277,6 +278,10 @@ Widget _wrapWithBackground({Color backgroundColor, Widget child}) {
     child: child,
   );
 
+  final bool darkBackground = backgroundColor.computeLuminance() < 0.179;
+  SystemChrome.setSystemUIOverlayStyle(
+      darkBackground ? SystemUiOverlayStyle.light : SystemUiOverlayStyle.dark);
+
   if (backgroundColor.alpha == 0xFF)
     return childWithBackground;
 
@@ -410,8 +415,9 @@ class _CupertinoPersistentNavigationBar extends StatelessWidget implements Prefe
   }
 }
 
-class _CupertinoLargeTitleNavigationBarSliverDelegate extends SliverPersistentHeaderDelegate {
-  const _CupertinoLargeTitleNavigationBarSliverDelegate({
+class _CupertinoLargeTitleNavigationBarSliverDelegate
+    extends SliverPersistentHeaderDelegate with DiagnosticableTreeMixin {
+  _CupertinoLargeTitleNavigationBarSliverDelegate({
     @required this.persistentHeight,
     @required this.title,
     this.leading,