From eee986b076182d116fabaae082c3bc7714ecdefd Mon Sep 17 00:00:00 2001 From: Hans Muller Date: Mon, 7 May 2018 09:25:50 -0700 Subject: [PATCH] Gallery cosmetic updates (#17310) --- .../demo/material/bottom_app_bar_demo.dart | 36 ++++++++++++++----- .../flutter_gallery/lib/gallery/demos.dart | 2 +- .../flutter_gallery/lib/gallery/home.dart | 17 ++++++++- examples/flutter_gallery/test/pesto_test.dart | 4 +-- .../test/simple_smoke_test.dart | 4 +-- .../flutter_gallery/test/update_test.dart | 2 +- .../test_driver/transitions_perf_test.dart | 6 ++-- 7 files changed, 53 insertions(+), 18 deletions(-) diff --git a/examples/flutter_gallery/lib/demo/material/bottom_app_bar_demo.dart b/examples/flutter_gallery/lib/demo/material/bottom_app_bar_demo.dart index fd95019e203..e2c9d1c168e 100644 --- a/examples/flutter_gallery/lib/demo/material/bottom_app_bar_demo.dart +++ b/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 { static final GlobalKey _scaffoldKey = new GlobalKey(); @@ -138,6 +142,16 @@ class _BottomAppBarDemoState extends State { appBar: new AppBar( title: const Text('Bottom app bar'), elevation: 0.0, + actions: [ + 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 { new _RadioItem(kShowNotchFalse, _showNotch, _onShowNotchChanged), const Divider(), - const _Heading('Notch'), + const _Heading('FAB Position'), new _RadioItem(kFabEndDocked, _fabLocation, _onFabLocationChanged), new _RadioItem(kFabCenterDocked, _fabLocation, _onFabLocationChanged), @@ -214,10 +228,18 @@ class _RadioItem extends StatelessWidget { ), new Expanded( child: new Semantics( + container: true, + button: true, label: value.label, - child: new Text( - value.title, - style: theme.textTheme.subhead, + 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), ); } } diff --git a/examples/flutter_gallery/lib/gallery/demos.dart b/examples/flutter_gallery/lib/gallery/demos.dart index 38458f7abae..720dc702a72 100644 --- a/examples/flutter_gallery/lib/gallery/demos.dart +++ b/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, ); diff --git a/examples/flutter_gallery/lib/gallery/home.dart b/examples/flutter_gallery/lib/gallery/home.dart index c487a5c76bb..75f17e6fff9 100644 --- a/examples/flutter_gallery/lib/gallery/home.dart +++ b/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.generate(rowCount, (int rowIndex) { @@ -289,11 +288,21 @@ class _GalleryHomeState extends State with SingleTickerProviderStat super.dispose(); } + static Widget _animatedSwitcherLayoutBuilder(List 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 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 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( diff --git a/examples/flutter_gallery/test/pesto_test.dart b/examples/flutter_gallery/test/pesto_test.dart index 7d6d555aa7d..1c87223a2ea 100644 --- a/examples/flutter_gallery/test/pesto_test.dart +++ b/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')); diff --git a/examples/flutter_gallery/test/simple_smoke_test.dart b/examples/flutter_gallery/test/simple_smoke_test.dart index 553cdacb34f..92488aa8cfd 100644 --- a/examples/flutter_gallery/test/simple_smoke_test.dart +++ b/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 diff --git a/examples/flutter_gallery/test/update_test.dart b/examples/flutter_gallery/test/update_test.dart index f757a970019..6a8bb06de08 100644 --- a/examples/flutter_gallery/test/update_test.dart +++ b/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 diff --git a/examples/flutter_gallery/test_driver/transitions_perf_test.dart b/examples/flutter_gallery/test_driver/transitions_perf_test.dart index 9106f02e262..03ddb1f3752 100644 --- a/examples/flutter_gallery/test_driver/transitions_perf_test.dart +++ b/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 kProfiledDemos = const [ - 'Shrine@Vignettes', - 'Contact profile@Vignettes', - 'Animation@Vignettes', + 'Shrine@Studies', + 'Contact profile@Studies', + 'Animation@Studies', 'Bottom navigation@Material', 'Buttons@Material', 'Cards@Material',