import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { bool _showFab = true; bool _showNotch = true; FloatingActionButtonLocation _fabLocation = FloatingActionButtonLocation.endDocked; void _onShowNotchChanged(bool value) { setState(() { _showNotch = value; }); } void _onShowFabChanged(bool value) { setState(() { _showFab = value; }); } void _onFabLocationChanged(FloatingActionButtonLocation? value) { setState(() { _fabLocation = value ?? FloatingActionButtonLocation.endDocked; }); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( automaticallyImplyLeading: false, title: const Text('Bottom App Bar Demo'), ), body: ListView( padding: const EdgeInsets.only(bottom: 88), children: [ SwitchListTile( title: const Text( 'Floating Action Button', ), value: _showFab, onChanged: _onShowFabChanged, ), SwitchListTile( title: const Text('Notch'), value: _showNotch, onChanged: _onShowNotchChanged, ), const Padding( padding: EdgeInsets.all(16), child: Text('Floating action button position'), ), RadioListTile( title: const Text('Docked - End'), value: FloatingActionButtonLocation.endDocked, groupValue: _fabLocation, onChanged: _onFabLocationChanged, ), RadioListTile( title: const Text('Docked - Center'), value: FloatingActionButtonLocation.centerDocked, groupValue: _fabLocation, onChanged: _onFabLocationChanged, ), RadioListTile( title: const Text('Floating - End'), value: FloatingActionButtonLocation.endFloat, groupValue: _fabLocation, onChanged: _onFabLocationChanged, ), RadioListTile( title: const Text('Floating - Center'), value: FloatingActionButtonLocation.centerFloat, groupValue: _fabLocation, onChanged: _onFabLocationChanged, ), ], ), floatingActionButton: _showFab ? FloatingActionButton( onPressed: () {}, tooltip: 'Create', child: const Icon(Icons.add), ) : null, floatingActionButtonLocation: _fabLocation, bottomNavigationBar: _DemoBottomAppBar( fabLocation: _fabLocation, shape: _showNotch ? const CircularNotchedRectangle() : null, ), ), ); } } class _DemoBottomAppBar extends StatelessWidget { const _DemoBottomAppBar({ this.fabLocation = FloatingActionButtonLocation.endDocked, this.shape = const CircularNotchedRectangle(), }); final FloatingActionButtonLocation fabLocation; final NotchedShape? shape; static final List centerLocations = [ FloatingActionButtonLocation.centerDocked, FloatingActionButtonLocation.centerFloat, ]; @override Widget build(BuildContext context) { return BottomAppBar( shape: shape, color: Colors.blue, child: IconTheme( data: IconThemeData(color: Theme.of(context).colorScheme.onPrimary), child: Row( children: [ IconButton( tooltip: 'Open navigation menu', icon: const Icon(Icons.menu), onPressed: () {}, ), if (centerLocations.contains(fabLocation)) const Spacer(), IconButton( tooltip: 'Search', icon: const Icon(Icons.search), onPressed: () {}, ), IconButton( tooltip: 'Favorite', icon: const Icon(Icons.favorite), onPressed: () {}, ), ], ), ), ); } }