From 4906dd0717a09102874c20463f6c460d6a5e7ef8 Mon Sep 17 00:00:00 2001 From: x-wei Date: Sat, 2 Nov 2019 08:00:22 +0100 Subject: [PATCH] update bottom appbar demo --- lib/my_app_routes.dart | 2 +- lib/routes/appbar_bottom_appbar_ex.dart | 130 +++++++++++++++++------- 2 files changed, 97 insertions(+), 35 deletions(-) diff --git a/lib/my_app_routes.dart b/lib/my_app_routes.dart index 43335d4c..e0c60202 100644 --- a/lib/my_app_routes.dart +++ b/lib/my_app_routes.dart @@ -331,7 +331,7 @@ const kMyAppRoutesStructure = [ 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 index 7f7f66f7..e8a1ef63 100644 --- 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 { + 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: [ + ListTile( + title: Text('FloatingActionButton position:'), + trailing: DropdownButton( + 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: [ // Bottom that pops up from the bottom of the screen. IconButton( icon: Icon(Icons.menu), - onPressed: () { - showModalBottomSheet( - 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 [ - 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.'), ), ], ),