Gallery cosmetic updates (#17310)

examples/flutter_gallery/lib/demo/material/bottom_app_bar_demo.dart

@@ -11,6 +11,10 @@ class BottomAppBarDemo extends StatefulWidget {
   State createState() => new _BottomAppBarDemoState();
 }
 
+// Flutter generally frowns upon abbrevation however this class uses two
+// abbrevations extensively: "fab" for floating action button, and "bab"
+// for bottom application bar.
+
 class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
   static final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
 
@@ -138,6 +142,16 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
       appBar: new AppBar(
         title: const Text('Bottom app bar'),
         elevation: 0.0,
+        actions: <Widget>[
+          new IconButton(
+            icon: const Icon(Icons.sentiment_very_satisfied),
+            onPressed: () {
+              setState(() {
+                _fabShape = _fabShape == kCircularFab ? kDiamondFab : kCircularFab;
+              });
+            },
+          ),
+        ],
       ),
       body: new ListView(
         padding: const EdgeInsets.only(bottom: 88.0),
@@ -155,7 +169,7 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
           new _RadioItem<bool>(kShowNotchFalse, _showNotch, _onShowNotchChanged),
 
           const Divider(),
-          const _Heading('Notch'),
+          const _Heading('FAB Position'),
 
           new _RadioItem<FloatingActionButtonLocation>(kFabEndDocked, _fabLocation, _onFabLocationChanged),
           new _RadioItem<FloatingActionButtonLocation>(kFabCenterDocked, _fabLocation, _onFabLocationChanged),
@@ -214,13 +228,21 @@ class _RadioItem<T> extends StatelessWidget {
             ),
             new Expanded(
               child: new Semantics(
+                container: true,
+                button: true,
                 label: value.label,
+                child: new GestureDetector(
+                  behavior: HitTestBehavior.opaque,
+                  onTap: () {
+                    onChanged(value);
+                  },
                   child: new Text(
                     value.title,
                     style: theme.textTheme.subhead,
                   ),
                 ),
               ),
+            ),
           ]
         ),
       ),
@@ -252,7 +274,7 @@ class _ColorsItem extends StatelessWidget {
             fillColor: color,
             shape: new CircleBorder(
               side: new BorderSide(
-                color: color == null ? Colors.black : const Color(0xFFD5D7DA),
+                color: color == selectedColor ? Colors.black : const Color(0xFFD5D7DA),
                 width: 2.0,
               ),
             ),
@@ -339,9 +361,7 @@ class _DemoBottomAppBar extends StatelessWidget {
     return new BottomAppBar(
       color: color,
       hasNotch: showNotch,
-      child: new Row(
-        children: rowContents,
-      ),
+      child: new Row(children: rowContents),
     );
   }
 }

examples/flutter_gallery/lib/gallery/demos.dart

@@ -32,7 +32,7 @@ class GalleryDemoCategory {
 }
 
 const GalleryDemoCategory _kDemos = const GalleryDemoCategory._(
-  name: 'Vignettes',
+  name: 'Studies',
   icon: GalleryIcons.animation,
 );
 

examples/flutter_gallery/lib/gallery/home.dart

@@ -122,7 +122,6 @@ class _CategoriesPage extends StatelessWidget {
           // LayoutBuilder.
           return new RepaintBoundary(
             child: new Column(
-              mainAxisAlignment: MainAxisAlignment.center,
               mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: new List<Widget>.generate(rowCount, (int rowIndex) {
@@ -289,11 +288,21 @@ class _GalleryHomeState extends State<GalleryHome> with SingleTickerProviderStat
     super.dispose();
   }
 
+  static Widget _animatedSwitcherLayoutBuilder(List<Widget> children) {
+    return new Stack(
+      children: children,
+      alignment: Alignment.topLeft,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final ThemeData theme = Theme.of(context);
     final bool isDark = theme.brightness == Brightness.dark;
 
+    const Curve switchOutCurve = const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn);
+    const Curve switchInCurve = const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn);
+
     Widget home = new Scaffold(
       key: _scaffoldKey,
       backgroundColor: isDark ? _kFlutterBlue : theme.primaryColor,
@@ -313,6 +322,9 @@ class _GalleryHomeState extends State<GalleryHome> with SingleTickerProviderStat
             backLayer: widget.optionsPage,
             frontAction: new AnimatedSwitcher(
               duration: _kFrontLayerSwitchDuration,
+              switchOutCurve: switchOutCurve,
+              switchInCurve: switchInCurve,
+              layoutBuilder: _animatedSwitcherLayoutBuilder,
               child: _category == null
                 ? const _FlutterLogo()
                 : new IconButton(
@@ -330,6 +342,9 @@ class _GalleryHomeState extends State<GalleryHome> with SingleTickerProviderStat
             frontHeading: new Container(height: 24.0),
             frontLayer: new AnimatedSwitcher(
               duration: _kFrontLayerSwitchDuration,
+              switchOutCurve: switchOutCurve,
+              switchInCurve: switchInCurve,
+              layoutBuilder: _animatedSwitcherLayoutBuilder,
               child: _category != null
                 ? new _DemosPage(_category)
                 : new _CategoriesPage(

examples/flutter_gallery/test/pesto_test.dart

@@ -26,7 +26,7 @@ void main() {
     await tester.pump(); // see https://github.com/flutter/flutter/issues/1865
     await tester.pump(); // triggers a frame
 
-    await tester.tap(find.text('Vignettes'));
+    await tester.tap(find.text('Studies'));
     await tester.pumpAndSettle();
 
     await tester.tap(find.text('Pesto'));
@@ -47,7 +47,7 @@ void main() {
     await tester.pump(); // see https://github.com/flutter/flutter/issues/1865
     await tester.pump(); // triggers a frame
 
-    await tester.tap(find.text('Vignettes'));
+    await tester.tap(find.text('Studies'));
     await tester.pumpAndSettle();
 
     await tester.tap(find.text('Pesto'));

examples/flutter_gallery/test/simple_smoke_test.dart

@@ -31,8 +31,8 @@ void main() {
     await tester.tap(showOptionsPageButton);
     await tester.pumpAndSettle();
 
-    // Show the vignettes
-    await tester.tap(find.text('Vignettes'));
+    // Show the studies (aka "vignettes", aka "demos")
+    await tester.tap(find.text('Studies'));
     await tester.pumpAndSettle();
 
     // Show the Contact profile demo and scroll it upwards

examples/flutter_gallery/test/update_test.dart

@@ -26,7 +26,7 @@ void main() {
     await tester.tap(find.text('NO THANKS'));
     await tester.pump();
 
-    await tester.tap(find.text('Vignettes'));
+    await tester.tap(find.text('Studies'));
     await tester.pump(); // Launch
     await tester.pump(const Duration(seconds: 1)); // transition is complete
 

examples/flutter_gallery/test_driver/transitions_perf_test.dart

@@ -24,9 +24,9 @@ const FileSystem _fs = const LocalFileSystem();
 // These names must match GalleryItem titles from kAllGalleryDemos
 // in examples/flutter_gallery/lib/gallery/demos.dart
 const List<String> kProfiledDemos = const <String>[
-  'Shrine@Vignettes',
-  'Contact profile@Vignettes',
-  'Animation@Vignettes',
+  'Shrine@Studies',
+  'Contact profile@Studies',
+  'Animation@Studies',
   'Bottom navigation@Material',
   'Buttons@Material',
   'Cards@Material',