Animate the "PREVIEW" banner into view (#5598)

examples/flutter_gallery/lib/gallery/app.dart

@@ -45,14 +45,6 @@ class GalleryAppState extends State<GalleryApp> {
 
   @override
   Widget build(BuildContext context) {
-    // In checked mode, show the default "slow mode" banner, otherwise show
-    // the "preview" banner.
-    bool showPreviewBanner = true;
-    assert(() {
-      showPreviewBanner = false;
-      return true;
-    });
-
     Widget home = new GalleryHome(
       useLightTheme: _useLightTheme,
       onThemeChanged: (bool value) {
@@ -74,18 +66,12 @@ class GalleryAppState extends State<GalleryApp> {
       },
     );
 
-    if (showPreviewBanner)
-      home = new Banner(
-        message: 'PREVIEW',
-        location: BannerLocation.topRight,
-        child: home,
-      );
-
-    if (config.updateUrlFetcher != null)
+    if (config.updateUrlFetcher != null) {
       home = new Updater(
         updateUrlFetcher: config.updateUrlFetcher,
         child: home,
       );
+    }
 
     return new MaterialApp(
       title: 'Flutter Gallery',

examples/flutter_gallery/lib/gallery/drawer.dart

@@ -113,11 +113,7 @@ class GalleryDrawer extends StatelessWidget {
     final TextStyle aboutTextStyle = themeData.textTheme.body2;
     final TextStyle linkStyle = themeData.textTheme.body2.copyWith(color: themeData.accentColor);
 
-    return new Drawer(
-      child: new Block(
-        children: <Widget>[
-          new GalleryDrawerHeader(light: useLightTheme),
-          new DrawerItem(
+    final Widget lightThemeItem = new DrawerItem(
       icon: new Icon(Icons.brightness_5),
       onPressed: () { onThemeChanged(true); },
       selected: useLightTheme,
@@ -131,8 +127,9 @@ class GalleryDrawer extends StatelessWidget {
           )
         ]
       )
-          ),
-          new DrawerItem(
+    );
+
+    final Widget darkThemeItem = new DrawerItem(
       icon: new Icon(Icons.brightness_7),
       onPressed: () { onThemeChanged(false); },
       selected: useLightTheme,
@@ -146,9 +143,9 @@ class GalleryDrawer extends StatelessWidget {
           )
         ]
       )
-          ),
-          new Divider(),
-          new DrawerItem(
+    );
+
+    final Widget animateSlowlyItem = new DrawerItem(
       icon: new Icon(Icons.hourglass_empty),
       selected: timeDilation != 1.0,
       onPressed: () { onTimeDilationChanged(timeDilation != 1.0 ? 1.0 : 20.0); },
@@ -161,22 +158,9 @@ class GalleryDrawer extends StatelessWidget {
           )
         ]
       )
-          ),
-          onShowPerformanceOverlayChanged == null ? new Container(height: 0.0) : new DrawerItem(
-            icon: new Icon(Icons.assessment),
-            onPressed: () { onShowPerformanceOverlayChanged(!showPerformanceOverlay); },
-            selected: showPerformanceOverlay,
-            child: new Row(
-              children: <Widget>[
-                new Flexible(child: new Text('Performance Overlay')),
-                new Checkbox(
-                  value: showPerformanceOverlay,
-                  onChanged: (bool value) { onShowPerformanceOverlayChanged(!showPerformanceOverlay); }
-                )
-              ]
-            )
-          ),
-          new DrawerItem(
+    );
+
+    final Widget fileAnIssueItem = new DrawerItem(
       icon: new Icon(Icons.report),
       child: new RichText(
         text: new TextSpan(
@@ -189,8 +173,9 @@ class GalleryDrawer extends StatelessWidget {
           ]
         )
       )
-          ),
-          new AboutDrawerItem(
+    );
+
+    final Widget aboutItem = new AboutDrawerItem(
       icon: new FlutterLogo(),
       applicationVersion: '2016 Q3 Preview',
       applicationIcon: new FlutterLogo(),
@@ -231,9 +216,36 @@ class GalleryDrawer extends StatelessWidget {
           )
         )
       ]
+    );
+
+    final List<Widget> allDrawerItems = <Widget>[
+      new GalleryDrawerHeader(light: useLightTheme),
+      lightThemeItem,
+      darkThemeItem,
+      new Divider(),
+      animateSlowlyItem,
+      // index 5, optional: Performance Overlay
+      fileAnIssueItem,
+      aboutItem
+    ];
+
+    if (onShowPerformanceOverlayChanged != null) {
+      allDrawerItems.insert(5, new DrawerItem(
+        icon: new Icon(Icons.assessment),
+        onPressed: () { onShowPerformanceOverlayChanged(!showPerformanceOverlay); },
+        selected: showPerformanceOverlay,
+        child: new Row(
+          children: <Widget>[
+            new Flexible(child: new Text('Performance Overlay')),
+            new Checkbox(
+              value: showPerformanceOverlay,
+              onChanged: (bool value) { onShowPerformanceOverlayChanged(!showPerformanceOverlay); }
             )
           ]
         )
-    );
+      ));
+    }
+
+    return new Drawer(child: new Block(children: allDrawerItems));
   }
 }

examples/flutter_gallery/lib/gallery/home.dart

@@ -99,6 +99,23 @@ class GalleryHomeState extends State<GalleryHome> {
   static final Key _homeKey = new ValueKey<String>("Gallery Home");
   static final GlobalKey<ScrollableState> _scrollableKey = new GlobalKey<ScrollableState>();
 
+  final AnimationController _controller = new AnimationController(
+    duration: const Duration(milliseconds: 600),
+    debugLabel: "preview banner"
+  );
+
+  @override
+  void initState() {
+    super.initState();
+    _controller.forward();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
   List<Widget> _galleryListItems() {
     final List<Widget> listItems = <Widget>[];
     final ThemeData themeData = Theme.of(context);
@@ -126,7 +143,7 @@ class GalleryHomeState extends State<GalleryHome> {
   @override
   Widget build(BuildContext context) {
     final double statusBarHeight = MediaQuery.of(context).padding.top;
-    return new Scaffold(
+    Widget home = new Scaffold(
       key: _homeKey,
       scrollableKey: _scrollableKey,
       drawer: new GalleryDrawer(
@@ -160,5 +177,30 @@ class GalleryHomeState extends State<GalleryHome> {
        children: _galleryListItems()
       )
     );
+
+    // In checked mode our MaterialApp will show the default "slow mode" banner.
+    // Otherwise show the "preview" banner.
+    bool showPreviewBanner = true;
+    assert(() {
+      showPreviewBanner = false;
+      return true;
+    });
+
+    if (showPreviewBanner) {
+      home = new Stack(
+        children: <Widget>[
+          home,
+          new FadeTransition(
+            opacity: new CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
+            child: new Banner(
+              message: 'PREVIEW',
+              location: BannerLocation.topRight,
+            )
+          ),
+        ]
+      );
+    }
+
+    return home;
   }
 }