I want a docked bottom navigation bar in flutter where the item in the center is uplifted and fixed,
any idea how can I do that
this is the output that I want and I don't have any idea I can I do that
try adding floating action button in scaffold
Scaffold(
bottomNavigationBar: BottomAppBar(
child: Row(
children: [
IconButton(icon: Icon(Icons.menu), onPressed: () {}),
Spacer(),
IconButton(icon: Icon(Icons.search), onPressed: () {}),
IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
],
),
),
floatingActionButton:
FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
),
See I have two options for you here (potentially three):
1. Create a mix of bottom-navigation-bar and floating-action-button
floatingActionButton: FloatingActionButton(
onPressed: () {},
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Icon(Icons.video_call),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.redAccent,
notchMargin: 5,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.print,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.people,
color: Colors.white,
),
onPressed: () {},
),
],
),
),
pseudo second:
Create a notch in the bottom-navigation-bar :
bottomNavigationBar: BottomAppBar(
shape: shape: AutomaticNotchedShape(
RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(15),
),
),
RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
), // by adding this line in the above code
color: Colors.redAccent,
notchMargin: 5,
child: Row(
2. Use Stack BottomNavBar Combo :
Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
items: const [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: Colors.white,
),
label: 'a',
backgroundColor: Colors.transparent),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'a',
backgroundColor: Colors.yellow),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'a',
backgroundColor: Colors.blue,
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'a',
backgroundColor: Colors.blue,
),
],
type: BottomNavigationBarType.shifting,
selectedItemColor: Colors.black,
iconSize: 20,
elevation: 5),
),
Positioned(
top: height * 0.25,
left: width * 0.40,
child: FloatingActionButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
child: Icon(Icons.video_call),
),
),
],
),
),
),
],
),
Try below code:
Scaffold(
body: Container(),
floatingActionButton: FloatingActionButton(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.video_camera_back),
elevation: 4.0,
backgroundColor: Colors.pink,
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: IconButton(icon: Icon(Icons.home), onPressed: () {}),
),
Expanded(
child: IconButton(icon: Icon(Icons.show_chart), onPressed: () {}),
),
Expanded(child: new Text('')),
Expanded(
child: IconButton(icon: Icon(Icons.tab), onPressed: () {}),
),
Expanded(
child: IconButton(icon: Icon(Icons.settings), onPressed: () {}),
),
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)
Result->
Refer persistent_bottom_nav_bar also and refer bottom_nav_bar also for more design of
Related
I want my floatingActionButton to stay like this when using persistentFooterButtons
If I add persistentFooterButtons, it becomes like this, but I want it lower and docked
This is the stateful widget with the bottom bar:
class Main extends StatefulWidget {
const Main({Key? key}) : super(key: key);
#override
State<Main> createState() => _MainState();
}
class _MainState extends State<Main> {
int selectedIndex = 0;
static User user = FirebaseAuth.instance.currentUser!;
final screens = [
const Home(),
const Search(),
const Library(),
Account(user: user),
];
#override
Widget build(BuildContext context) {
return Scaffold(
persistentFooterButtons: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
IconButton(
iconSize: 35,
icon: Icon(Icons.play_arrow),
onPressed: null,
),
Text("Some data over hereSome data "),
IconButton(
icon: Icon(Icons.favorite),
onPressed: null,
)
],
)
],
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const FittedBox(child: PlayButton()),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
resizeToAvoidBottomInset: false,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
notchMargin: 5,
color: Colors.red,
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
IconlyLight.home,
color: Colors.white,
),
activeIcon: Icon(
IconlyBold.home,
color: Colors.white,
shadows: [
BoxShadow(
blurRadius: 30,
color: Colors.white,
),
],
),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(
IconlyLight.search,
color: Colors.white,
),
activeIcon: Icon(
IconlyBold.search,
color: Colors.white,
shadows: [
BoxShadow(
blurRadius: 30,
color: Colors.white,
),
],
),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(
Iconsax.music_library_2,
color: Colors.white,
),
activeIcon: Icon(
Iconsax.music_library_25,
color: Colors.white,
shadows: [
BoxShadow(
blurRadius: 30,
color: Colors.white,
),
],
),
label: 'Library',
),
BottomNavigationBarItem(
icon: Icon(
IconlyLight.profile,
color: Colors.white,
),
activeIcon: Icon(
IconlyBold.profile,
color: Colors.white,
shadows: [
BoxShadow(
blurRadius: 30,
color: Colors.white,
),
],
),
label: 'Account',
),
],
currentIndex: selectedIndex,
unselectedItemColor: Colors.white,
selectedItemColor: Colors.white,
onTap: (index) => setState(() => selectedIndex = index),
),
),
body: IndexedStack(
index: selectedIndex,
children: screens,
),
);
}
}
The key elements are
persistentFooterButtons: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
IconButton(
iconSize: 35,
icon: Icon(Icons.play_arrow),
onPressed: null,
),
Text("Some data over hereSome data "),
IconButton(
icon: Icon(Icons.favorite),
onPressed: null,
)
],
)
],
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const FittedBox(child: PlayButton()),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
I ended up pushing the FAB down using a Stack with Positioned
floatingActionButton: Stack(
alignment: Alignment.bottomCenter,
clipBehavior: Clip.none,
children: [
Positioned(
bottom: 5,
child: FloatingActionButton(
onPressed: () {},
),
),
],
),
I am trying to create a Bottom Navigation Bar with a button group in the middle. The 2 icons on either side of the button group will switch the displayed screen. The centered button group has 3 buttons which would act on the displayed screen. This is similar to the new Google Assistant bottom bar
.
I tried using the BottomNavigationBar with the centre item a custom widget. However the sizes of all the items end up equal. Any help creating this layout would be appreciated. Thanks.
This is the design I am trying to achieve
Here's what I have now:
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.primary,
foregroundColor: Theme.of(context).colorScheme.secondary,
leading: IconButton(
icon: Image.asset(alInvertedIcon, width: 32, semanticLabel: "Home screen"),
onPressed: () {
push(const HomeScreen());
},
iconSize: 32,
),
title: Image.asset(alTextInv, width: 175),
centerTitle: true,
actions: [
IconButton(
icon: const Icon(Icons.person_outlined, semanticLabel: "User Profile"),
onPressed: () {
push(const ProfileScreen());
},
iconSize: 32,
)
],
),
body: bodyWidget,
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: _onItemTapped,
showSelectedLabels: false,
showUnselectedLabels: false,
backgroundColor: Theme.of(context).colorScheme.secondary,
selectedItemColor: Theme.of(context).colorScheme.primary,
unselectedItemColor: Colors.grey,
currentIndex: _currentIndex,
items: [
const BottomNavigationBarItem(
icon: Icon(
Icons.camera_alt,
),
label: 'Visual',
),
BottomNavigationBarItem(
icon: SizedBox(
width: 300,
child: _actionPanel(),
),
label: 'Add',
),
const BottomNavigationBarItem(
icon: Icon(
Icons.chat,
),
label: 'Text',
),
],
),
),
);
}
Widget _actionPanel() {
return Material(
elevation: 1.0,
borderRadius: const BorderRadius.all(Radius.circular(25)),
child: Row(
children: <Widget>[
IconButton(
onPressed: () {},
icon: const Icon(
Icons.refresh,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.mic,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.camera,
),
),
],
),
);
}
Try using this way.
Widget _actionPanel() {
return Material(
elevation: 1.0,
borderRadius: BorderRadius.all(Radius.circular(25)),
child: Container(
padding: EdgeInsets.symmetric(vertical: 3),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
MaterialButton(
onPressed: () {},
shape: CircleBorder(),
minWidth: 0,
padding: EdgeInsets.all(5),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Icon(Icons.refresh),
),
MaterialButton(
onPressed: () {},
shape: CircleBorder(),
minWidth: 0,
padding: EdgeInsets.all(5),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Icon(Icons.mic),
),
MaterialButton(
onPressed: () {},
shape: CircleBorder(),
minWidth: 0,
padding: EdgeInsets.all(5),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Icon(Icons.camera),
),
],
),
),
);
}
App screen is covered with an image, there is a bottom app bar which I need to see the background image as transparent.
I am using svg icons for bottom navigationbar icons. The same screen top appbar is transparent but bottom app bar showing white color.
BottomAppBar _buildBottomNavigationBar() {
return BottomAppBar(
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/icons/home.svg',
color: Colors.black,
),
//color: Colors.black,
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset('assets/icons/location.svg'),
color: Colors.black,
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset('assets/icons/fish.svg'),
color: Colors.black,
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset('assets/icons/menu.svg'),
color: Colors.black,
),
],
),
);
}
try this:
Scaffold(
extendBody: true,
Try to set elevation
set elevation to zero:
BottomAppBar(elevation: 0)
Example
BottomAppBar _buildBottomNavigationBar() {
return BottomAppBar(
elevation: 0,
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/icons/home.svg',
color: Colors.black,
),
//color: Colors.black,
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset('assets/icons/location.svg'),
color: Colors.black,
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset('assets/icons/fish.svg'),
color: Colors.black,
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset('assets/icons/menu.svg'),
color: Colors.black,
),
],
),
);
}
Explain
elevation make a shadow in widgets
I have a persistentFooterButtons option for my Scaffold.
persistentFooterButtons: [
FloatingActionButton(
heroTag: "editself",
child: Icon(Icons.edit),
onPressed: () {
print(InterfaceViewRoute);
Navigator.pushNamed(context, InterfaceViewRoute, arguments: "-1");
}),
FloatingActionButton(
heroTag: "scanneredit",
child: Icon(Icons.qr_code_scanner_rounded),
onPressed: () => _scan(),
),
],
);
But now the whole background is filled there. See image:
Is there a way to make this background transparent so that you can see the list all the way down
Transparent Footer with Floating Action buttons
This is a Code Snippet.
floatingActionButton: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(
left: 40.0,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FloatingActionButton(
tooltip: 'Home',
child: Icon(
Icons.home,
color: Colors.black,
),
onPressed: () {},
backgroundColor: Colors.white.withOpacity(.4),
),
Spacer(),
FloatingActionButton(
tooltip: 'Details',
child: Icon(
Icons.details,
color: Colors.black,
),
onPressed: () {},
backgroundColor: Colors.white.withOpacity(.4),
),
Spacer(),
FloatingActionButton(
tooltip: 'Bar Chart',
child: Icon(
Icons.bar_chart_outlined,
color: Colors.black,
),
onPressed: () {},
backgroundColor: Colors.white.withOpacity(.4),
),
Spacer(),
FloatingActionButton(
tooltip: 'Settings',
child: Icon(
Icons.settings,
color: Colors.black,
),
onPressed: () {},
backgroundColor: Colors.white.withOpacity(.4),
),
],
),
),
Have you tried put Row in floatingActionButton?
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
),
SizedBox(width: 10,),
FloatingActionButton(
),
],
)),
Another way is to use bottomNavigationBar of Scaffold
...
extendBody: true, // if you want body to be extended below buttons
bottomNavigationBar: SafeArea(
child: Container(
child: TextButton(child: Text('button'), onPressed: () {}), //or row of buttons
width: MediaQuery.of(context).size.width,
color: Colors.transparent, //background color
padding: EdgeInsets.only(top: 5, bottom: 3),
),
),
...
When the keyboard is activated, persistentFooterButtons are covered.
...
persistentFooterButtons: <Widget>[
ButtonBar(
children: [
IconButton(
iconSize: 15,
onPressed: () {},
icon: Icon(Icons.east, color: Colors.green),
),
IconButton(
iconSize: 15,
onPressed: () {},
icon: Icon(Icons.api, color: Colors.blue),
),],),],
); //Scaffold
When the keyboard is activated, the icons should be displayed above the keyboard.
write in floatingActionButton
for example :
floatingActionButton: Column(
children: [
Row(
children: [
Expanded(child: Container()),
FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
],
),
Container(
height: 1, color: Colors.grey , margin: EdgeInsets.only(top: 10 , left: 30),
),
Container(
child: ButtonBar(
children: [
IconButton(
iconSize: 15,
onPressed: () {},
icon: Icon(Icons.extension, color: Colors.green),
),
IconButton(
iconSize: 15,
onPressed: () {},
icon: Icon(Icons.ac_unit, color: Colors.blue),
),
],
),
)
],
mainAxisAlignment: MainAxisAlignment.end,
), //