Gallery demo tweaks (#5116)

examples/flutter_gallery/lib/demo/buttons_demo.dart

@@ -7,14 +7,12 @@ import 'package:flutter/material.dart';
 import '../gallery/demo.dart';
 
 const String _raisedText =
-  "# Raised buttons\n"
   "Raised buttons add dimension to mostly flat layouts. They emphasize "
   "functions on busy or wide spaces.";
 
 const String _raisedCode = 'buttons_raised';
 
 const String _flatText =
-  "# Flat buttons\n"
   "A flat button displays an ink splash on press "
   "but does not lift. Use flat buttons on toolbars, in dialogs and "
   "inline with padding";
@@ -22,7 +20,6 @@ const String _flatText =
 const String _flatCode = 'buttons_flat';
 
 const String _dropdownText =
-  "# Dropdown buttons\n"
   "A dropdown button displays a menu that's used to select a value from a "
   "small set of values. The button displays the current value and a down "
   "arrow.";
@@ -36,7 +33,6 @@ const String _iconText =
 const String _iconCode = 'buttons_icon';
 
 const String _actionText =
-  "# Floating action buttons\n"
   "Floating action buttons are used for a promoted action. They are "
   "distinguished by a circled icon floating above the UI and can have motion "
   "behaviors that include morphing, launching, and a transferring anchor "

examples/flutter_gallery/lib/demo/modal_bottom_sheet_demo.dart

@@ -4,11 +4,6 @@
 
 import 'package:flutter/material.dart';
 
-final TextStyle _kTextStyle = new TextStyle(
-  color: Colors.indigo[400],
-  fontSize: 24.0
-);
-
 class ModalBottomSheetDemo extends StatelessWidget {
   static const String routeName = '/modal-bottom-sheet';
 
@@ -25,8 +20,11 @@ class ModalBottomSheetDemo extends StatelessWidget {
                 child: new Padding(
                   padding: const EdgeInsets.all(32.0),
                   child: new Text('This is the modal bottom sheet. Click anywhere to dismiss.',
-                    style: _kTextStyle,
-                    textAlign: TextAlign.center
+                    textAlign: TextAlign.center,
+                    style: new TextStyle(
+                      color: Theme.of(context).accentColor,
+                      fontSize: 24.0
+                    )
                   )
                 )
               );

examples/flutter_gallery/lib/demo/persistent_bottom_sheet_demo.dart

@@ -4,11 +4,6 @@
 
 import 'package:flutter/material.dart';
 
-final TextStyle _kTextStyle = new TextStyle(
-  color: Colors.indigo[400],
-  fontSize: 24.0
-);
-
 class PersistentBottomSheetDemo extends StatefulWidget {
   static const String routeName = '/persistent-bottom-sheet';
 
@@ -33,15 +28,19 @@ class _PersistentBottomSheetDemoState extends State<PersistentBottomSheetDemo> {
       _showBottomSheetCallback = null;
     });
     _scaffoldKey.currentState.showBottomSheet/*<Null>*/((BuildContext context) {
+      final ThemeData themeData = Theme.of(context);
       return new Container(
         decoration: new BoxDecoration(
-          border: new Border(top: new BorderSide(color: Colors.black26))
+          border: new Border(top: new BorderSide(color: themeData.disabledColor))
         ),
         child: new Padding(
           padding: const EdgeInsets.all(32.0),
           child: new Text('This is a Material persistent bottom sheet. Drag downwards to dismiss it.',
-            style: _kTextStyle,
-            textAlign: TextAlign.center
+            textAlign: TextAlign.center,
+            style: new TextStyle(
+              color: themeData.accentColor,
+              fontSize: 24.0
+            )
           )
         )
       );

examples/flutter_gallery/lib/demo/pesto_demo.dart

@@ -7,7 +7,7 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 
 const String _kUserName = 'Jonathan';
-const String _kUserEmail = 'heyfromjonathan@gmail.com';
+const String _kUserEmail = 'jonathan@example.com';
 const String _kUserImage = 'packages/flutter_gallery_assets/pesto/avatar.jpg';
 // Map of logo images keyed by the minimum height their container needs to be.
 final Map<double, String> _kLogoImages = <double, String>{

examples/flutter_gallery/lib/demo/progress_indicator_demo.dart

@@ -75,11 +75,6 @@ class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo> {
             height: 20.0,
             child: new CircularProgressIndicator(value: _animation.value)
         ),
-        new SizedBox(
-          width: 50.0,
-          height: 30.0,
-          child: new CircularProgressIndicator(value: _animation.value)
-        ),
         new Text('${(_animation.value * 100.0).toStringAsFixed(1)}%${ _controller.isAnimating ? "" : " (paused)" }')
     ];
     return new Column(

examples/flutter_gallery/lib/demo/selection_controls_demo.dart

@@ -7,13 +7,11 @@ import 'package:flutter/material.dart';
 import '../gallery/demo.dart';
 
 const String _checkboxText =
-  "# Checkboxes\n"
   "Checkboxes allow the user to select multiple options from a set.";
 
 const String _checkboxCode = 'selectioncontrols_checkbox';
 
 const String _radioText =
-  "# Radio buttons\n"
   "Radio buttons allow the user to select one option from a set. Use radio "
   "buttons for exclusive selection if you think that the user needs to see "
   "all available options side-by-side.";
@@ -21,7 +19,6 @@ const String _radioText =
 const String _radioCode = 'selectioncontrols_radio';
 
 const String _switchText =
-  "# Switches\n"
   "On/off switches toggle the state of a single settings option. The option "
   "that the switch controls, as well as the state it’s in, should be made "
   "clear from the corresponding inline label.";

examples/flutter_gallery/lib/demo/tabs_demo.dart

@@ -9,7 +9,6 @@ import 'package:flutter/material.dart';
 
 class _Page {
   _Page({ this.label });
-  final GlobalKey<ScrollableState<Scrollable>> key = new GlobalKey<ScrollableState<Scrollable>>();
   final String label;
   String get id => label[0];
 }
@@ -115,36 +114,14 @@ class _CardDataItem extends StatelessWidget {
   }
 }
 
-class TabsDemo extends StatefulWidget {
+class TabsDemo extends StatelessWidget {
   static const String routeName = '/tabs';
 
-  @override
-  TabsDemoState createState() => new TabsDemoState();
-}
-
-class TabsDemoState extends State<TabsDemo> {
-  _Page _selectedPage;
-  double _scrollOffset = 0.0;
-
-  @override
-  void initState() {
-    super.initState();
-    _selectedPage = _allPages.keys.first;
-  }
-
   @override
   Widget build(BuildContext context) {
-    final double statusBarHeight = MediaQuery.of(context).padding.top;
     return new TabBarSelection<_Page>(
       values: _allPages.keys.toList(),
-      onChanged: (_Page value) {
-        setState(() {
-          _selectedPage = value;
-          _selectedPage.key.currentState.scrollTo(_scrollOffset);
-        });
-      },
       child: new Scaffold(
-        appBarBehavior: AppBarBehavior.under,
         appBar: new AppBar(
           title: new Text('Tabs and scrolling'),
           bottom: new TabBar<_Page>(
@@ -155,17 +132,15 @@ class TabsDemoState extends State<TabsDemo> {
         ),
         body: new TabBarView<_Page>(
           children: _allPages.keys.map((_Page page) {
-            return new Padding(
-              padding: const EdgeInsets.all(16.0),
-              child: new ScrollableList(
-                padding: new EdgeInsets.only(top: kTextTabBarHeight + kToolBarHeight + statusBarHeight),
-                itemExtent: _CardDataItem.height,
-                scrollableKey: page.key,
-                onScroll: (double value) { _scrollOffset = value; },
-                children: _allPages[page].map((_CardData data) {
-                  return new _CardDataItem(page: page, data: data);
-                }).toList()
-              )
+            return new ScrollableList(
+              padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
+              itemExtent: _CardDataItem.height,
+              children: _allPages[page].map((_CardData data) {
+                return new Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 8.0),
+                  child: new _CardDataItem(page: page, data: data)
+                );
+              }).toList()
             );
           }).toList()
         )

examples/flutter_gallery/lib/demo/two_level_list_demo.dart

@@ -17,14 +17,15 @@ class TwoLevelListDemo extends StatelessWidget {
           new TwoLevelListItem(title: new Text('Top')),
           new TwoLevelSublist(
              title: new Text('Sublist'),
-              children: <Widget>[
-                new TwoLevelListItem(title: new Text('One')),
-                new TwoLevelListItem(title: new Text('Two')),
-                // https://en.wikipedia.org/wiki/Free_Four
-                new TwoLevelListItem(title: new Text('Free')),
-                new TwoLevelListItem(title: new Text('Four'))
-              ]
-           ),
+             backgroundColor: Theme.of(context).accentColor.withOpacity(0.025),
+             children: <Widget>[
+               new TwoLevelListItem(title: new Text('One')),
+               new TwoLevelListItem(title: new Text('Two')),
+               // https://en.wikipedia.org/wiki/Free_Four
+               new TwoLevelListItem(title: new Text('Free')),
+               new TwoLevelListItem(title: new Text('Four'))
+             ]
+          ),
            new TwoLevelListItem(title: new Text('Bottom'))
         ]
       )

examples/flutter_gallery/lib/gallery/demo.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import 'package:flutter/material.dart';
-import 'package:flutter_markdown/flutter_markdown.dart';
 
 import 'example_code_parser.dart';
 import 'syntax_highlighter.dart';
@@ -88,7 +87,9 @@ class TabbedComponentDemoScaffold extends StatelessWidget {
               children: <Widget>[
                 new Padding(
                   padding: const EdgeInsets.all(16.0),
-                  child: new MarkdownBody(data: demo.description)
+                  child: new Text(demo.description,
+                    style: Theme.of(context).textTheme.subhead
+                  )
                 ),
                 new Flexible(child: demo.widget)
               ]

examples/flutter_gallery/lib/gallery/home.dart

@@ -61,7 +61,7 @@ class GalleryHomeState extends State<GalleryHome> {
     _listItems.add(new SizedBox(height: _kFlexibleSpaceMaxHeight + statusBarHeight));
 
     final ThemeData themeData = Theme.of(context);
-    final TextStyle headerStyle = themeData.textTheme.body2.copyWith(color: themeData.primaryColor);
+    final TextStyle headerStyle = themeData.textTheme.body2.copyWith(color: themeData.accentColor);
     String category;
     for (GalleryItem galleryItem in kAllGalleryItems) {
       if (category != galleryItem.category) {

packages/flutter/lib/src/material/two_level_list.dart

@@ -57,6 +57,7 @@ class TwoLevelSublist extends StatefulWidget {
     Key key,
     this.leading,
     this.title,
+    this.backgroundColor,
     this.onOpenChanged,
     this.children
   }) : super(key: key);
@@ -65,6 +66,7 @@ class TwoLevelSublist extends StatefulWidget {
   final Widget title;
   final ValueChanged<bool> onOpenChanged;
   final List<Widget> children;
+  final Color backgroundColor;
 
   @override
   _TwoLevelSublistState createState() => new _TwoLevelSublistState();
@@ -77,6 +79,7 @@ class _TwoLevelSublistState extends State<TwoLevelSublist> {
   ColorTween _borderColor;
   ColorTween _headerColor;
   ColorTween _iconColor;
+  ColorTween _backgroundColor;
   Animation<double> _iconTurns;
 
   bool _isExpanded = false;
@@ -91,6 +94,7 @@ class _TwoLevelSublistState extends State<TwoLevelSublist> {
     _headerColor = new ColorTween();
     _iconColor = new ColorTween();
     _iconTurns = new Tween<double>(begin: 0.0, end: 0.5).animate(_easeInAnimation);
+    _backgroundColor = new ColorTween();
 
     _isExpanded = PageStorage.of(context)?.readState(context) ?? false;
     if (_isExpanded)
@@ -119,6 +123,7 @@ class _TwoLevelSublistState extends State<TwoLevelSublist> {
   Widget buildList(BuildContext context, Widget child) {
     return new Container(
       decoration: new BoxDecoration(
+        backgroundColor: _backgroundColor.evaluate(_easeOutAnimation),
         border: new Border(
           top: new BorderSide(color: _borderColor.evaluate(_easeOutAnimation)),
           bottom: new BorderSide(color: _borderColor.evaluate(_easeOutAnimation))
@@ -163,6 +168,9 @@ class _TwoLevelSublistState extends State<TwoLevelSublist> {
     _iconColor
       ..begin = theme.unselectedWidgetColor
       ..end = theme.accentColor;
+    _backgroundColor
+      ..begin = Colors.transparent
+      ..end = config.backgroundColor ?? Colors.transparent;
 
     return new AnimatedBuilder(
         animation: _controller.view,