Update flutter web samples (#161)

* update gallery and web samples

compatable with SDK version 2a576b774c:

Flutter 1.12.3-pre.38 • channel master • git@github.com:flutter/flutter.git
Framework • revision 2a576b774c (2 hours ago) • 2019-11-15 13:15:05 -0800
Engine • revision b2640d97e7
Tools • Dart 2.7.0

* add preview image

web/gallery/lib/demo/cupertino/cupertino_navigation_demo.dart

@@ -143,6 +143,7 @@ class CupertinoDemoTab1 extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return CupertinoPageScaffold(
+      backgroundColor: CupertinoColors.systemGroupedBackground,
       child: CustomScrollView(
         semanticChildCount: _kChildCount,
         slivers: <Widget>[
@@ -199,56 +200,59 @@ class Tab1RowItem extends StatelessWidget {
           ),
         ));
       },
-      child: SafeArea(
-        top: false,
-        bottom: false,
-        child: Padding(
-          padding: const EdgeInsets.only(left: 16.0, top: 8.0, bottom: 8.0, right: 8.0),
-          child: Row(
-            children: <Widget>[
-              Container(
-                height: 60.0,
-                width: 60.0,
-                decoration: BoxDecoration(
-                  color: color,
-                  borderRadius: BorderRadius.circular(8.0),
-                ),
-              ),
-              Expanded(
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: <Widget>[
-                      Text(colorName),
-                      const Padding(padding: EdgeInsets.only(top: 8.0)),
-                      const Text(
-                        'Buy this cool color',
-                        style: TextStyle(
-                          color: Color(0xFF8E8E93),
-                          fontSize: 13.0,
-                          fontWeight: FontWeight.w300,
-                        ),
-                      ),
-                    ],
+      child: Container(
+        color: CupertinoDynamicColor.resolve(CupertinoColors.systemBackground, context),
+        child: SafeArea(
+          top: false,
+          bottom: false,
+          child: Padding(
+            padding: const EdgeInsets.only(left: 16.0, top: 8.0, bottom: 8.0, right: 8.0),
+            child: Row(
+              children: <Widget>[
+                Container(
+                  height: 60.0,
+                  width: 60.0,
+                  decoration: BoxDecoration(
+                    color: color,
+                    borderRadius: BorderRadius.circular(8.0),
                   ),
                 ),
-              ),
-              CupertinoButton(
-                padding: EdgeInsets.zero,
-                child: const Icon(CupertinoIcons.plus_circled,
-                  semanticLabel: 'Add',
+                Expanded(
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: <Widget>[
+                        Text(colorName),
+                        const Padding(padding: EdgeInsets.only(top: 8.0)),
+                        Text(
+                          'Buy this cool color',
+                          style: TextStyle(
+                            color: CupertinoDynamicColor.resolve(CupertinoColors.secondaryLabel, context),
+                            fontSize: 13.0,
+                            fontWeight: FontWeight.w300,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
                 ),
-                onPressed: () { },
-              ),
-              CupertinoButton(
-                padding: EdgeInsets.zero,
-                child: const Icon(CupertinoIcons.share,
-                  semanticLabel: 'Share',
+                CupertinoButton(
+                  padding: EdgeInsets.zero,
+                  child: const Icon(CupertinoIcons.plus_circled,
+                    semanticLabel: 'Add',
+                  ),
+                  onPressed: () { },
                 ),
-                onPressed: () { },
-              ),
-            ],
+                CupertinoButton(
+                  padding: EdgeInsets.zero,
+                  child: const Icon(CupertinoIcons.share,
+                    semanticLabel: 'Share',
+                  ),
+                  onPressed: () { },
+                ),
+              ],
+            ),
           ),
         ),
       ),
@@ -263,7 +267,7 @@ class Tab1RowItem extends StatelessWidget {
         row,
         Container(
           height: 1.0,
-          color: const Color(0xFFD9D9D9),
+          color: CupertinoDynamicColor.resolve(CupertinoColors.separator, context),
         ),
       ],
     );
@@ -336,8 +340,8 @@ class Tab1ItemPageState extends State<Tab1ItemPage> {
                         const Padding(padding: EdgeInsets.only(top: 6.0)),
                         Text(
                           'Item number ${widget.index}',
-                          style: const TextStyle(
-                            color: Color(0xFF8E8E93),
+                          style: TextStyle(
+                            color: CupertinoDynamicColor.resolve(CupertinoColors.secondaryLabel, context),
                             fontSize: 16.0,
                             fontWeight: FontWeight.w100,
                           ),
@@ -433,7 +437,10 @@ class CupertinoDemoTab2 extends StatelessWidget {
       child: CupertinoScrollbar(
         child: ListView(
           children: <Widget>[
-            Tab2Header(),
+            CupertinoUserInterfaceLevel(
+              data: CupertinoUserInterfaceLevelData.elevated,
+              child: Tab2Header(),
+            ),
             ...buildTab2Conversation(),
           ],
         ),
@@ -456,18 +463,18 @@ class Tab2Header extends StatelessWidget {
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
               Container(
-                decoration: const BoxDecoration(
-                  color: Color(0xFFE5E5E5),
+                decoration: BoxDecoration(
+                  color: CupertinoDynamicColor.resolve(CupertinoColors.systemFill, context),
                 ),
                 child: Padding(
                   padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0),
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: const <Widget>[
+                    children: <Widget>[
                       Text(
                         'SUPPORT TICKET',
                         style: TextStyle(
-                          color: Color(0xFF646464),
+                          color: CupertinoDynamicColor.resolve(CupertinoColors.secondaryLabel, context),
                           letterSpacing: -0.9,
                           fontSize: 14.0,
                           fontWeight: FontWeight.w500,
@@ -476,7 +483,7 @@ class Tab2Header extends StatelessWidget {
                       Text(
                         'Show More',
                         style: TextStyle(
-                          color: Color(0xFF646464),
+                          color: CupertinoDynamicColor.resolve(CupertinoColors.secondaryLabel, context),
                           letterSpacing: -0.6,
                           fontSize: 12.0,
                           fontWeight: FontWeight.w500,
@@ -487,8 +494,8 @@ class Tab2Header extends StatelessWidget {
                 ),
               ),
               Container(
-                decoration: const BoxDecoration(
-                  color: Color(0xFFF3F3F3),
+                decoration: BoxDecoration(
+                  color: CupertinoDynamicColor.resolve(CupertinoColors.quaternarySystemFill, context),
                 ),
                 child: Padding(
                   padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0),
@@ -576,21 +583,31 @@ class Tab2ConversationBubble extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    Color backgroundColor;
+    Color foregroundColor;
+
+    switch (color) {
+      case Tab2ConversationBubbleColor.gray:
+        backgroundColor = CupertinoDynamicColor.resolve(CupertinoColors.systemFill, context);
+        foregroundColor = CupertinoDynamicColor.resolve(CupertinoColors.label, context);
+        break;
+      case Tab2ConversationBubbleColor.blue:
+        backgroundColor = CupertinoTheme.of(context).primaryColor;
+        foregroundColor = CupertinoColors.white;
+        break;
+    }
+
     return Container(
       decoration: BoxDecoration(
         borderRadius: const BorderRadius.all(Radius.circular(18.0)),
-        color: color == Tab2ConversationBubbleColor.blue
-            ? CupertinoColors.activeBlue
-            : CupertinoColors.lightBackgroundGray,
+        color: backgroundColor,
       ),
       margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
       padding: const EdgeInsets.symmetric(horizontal: 14.0, vertical: 10.0),
       child: Text(
         text,
         style: TextStyle(
-          color: color == Tab2ConversationBubbleColor.blue
-              ? CupertinoColors.white
-              : CupertinoColors.black,
+          color: foregroundColor,
           letterSpacing: -0.4,
           fontSize: 15.0,
           fontWeight: FontWeight.w400,
@@ -655,11 +672,14 @@ class Tab2ConversationRow extends StatelessWidget {
         crossAxisAlignment: isSelf ? CrossAxisAlignment.center : CrossAxisAlignment.end,
         children: <Widget>[
           if (avatar != null) avatar,
-          Tab2ConversationBubble(
-            text: text,
-            color: isSelf
+          CupertinoUserInterfaceLevel(
+            data: CupertinoUserInterfaceLevelData.elevated,
+            child: Tab2ConversationBubble(
+              text: text,
+              color: isSelf
               ? Tab2ConversationBubbleColor.blue
               : Tab2ConversationBubbleColor.gray,
+            ),
           ),
         ],
       ),
@@ -709,55 +729,47 @@ class CupertinoDemoTab3 extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return CupertinoPageScaffold(
-      navigationBar: CupertinoNavigationBar(
-        trailing: trailingButtons,
-      ),
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          color: CupertinoTheme.of(context).brightness == Brightness.light
-              ? CupertinoColors.extraLightBackgroundGray
-              : CupertinoColors.darkBackgroundGray,
-        ),
-        child: ListView(
-          children: <Widget>[
-            const Padding(padding: EdgeInsets.only(top: 32.0)),
-            GestureDetector(
-              onTap: () {
-                Navigator.of(context, rootNavigator: true).push(
-                  CupertinoPageRoute<bool>(
-                    fullscreenDialog: true,
-                    builder: (BuildContext context) => Tab3Dialog(),
-                  ),
-                );
-              },
-              child: Container(
-                decoration: BoxDecoration(
-                  color: CupertinoTheme.of(context).scaffoldBackgroundColor,
-                  border: const Border(
-                    top: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
-                    bottom: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
-                  ),
+    navigationBar: CupertinoNavigationBar(trailing: trailingButtons),
+    backgroundColor: CupertinoColors.systemBackground,
+      child: ListView(
+        children: <Widget>[
+          const Padding(padding: EdgeInsets.only(top: 32.0)),
+          GestureDetector(
+            onTap: () {
+              Navigator.of(context, rootNavigator: true).push(
+                CupertinoPageRoute<bool>(
+                  fullscreenDialog: true,
+                  builder: (BuildContext context) => Tab3Dialog(),
                 ),
-                height: 44.0,
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
-                  child: SafeArea(
-                    top: false,
-                    bottom: false,
-                    child: Row(
-                      children: <Widget>[
-                        Text(
-                          'Sign in',
-                          style: TextStyle(color: CupertinoTheme.of(context).primaryColor),
-                        ),
-                      ],
-                    ),
+              );
+            },
+            child: Container(
+              decoration: BoxDecoration(
+                color: CupertinoTheme.of(context).scaffoldBackgroundColor,
+                border: const Border(
+                  top: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
+                  bottom: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
+                ),
+              ),
+              height: 44.0,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+                child: SafeArea(
+                  top: false,
+                  bottom: false,
+                  child: Row(
+                    children: <Widget>[
+                      Text(
+                        'Sign in',
+                        style: TextStyle(color: CupertinoTheme.of(context).primaryColor),
+                      ),
+                    ],
                   ),
                 ),
               ),
             ),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }