Gallery demos: reordered and retitled (#17220)

examples/flutter_gallery/lib/gallery/demos.dart

@@ -153,17 +153,41 @@ List<GalleryDemo> _buildGalleryDemos() {
       routeName: BottomNavigationDemo.routeName,
       buildRoute: (BuildContext context) => new BottomNavigationDemo(),
     ),
+    new GalleryDemo(
+      title: 'Bottom sheet: Modal',
+      subtitle: 'A dismissable bottom sheet',
+      icon: GalleryIcons.bottom_sheets,
+      category: _kMaterialComponents,
+      routeName: ModalBottomSheetDemo.routeName,
+      buildRoute: (BuildContext context) => new ModalBottomSheetDemo(),
+    ),
+    new GalleryDemo(
+      title: 'Bottom sheet: Persistent',
+      subtitle: 'A bottom sheet that sticks around',
+      icon: GalleryIcons.bottom_sheet_persistent,
+      category: _kMaterialComponents,
+      routeName: PersistentBottomSheetDemo.routeName,
+      buildRoute: (BuildContext context) => new PersistentBottomSheetDemo(),
+    ),
     new GalleryDemo(
       title: 'Buttons',
-      subtitle: 'All kinds: flat, raised, dropdown, icon, etc',
+      subtitle: 'Flat, raised, dropdown, and more',
       icon: GalleryIcons.generic_buttons,
       category: _kMaterialComponents,
       routeName: ButtonsDemo.routeName,
       buildRoute: (BuildContext context) => new ButtonsDemo(),
     ),
+    new GalleryDemo(
+      title: 'Buttons: Floating Action Button',
+      subtitle: 'FAB with transitions',
+      icon: GalleryIcons.buttons,
+      category: _kMaterialComponents,
+      routeName: TabsFabDemo.routeName,
+      buildRoute: (BuildContext context) => new TabsFabDemo(),
+    ),
     new GalleryDemo(
       title: 'Cards',
-      subtitle: 'Material with rounded corners and a drop shadow',
+      subtitle: 'Baseline cards with rounded corners',
       icon: GalleryIcons.cards,
       category: _kMaterialComponents,
       routeName: CardsDemo.routeName,
@@ -171,7 +195,7 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Chips',
-      subtitle: 'Label with an optional delete button and avatar',
+      subtitle: 'Labeled with delete buttons and avatars',
       icon: GalleryIcons.chips,
       category: _kMaterialComponents,
       routeName: ChipDemo.routeName,
@@ -186,32 +210,16 @@ List<GalleryDemo> _buildGalleryDemos() {
       buildRoute: (BuildContext context) => new DataTableDemo(),
     ),
     new GalleryDemo(
-      title: 'Date and time pickers',
-      subtitle: 'Date and time selection widgets',
-      icon: GalleryIcons.event,
-      category: _kMaterialComponents,
-      routeName: DateAndTimePickerDemo.routeName,
-      buildRoute: (BuildContext context) => new DateAndTimePickerDemo(),
-    ),
-    new GalleryDemo(
-      title: 'Dialog',
-      subtitle: 'All kinds: simple, alert, fullscreen, etc',
+      title: 'Dialogs',
+      subtitle: 'Simple, alert, and fullscreen',
       icon: GalleryIcons.dialogs,
       category: _kMaterialComponents,
       routeName: DialogDemo.routeName,
       buildRoute: (BuildContext context) => new DialogDemo(),
     ),
-    new GalleryDemo(
-      title: 'Drawer',
-      subtitle: 'Navigation drawer with a standard header',
-      icon: GalleryIcons.menu,
-      category: _kMaterialComponents,
-      routeName: DrawerDemo.routeName,
-      buildRoute: (BuildContext context) => new DrawerDemo(),
-    ),
     new GalleryDemo(
       title: 'Expand/collapse list control',
-      subtitle: 'List with one level of sublists',
+      subtitle: 'A list with one sub-list level',
       icon: GalleryIcons.expand_all,
       category: _kMaterialComponents,
       routeName: TwoLevelListDemo.routeName,
@@ -225,14 +233,6 @@ List<GalleryDemo> _buildGalleryDemos() {
       routeName: ExpansionPanelsDemo.routeName,
       buildRoute: (BuildContext context) => new ExpansionPanelsDemo(),
     ),
-    new GalleryDemo(
-      title: 'Floating action button',
-      subtitle: 'Action buttons with transitions',
-      icon: GalleryIcons.buttons,
-      category: _kMaterialComponents,
-      routeName: TabsFabDemo.routeName,
-      buildRoute: (BuildContext context) => new TabsFabDemo(),
-    ),
     new GalleryDemo(
       title: 'Grid',
       subtitle: 'Row and column layout',
@@ -243,28 +243,28 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Icons',
-      subtitle: 'Enabled and disabled icons with varying opacity',
+      subtitle: 'Enabled and disabled icons with opacity',
       icon: GalleryIcons.sentiment_very_satisfied,
       category: _kMaterialComponents,
       routeName: IconsDemo.routeName,
       buildRoute: (BuildContext context) => new IconsDemo(),
     ),
     new GalleryDemo(
-      title: 'Leave-behind list items',
+      title: 'Lists',
+      subtitle: 'Scrolling list layouts',
+      icon: GalleryIcons.list_alt,
+      category: _kMaterialComponents,
+      routeName: ListDemo.routeName,
+      buildRoute: (BuildContext context) => const ListDemo(),
+    ),
+    new GalleryDemo(
+      title: 'Lists: leave-behind list items',
       subtitle: 'List items with hidden actions',
       icon: GalleryIcons.lists_leave_behind,
       category: _kMaterialComponents,
       routeName: LeaveBehindDemo.routeName,
       buildRoute: (BuildContext context) => const LeaveBehindDemo(),
     ),
-    new GalleryDemo(
-      title: 'List',
-      subtitle: 'Layout variations for scrollable lists',
-      icon: GalleryIcons.list_alt,
-      category: _kMaterialComponents,
-      routeName: ListDemo.routeName,
-      buildRoute: (BuildContext context) => const ListDemo(),
-    ),
     new GalleryDemo(
       title: 'Menus',
       subtitle: 'Menu buttons and simple menus',
@@ -274,15 +274,15 @@ List<GalleryDemo> _buildGalleryDemos() {
       buildRoute: (BuildContext context) => const MenuDemo(),
     ),
     new GalleryDemo(
-      title: 'Modal bottom sheet',
-      subtitle: 'Modal sheet that slides up from the bottom',
-      icon: GalleryIcons.bottom_sheets,
+      title: 'Navigation drawer',
+      subtitle: 'Navigation drawer with standard header',
+      icon: GalleryIcons.menu,
       category: _kMaterialComponents,
-      routeName: ModalBottomSheetDemo.routeName,
-      buildRoute: (BuildContext context) => new ModalBottomSheetDemo(),
+      routeName: DrawerDemo.routeName,
+      buildRoute: (BuildContext context) => new DrawerDemo(),
     ),
     new GalleryDemo(
-      title: 'Page selector',
+      title: 'Pagination',
       subtitle: 'PageView with indicator',
       icon: GalleryIcons.page_control,
       category: _kMaterialComponents,
@@ -290,16 +290,16 @@ List<GalleryDemo> _buildGalleryDemos() {
       buildRoute: (BuildContext context) => new PageSelectorDemo(),
     ),
     new GalleryDemo(
-      title: 'Persistent bottom sheet',
-      subtitle: 'Sheet that slides up from the bottom',
-      icon: GalleryIcons.bottom_sheet_persistent,
+      title: 'Pickers',
+      subtitle: 'Date and time selection widgets',
+      icon: GalleryIcons.event,
       category: _kMaterialComponents,
-      routeName: PersistentBottomSheetDemo.routeName,
-      buildRoute: (BuildContext context) => new PersistentBottomSheetDemo(),
+      routeName: DateAndTimePickerDemo.routeName,
+      buildRoute: (BuildContext context) => new DateAndTimePickerDemo(),
     ),
     new GalleryDemo(
       title: 'Progress indicators',
-      subtitle: 'All kinds: linear, circular, indeterminate, etc',
+      subtitle: 'Linear, circular, indeterminate',
       icon: GalleryIcons.progress_activity,
       category: _kMaterialComponents,
       routeName: ProgressIndicatorDemo.routeName,
@@ -313,14 +313,6 @@ List<GalleryDemo> _buildGalleryDemos() {
       routeName: OverscrollDemo.routeName,
       buildRoute: (BuildContext context) => const OverscrollDemo(),
     ),
-    new GalleryDemo(
-      title: 'Scrollable tabs',
-      subtitle: 'Tab bar that scrolls',
-      category: _kMaterialComponents,
-      icon: GalleryIcons.tabs,
-      routeName: ScrollableTabsDemo.routeName,
-      buildRoute: (BuildContext context) => new ScrollableTabsDemo(),
-    ),
     new GalleryDemo(
       title: 'Selection controls',
       subtitle: 'Checkboxes, radio buttons, and switches',
@@ -331,7 +323,7 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Sliders',
-      subtitle: 'Widgets that select a value by dragging the slider thumb',
+      subtitle: 'Widgets for selecting a value by swiping',
       icon: GalleryIcons.sliders,
       category: _kMaterialComponents,
       routeName: SliderDemo.routeName,
@@ -339,7 +331,7 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Snackbar',
-      subtitle: 'Temporary message that appears at the bottom',
+      subtitle: 'Temporary messaging',
       icon: GalleryIcons.snackbar,
       category: _kMaterialComponents,
       routeName: SnackBarDemo.routeName,
@@ -353,6 +345,14 @@ List<GalleryDemo> _buildGalleryDemos() {
       routeName: TabsDemo.routeName,
       buildRoute: (BuildContext context) => new TabsDemo(),
     ),
+    new GalleryDemo(
+      title: 'Tabs: Scrolling',
+      subtitle: 'Tab bar that scrolls',
+      category: _kMaterialComponents,
+      icon: GalleryIcons.tabs,
+      routeName: ScrollableTabsDemo.routeName,
+      buildRoute: (BuildContext context) => new ScrollableTabsDemo(),
+    ),
     new GalleryDemo(
       title: 'Text fields',
       subtitle: 'Single line of editable text and numbers',
@@ -363,7 +363,7 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Tooltips',
-      subtitle: 'Short message displayed after a long-press',
+      subtitle: 'Short message displayed on long-press',
       icon: GalleryIcons.tooltip,
       category: _kMaterialComponents,
       routeName: TooltipDemo.routeName,
@@ -373,7 +373,6 @@ List<GalleryDemo> _buildGalleryDemos() {
     // Cupertino Components
     new GalleryDemo(
       title: 'Activity Indicator',
-      subtitle: 'Cupertino styled activity indicator',
       icon: GalleryIcons.cupertino_progress,
       category: _kCupertinoComponents,
       routeName: CupertinoProgressIndicatorDemo.routeName,
@@ -381,7 +380,6 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Buttons',
-      subtitle: 'Cupertino styled buttons',
       icon: GalleryIcons.generic_buttons,
       category: _kCupertinoComponents,
       routeName: CupertinoButtonsDemo.routeName,
@@ -389,7 +387,6 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Dialogs',
-      subtitle: 'Cupertino styled dialogs',
       icon: GalleryIcons.dialogs,
       category: _kCupertinoComponents,
       routeName: CupertinoDialogDemo.routeName,
@@ -397,7 +394,6 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Navigation',
-      subtitle: 'Cupertino styled navigation patterns',
       icon: GalleryIcons.bottom_navigation,
       category: _kCupertinoComponents,
       routeName: CupertinoNavigationDemo.routeName,
@@ -405,7 +401,6 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Pickers',
-      subtitle: 'Cupertino styled pickers',
       icon: GalleryIcons.event,
       category: _kCupertinoComponents,
       routeName: CupertinoPickerDemo.routeName,
@@ -413,7 +408,6 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Pull to refresh',
-      subtitle: 'Cupertino styled refresh controls',
       icon: GalleryIcons.cupertino_pull_to_refresh,
       category: _kCupertinoComponents,
       routeName: CupertinoRefreshControlDemo.routeName,
@@ -421,7 +415,6 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Sliders',
-      subtitle: 'Cupertino styled sliders',
       icon: GalleryIcons.sliders,
       category: _kCupertinoComponents,
       routeName: CupertinoSliderDemo.routeName,
@@ -429,7 +422,6 @@ List<GalleryDemo> _buildGalleryDemos() {
     ),
     new GalleryDemo(
       title: 'Switches',
-      subtitle: 'Cupertino styled switches',
       icon: GalleryIcons.cupertino_switch,
       category: _kCupertinoComponents,
       routeName: CupertinoSwitchDemo.routeName,

examples/flutter_gallery/lib/gallery/home.dart

@@ -176,6 +176,25 @@ class _DemoItem extends StatelessWidget {
     final bool isDark = theme.brightness == Brightness.dark;
     final double textScaleFactor = MediaQuery.of(context)?.textScaleFactor ?? 1.0;
 
+    final List<Widget> titleChildren = <Widget>[
+      new Text(
+        demo.title,
+        style: theme.textTheme.subhead.copyWith(
+          color: isDark ? Colors.white : const Color(0xFF202124),
+        ),
+      ),
+    ];
+    if (demo.subtitle != null) {
+      titleChildren.add(
+        new Text(
+          demo.subtitle,
+          style: theme.textTheme.body1.copyWith(
+            color: isDark ? Colors.white : const Color(0xFF60646B)
+          ),
+        ),
+      );
+    }
+
     return new RawMaterialButton(
       padding: EdgeInsets.zero,
       splashColor: theme.primaryColor.withOpacity(0.12),
@@ -201,19 +220,7 @@ class _DemoItem extends StatelessWidget {
               child: new Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: <Widget>[
-                  new Text(
-                    demo.title,
-                    style: theme.textTheme.subhead.copyWith(
-                      color: isDark ? Colors.white : const Color(0xFF202124),
-                    ),
-                  ),
-                  new Text(
-                    demo.subtitle,
-                    style: theme.textTheme.body1.copyWith(
-                      color: isDark ? Colors.white : const Color(0xFF60646B)),
-                  ),
-                ],
+                children: titleChildren,
               ),
             ),
             const SizedBox(width: 44.0),