[Material] Create demo for material banner (#37631)

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

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+import '../../gallery/demo.dart';
+
+enum BannerDemoAction {
+  reset,
+  showMultipleActions,
+  showLeading,
+}
+
+class BannerDemo extends StatefulWidget {
+  const BannerDemo({ Key key }) : super(key: key);
+
+  static const String routeName = '/material/banner';
+
+  @override
+  _BannerDemoState createState() => _BannerDemoState();
+}
+
+class _BannerDemoState extends State<BannerDemo> {
+  static const int _numItems = 20;
+  bool _displayBanner = true;
+  bool _showMultipleActions = true;
+  bool _showLeading = true;
+
+  void handleDemoAction(BannerDemoAction action) {
+    setState(() {
+      switch (action) {
+        case BannerDemoAction.reset:
+          _displayBanner = true;
+          _showMultipleActions = true;
+          _showLeading = true;
+          break;
+        case BannerDemoAction.showMultipleActions:
+          _showMultipleActions = !_showMultipleActions;
+          break;
+        case BannerDemoAction.showLeading:
+          _showLeading = !_showLeading;
+          break;
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final Widget banner = MaterialBanner(
+      content: const Text('Your password was updated on your other device. Please sign in again.'),
+      leading: _showLeading ? CircleAvatar(child: Icon(Icons.access_alarm)) : null,
+      actions: <Widget>[
+        FlatButton(
+          child: const Text('SIGN IN'),
+          onPressed: () {
+            setState(() {
+              _displayBanner = false;
+            });
+          }
+        ),
+        if (_showMultipleActions)
+          FlatButton(
+            child: const Text('DISMISS'),
+            onPressed: () {
+              setState(() {
+                _displayBanner = false;
+              });
+            }
+          ),
+      ],
+    );
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Banner'),
+        actions: <Widget>[
+          MaterialDemoDocumentationButton(BannerDemo.routeName),
+          PopupMenuButton<BannerDemoAction>(
+            onSelected: handleDemoAction,
+            itemBuilder: (BuildContext context) => <PopupMenuEntry<BannerDemoAction>>[
+              const PopupMenuItem<BannerDemoAction>(
+                value: BannerDemoAction.reset,
+                child: Text('Reset the banner'),
+              ),
+              const PopupMenuDivider(),
+              CheckedPopupMenuItem<BannerDemoAction>(
+                value: BannerDemoAction.showMultipleActions,
+                checked: _showMultipleActions,
+                child: const Text('Multiple actions'),
+              ),
+              CheckedPopupMenuItem<BannerDemoAction>(
+                value: BannerDemoAction.showLeading,
+                checked: _showLeading,
+                child: const Text('Leading icon'),
+              ),
+            ],
+          ),
+        ],
+      ),
+      body: ListView.builder(itemCount: _displayBanner ? _numItems + 1 : _numItems, itemBuilder: (BuildContext context, int index) {
+        if (index == 0 && _displayBanner) {
+          return banner;
+        }
+        return ListTile(title: Text('Item ${_displayBanner ? index : index + 1}'),);
+      }),
+    );
+  }
+}

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 export 'backdrop_demo.dart';
+export 'banner_demo.dart';
 export 'bottom_app_bar_demo.dart';
 export 'bottom_navigation_demo.dart';
 export 'buttons_demo.dart';

examples/flutter_gallery/lib/gallery/demos.dart

@@ -159,6 +159,15 @@ List<GalleryDemo> _buildGalleryDemos() {
       routeName: BackdropDemo.routeName,
       buildRoute: (BuildContext context) => BackdropDemo(),
     ),
+    GalleryDemo(
+      title: 'Banner',
+      subtitle: 'Displaying a banner within a list',
+      icon: GalleryIcons.lists_leave_behind,
+      category: _kMaterialComponents,
+      routeName: BannerDemo.routeName,
+      documentationUrl: 'https://api.flutter.dev/flutter/material/MaterialBanner-class.html',
+      buildRoute: (BuildContext context) => const BannerDemo(),
+    ),
     GalleryDemo(
       title: 'Bottom app bar',
       subtitle: 'Optional floating action button notch',