// Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. // Flutter code sample for BottomAppBar import 'package:flutter/material.dart'; void main() { runApp(const BottomAppBarDemo()); } class BottomAppBarDemo extends StatefulWidget { const BottomAppBarDemo({super.key}); @override State createState() => _BottomAppBarDemoState(); } class _BottomAppBarDemoState extends State<BottomAppBarDemo> { 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: <Widget>[ 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<FloatingActionButtonLocation>( title: const Text('Docked - End'), value: FloatingActionButtonLocation.endDocked, groupValue: _fabLocation, onChanged: _onFabLocationChanged, ), RadioListTile<FloatingActionButtonLocation>( title: const Text('Docked - Center'), value: FloatingActionButtonLocation.centerDocked, groupValue: _fabLocation, onChanged: _onFabLocationChanged, ), RadioListTile<FloatingActionButtonLocation>( title: const Text('Floating - End'), value: FloatingActionButtonLocation.endFloat, groupValue: _fabLocation, onChanged: _onFabLocationChanged, ), RadioListTile<FloatingActionButtonLocation>( 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<FloatingActionButtonLocation> centerLocations = <FloatingActionButtonLocation>[ 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: <Widget>[ 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: () {}, ), ], ), ), ); } }