update bottom appbar demo

jukai9316 · Nov 2, 2019 · 4906dd0 · 4906dd0
1 parent c820653
commit 4906dd0
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 35 deletions.
diff --git a/lib/my_app_routes.dart b/lib/my_app_routes.dart
@@ -331,7 +331,7 @@ const kMyAppRoutesStructure = <MyRouteGroup>[
       MyRoute(
         child: BottomAppbarExample(),
         sourceFilePath: 'lib/routes/appbar_bottom_appbar_ex.dart',
-        title: 'Bottom AppBar',
+        title: 'Bottom AppBar and Floating App Button (FAB)',
         links: {
           'Doc':
               'https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html'

diff --git a/lib/routes/appbar_bottom_appbar_ex.dart b/lib/routes/appbar_bottom_appbar_ex.dart
@@ -3,56 +3,118 @@ import 'package:fluttertoast/fluttertoast.dart';
 
 // Adapted from offical flutter gallery:
 // https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/bottom_app_bar_demo.dart
-class BottomAppbarExample extends StatelessWidget {
+class BottomAppbarExample extends StatefulWidget {
   const BottomAppbarExample({Key key}) : super(key: key);
 
+  @override
+  _BottomAppbarExampleState createState() => _BottomAppbarExampleState();
+}
+
+class _BottomAppbarExampleState extends State<BottomAppbarExample> {
+  FloatingActionButtonLocation _fabLocation =
+      FloatingActionButtonLocation.endDocked;
+  bool _isBottomBarNotched = false;
+  bool _isFabMini = false;
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
-        child: Text('Bottom appbar demo'),
+      body: ListView(
+        padding: const EdgeInsets.all(8),
+        children: <Widget>[
+          ListTile(
+            title: Text('FloatingActionButton position:'),
+            trailing: DropdownButton<FloatingActionButtonLocation>(
+              value: this._fabLocation,
+              onChanged: (FloatingActionButtonLocation newVal) {
+                if (newVal != null) {
+                  setState(() => this._fabLocation = newVal);
+                }
+              },
+              items: [
+                DropdownMenuItem(
+                  value: FloatingActionButtonLocation.centerFloat,
+                  child: Text('centerFloat'),
+                ),
+                DropdownMenuItem(
+                  value: FloatingActionButtonLocation.endFloat,
+                  child: Text('endFloat'),
+                ),
+                DropdownMenuItem(
+                  value: FloatingActionButtonLocation.centerDocked,
+                  child: Text('centerDocked'),
+                ),
+                DropdownMenuItem(
+                  value: FloatingActionButtonLocation.endDocked,
+                  child: Text('endDocked'),
+                ),
+                DropdownMenuItem(
+                  value: FloatingActionButtonLocation.miniStartTop,
+                  child: Text('miniStartTop'),
+                ),
+                DropdownMenuItem(
+                  value: FloatingActionButtonLocation.startTop,
+                  child: Text('startTop'),
+                ),
+              ],
+            ),
+          ),
+          ListTile(
+            title: Text('Mini FAB:'),
+            trailing: Switch(
+              value: this._isFabMini,
+              onChanged: (bool val) {
+                setState(() => this._isFabMini = val);
+              },
+            ),
+          ),
+          ListTile(
+            title: Text('BottomAppBar notch:'),
+            trailing: Switch(
+              value: this._isBottomBarNotched,
+              onChanged: (bool val) {
+                setState(() => this._isBottomBarNotched = val);
+              },
+            ),
+          ),
+        ],
+      ),
+      floatingActionButton: FloatingActionButton(
+        child: Icon(Icons.add),
+        mini: this._isFabMini,
+        onPressed: () => Fluttertoast.showToast(msg: 'Dummy floating action button'),
       ),
-      bottomNavigationBar: BottomAppBar(
-          child: Row(
+      floatingActionButtonLocation: this._fabLocation,
+      bottomNavigationBar: this._buildBottomAppBar(context),
+    );
+  }
+
+  BottomAppBar _buildBottomAppBar(BuildContext context) {
+    return BottomAppBar(
+      shape: this._isBottomBarNotched ? CircularNotchedRectangle() : null,
+      color: Theme.of(context).primaryColor,
+      child: Row(
         children: <Widget>[
           // Bottom that pops up from the bottom of the screen.
           IconButton(
             icon: Icon(Icons.menu),
-            onPressed: () {
-              showModalBottomSheet<Null>(
-                context: context,
-                builder: (BuildContext context) => _getDemoDrawer(),
-              );
-            },
+            onPressed: () => showModalBottomSheet(
+              context: context,
+              builder: (BuildContext context) => Container(
+                alignment: Alignment.center,
+                height: 200,
+                child: Text('Dummy bottom sheet'),
+              ),
+            ),
           ),
           IconButton(
             icon: Icon(Icons.search),
-            onPressed: () {
-              Fluttertoast.showToast(msg: 'This is a dummy search action.');
-            },
+            onPressed: () =>
+                Fluttertoast.showToast(msg: 'Dummy search action.'),
           ),
           IconButton(
             icon: const Icon(Icons.more_vert),
-            onPressed: () {
-              Fluttertoast.showToast(msg: 'This is a dummy menu action.');
-            },
-          ),
-        ],
-      )),
-    );
-  }
-
-  Widget _getDemoDrawer() {
-    return Drawer(
-      child: Column(
-        children: const <Widget>[
-          const ListTile(
-            leading: const Icon(Icons.search),
-            title: const Text('Search'),
-          ),
-          const ListTile(
-            leading: const Icon(Icons.threed_rotation),
-            title: const Text('3D'),
+            onPressed: () => Fluttertoast.showToast(msg: 'Dummy menu action.'),
           ),
         ],
       ),