Gallery demos: reordered and retitled (#17220) (#17273)

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

@@ -177,6 +177,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),
@@ -202,19 +221,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),

examples/flutter_gallery/test_driver/transitions_perf_test.dart

@@ -21,28 +21,32 @@ const FileSystem _fs = const LocalFileSystem();
 // --trace-startup, as we do in this test, the VM stores trace events in an
 // endless buffer instead of a ring buffer.
 //
-// These names must match GalleryItem titles from  kAllGalleryItems
-// in examples/flutter_gallery/lib/gallery.item.dart
+// These names must match GalleryItem titles from kAllGalleryDemos
+// in examples/flutter_gallery/lib/gallery/demos.dart
 const List<String> kProfiledDemos = const <String>[
-  'Shrine',
-  'Contact profile',
-  'Animation',
-  'Bottom navigation',
-  'Buttons',
-  'Cards',
-  'Chips',
-  'Date and time pickers',
-  'Dialog',
+  'Shrine@Vignettes',
+  'Contact profile@Vignettes',
+  'Animation@Vignettes',
+  'Bottom navigation@Material',
+  'Buttons@Material',
+  'Cards@Material',
+  'Chips@Material',
+  'Dialogs@Material',
+  'Pickers@Material',
 ];
 
 // Demos that will be backed out of within FlutterDriver.runUnsynchronized();
 //
-// These names must match GalleryItem titles from  kAllGalleryItems
-// in examples/flutter_gallery/lib/gallery.item.dart
+// These names must match GalleryItem titles from kAllGalleryDemos
+// in examples/flutter_gallery/lib/gallery/demos.dart
 const List<String> kUnsynchronizedDemos = const <String>[
-  'Progress indicators',
-  'Activity Indicator',
-  'Video',
+  'Progress indicators@Material',
+  'Activity Indicator@Cupertino',
+  'Video@Media',
+];
+
+const List<String> kSkippedDemos = const <String>[
+  'Pull to refresh@Cupertino', // The back button lacks a tooltip.
 ];
 
 // All of the gallery demos, identified as "title@category".
@@ -124,9 +128,12 @@ Future<Null> runDemos(List<String> demos, FlutterDriver driver) async {
   String currentDemoCategory;
 
   for (String demo in demos) {
-    final String demoAtCategory = _allDemos.firstWhere((String s) => s.startsWith(demo));
-    final String demoCategory = demoAtCategory.substring(demoAtCategory.indexOf('@') + 1);
-    print('> $demoAtCategory');
+    if (kSkippedDemos.contains(demo))
+      continue;
+
+    final String demoName = demo.substring(0, demo.indexOf('@'));
+    final String demoCategory = demo.substring(demo.indexOf('@') + 1);
+    print('> $demo');
 
     if (currentDemoCategory == null) {
       await driver.tap(find.text(demoCategory));
@@ -138,7 +145,7 @@ Future<Null> runDemos(List<String> demos, FlutterDriver driver) async {
     }
     currentDemoCategory = demoCategory;
 
-    final SerializableFinder demoItem = find.text(demo);
+    final SerializableFinder demoItem = find.text(demoName);
     await driver.scrollUntilVisible(demoList, demoItem, dyScroll: -48.0,  alignment: 0.5);
 
     for (int i = 0; i < 2; i += 1) {
@@ -204,8 +211,7 @@ void main([List<String> args = const <String>[]]) {
       await saveDurationsHistogram(timeline.json['traceEvents'], histogramPath);
 
       // Execute the remaining tests.
-      final List<String> allDemoNames = _allDemos.map((String s) => s.substring(0, s.indexOf('@')));
-      final Set<String> unprofiledDemos = new Set<String>.from(allDemoNames)..removeAll(kProfiledDemos);
+      final Set<String> unprofiledDemos = new Set<String>.from(_allDemos)..removeAll(kProfiledDemos);
       await runDemos(unprofiledDemos.toList(), driver);
 
     }, timeout: const Timeout(const Duration(minutes: 5)));