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_picker_demo.dart

@@ -17,21 +17,50 @@ class CupertinoPickerDemo extends StatefulWidget {
   _CupertinoPickerDemoState createState() => _CupertinoPickerDemoState();
 }
 
-class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
-  int _selectedColorIndex = 0;
+class _BottomPicker extends StatelessWidget {
+  const _BottomPicker({
+    Key key,
+    @required this.child,
+  }) : assert(child != null),
+       super(key: key);
 
-  Duration timer = const Duration();
+  final Widget child;
 
-  // Value that is shown in the date picker in date mode.
-  DateTime date = DateTime.now();
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: _kPickerSheetHeight,
+      padding: const EdgeInsets.only(top: 6.0),
+      color: CupertinoColors.systemBackground.resolveFrom(context),
+      child: DefaultTextStyle(
+        style: TextStyle(
+          color: CupertinoColors.label.resolveFrom(context),
+          fontSize: 22.0,
+        ),
+        child: GestureDetector(
+          // Blocks taps from propagating to the modal sheet and popping.
+          onTap: () { },
+          child: SafeArea(
+            top: false,
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}
 
-  // Value that is shown in the date picker in time mode.
-  DateTime time = DateTime.now();
+class _Menu extends StatelessWidget {
+  const _Menu({
+    Key key,
+    @required this.children,
+  }) : assert(children != null),
+       super(key: key);
 
-  // Value that is shown in the date picker in dateAndTime mode.
-  DateTime dateTime = DateTime.now();
+  final List<Widget> children;
 
-  Widget _buildMenu(List<Widget> children) {
+  @override
+  Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
         color: CupertinoTheme.of(context).scaffoldBackgroundColor,
@@ -54,28 +83,21 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
       ),
     );
   }
+}
 
-  Widget _buildBottomPicker(Widget picker) {
-    return Container(
-      height: _kPickerSheetHeight,
-      padding: const EdgeInsets.only(top: 6.0),
-      color: CupertinoColors.white,
-      child: DefaultTextStyle(
-        style: const TextStyle(
-          color: CupertinoColors.black,
-          fontSize: 22.0,
-        ),
-        child: GestureDetector(
-          // Blocks taps from propagating to the modal sheet and popping.
-          onTap: () { },
-          child: SafeArea(
-            top: false,
-            child: picker,
-          ),
-        ),
-      ),
-    );
-  }
+class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
+  int _selectedColorIndex = 0;
+
+  Duration timer = const Duration();
+
+  // Value that is shown in the date picker in date mode.
+  DateTime date = DateTime.now();
+
+  // Value that is shown in the date picker in time mode.
+  DateTime time = DateTime.now();
+
+  // Value that is shown in the date picker in dateAndTime mode.
+  DateTime dateTime = DateTime.now();
 
   Widget _buildColorPicker(BuildContext context) {
     final FixedExtentScrollController scrollController =
@@ -86,11 +108,11 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
         await showCupertinoModalPopup<void>(
           context: context,
           builder: (BuildContext context) {
-            return _buildBottomPicker(
-              CupertinoPicker(
+            return _BottomPicker(
+              child: CupertinoPicker(
                 scrollController: scrollController,
                 itemExtent: _kPickerItemHeight,
-                backgroundColor: CupertinoColors.white,
+                backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
                 onSelectedItemChanged: (int index) {
                   setState(() => _selectedColorIndex = index);
                 },
@@ -104,14 +126,12 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
           },
         );
       },
-      child: _buildMenu(
-        <Widget>[
+      child: _Menu(
+        children: <Widget>[
           const Text('Favorite Color'),
           Text(
             coolColorNames[_selectedColorIndex],
-            style: const TextStyle(
-                color: CupertinoColors.inactiveGray
-            ),
+            style: TextStyle(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context)),
           ),
         ],
       ),
@@ -124,8 +144,9 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
         showCupertinoModalPopup<void>(
           context: context,
           builder: (BuildContext context) {
-            return _buildBottomPicker(
-              CupertinoTimerPicker(
+            return _BottomPicker(
+              child: CupertinoTimerPicker(
+                backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
                 initialTimerDuration: timer,
                 onTimerDurationChanged: (Duration newTimer) {
                   setState(() => timer = newTimer);
@@ -135,14 +156,14 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
           },
         );
       },
-      child: _buildMenu(
-        <Widget>[
+      child: _Menu(
+        children: <Widget>[
           const Text('Countdown Timer'),
           Text(
             '${timer.inHours}:'
                 '${(timer.inMinutes % 60).toString().padLeft(2,'0')}:'
                 '${(timer.inSeconds % 60).toString().padLeft(2,'0')}',
-            style: const TextStyle(color: CupertinoColors.inactiveGray),
+            style: TextStyle(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context)),
           ),
         ],
       ),
@@ -155,8 +176,9 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
         showCupertinoModalPopup<void>(
           context: context,
           builder: (BuildContext context) {
-            return _buildBottomPicker(
-              CupertinoDatePicker(
+            return _BottomPicker(
+              child: CupertinoDatePicker(
+                backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
                 mode: CupertinoDatePickerMode.date,
                 initialDateTime: date,
                 onDateTimeChanged: (DateTime newDateTime) {
@@ -167,12 +189,12 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
           },
         );
       },
-      child: _buildMenu(
-        <Widget>[
+      child: _Menu(
+        children: <Widget>[
           const Text('Date'),
           Text(
             DateFormat.yMMMMd().format(date),
-            style: const TextStyle(color: CupertinoColors.inactiveGray),
+            style: TextStyle(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context)),
           ),
         ]
       ),
@@ -185,8 +207,9 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
         showCupertinoModalPopup<void>(
           context: context,
           builder: (BuildContext context) {
-            return _buildBottomPicker(
-              CupertinoDatePicker(
+            return _BottomPicker(
+              child: CupertinoDatePicker(
+                backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
                 mode: CupertinoDatePickerMode.time,
                 initialDateTime: time,
                 onDateTimeChanged: (DateTime newDateTime) {
@@ -197,12 +220,12 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
           },
         );
       },
-      child: _buildMenu(
-        <Widget>[
+      child: _Menu(
+        children: <Widget>[
           const Text('Time'),
           Text(
             DateFormat.jm().format(time),
-            style: const TextStyle(color: CupertinoColors.inactiveGray),
+            style: TextStyle(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context)),
           ),
         ],
       ),
@@ -215,8 +238,9 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
         showCupertinoModalPopup<void>(
           context: context,
           builder: (BuildContext context) {
-            return _buildBottomPicker(
-              CupertinoDatePicker(
+            return _BottomPicker(
+              child: CupertinoDatePicker(
+                backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
                 mode: CupertinoDatePickerMode.dateAndTime,
                 initialDateTime: dateTime,
                 onDateTimeChanged: (DateTime newDateTime) {
@@ -227,12 +251,12 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
           },
         );
       },
-      child: _buildMenu(
-        <Widget>[
+      child: _Menu(
+        children: <Widget>[
           const Text('Date and Time'),
           Text(
             DateFormat.yMMMd().add_jm().format(dateTime),
-            style: const TextStyle(color: CupertinoColors.inactiveGray),
+            style: TextStyle(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context)),
           ),
         ],
       ),
@@ -252,22 +276,15 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
       ),
       child: DefaultTextStyle(
         style: CupertinoTheme.of(context).textTheme.textStyle,
-        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)),
-              _buildColorPicker(context),
-              _buildCountdownTimerPicker(context),
-              _buildDatePicker(context),
-              _buildTimePicker(context),
-              _buildDateAndTimePicker(context),
-            ],
-          ),
+        child: ListView(
+          children: <Widget>[
+            const Padding(padding: EdgeInsets.only(top: 32.0)),
+            _buildColorPicker(context),
+            _buildCountdownTimerPicker(context),
+            _buildDatePicker(context),
+            _buildTimePicker(context),
+            _buildDateAndTimePicker(context),
+          ],
         ),
       ),
     );