Flutter : How do I make BottomAppBar of buttomNavigationBar appear in every screens I have? - flutter

Question

I'm using BottomAppBar instead of BottomNavigationBar widget. And I want to make this bar appear in every screen I have. Again, I don't want to use BottomNavigationBar.
bottomNavigationBar: BottomAppBar(
child: Container(
height: 60,
width: width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// Home
MaterialButton(
onPressed: () {
setState(() {
currentScreen = HomeScreenWrapper();
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.home,
color: currentTab == 0 ? primaryColor : Colors.grey,
),
Text(
AppLocalizations.of(context).translate('HOME'),
style: TextStyle(
color: currentTab == 0 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
// Dashboard
MaterialButton(
onPressed: () {
setState(() {
currentScreen = PointScreenWrapper();
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SvgPicture.asset(
'assets/images/dashboard.svg',
color: currentTab == 2 ? primaryColor : null,
),
// Icon(
// // Icons.show_chart,
// Icons.dashboard,
// //Icons.crop_square,
// color: currentTab == 2 ? primaryColor : Colors.grey,
// ),
Text(
AppLocalizations.of(context).translate('DASHBOARD'),
style: TextStyle(
color: currentTab == 2 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
// //Make a dummy space between
SizedBox(
width: width / 5,
),
// Score
MaterialButton(
onPressed: () {
setState(() {
currentScreen = ChallengeScreen();
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SvgPicture.asset(
'assets/images/ranking.svg',
color: currentTab == 1 ? primaryColor : Colors.grey,
),
// Icon(
// Icons.star,
// color: currentTab == 1 ? primaryColor : Colors.grey,
// size: 30,
// ),
Text(
AppLocalizations.of(context).translate('RATING'),
style: TextStyle(
color: currentTab == 1 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
//
MaterialButton(
onPressed: () {
setState(() {
currentScreen = ProfileWrapper();
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SvgPicture.asset(
'assets/images/profile.svg',
color: currentTab == 3 ? primaryColor : Colors.grey,
),
// Icon(
// Icons.settings,
// color: currentTab == 3 ? primaryColor : Colors.grey,
// ),
Text(
AppLocalizations.of(context).translate('PROFILE'),
style: TextStyle(
color: currentTab == 3 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
],
),
),
shape: CircularNotchedRectangle(),
),
How do I do that? Please give me some pointer regarding this issue. I am looking forward to hearing from anyone of you. Thank you in advance...

Answer 1

You can copy paste run full code below
You can use PageView when click on MaterialButton call bottomTapped with index
code snippet
Widget buildPageView() {
return PageView(
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
Red(),
Blue(),
Yellow(),
Green(),
],
);
}
#override
void initState() {
super.initState();
}
void pageChanged(int index) {
setState(() {
currentTab = index;
});
}
void bottomTapped(int index) {
setState(() {
currentTab = index;
pageController.animateToPage(index,
duration: Duration(milliseconds: 500), curve: Curves.ease);
});
}
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double width;
Color primaryColor = Colors.blue;
int currentTab = 0;
PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
Widget buildPageView() {
return PageView(
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
Red(),
Blue(),
Yellow(),
Green(),
],
);
}
#override
void initState() {
super.initState();
}
void pageChanged(int index) {
setState(() {
currentTab = index;
});
}
void bottomTapped(int index) {
setState(() {
currentTab = index;
pageController.animateToPage(index,
duration: Duration(milliseconds: 500), curve: Curves.ease);
});
}
#override
Widget build(BuildContext context) {
width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: buildPageView(),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 60,
width: width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// Home
MaterialButton(
onPressed: () {
bottomTapped(0);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.home,
color: currentTab == 0 ? primaryColor : Colors.grey,
),
Text(
'HOME',
style: TextStyle(
color: currentTab == 0 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
// Dashboard
MaterialButton(
onPressed: () {
bottomTapped(1);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://picsum.photos/20/20?image=9',
color: currentTab == 1 ? primaryColor : null,
),
// Icon(
// // Icons.show_chart,
// Icons.dashboard,
// //Icons.crop_square,
// color: currentTab == 2 ? primaryColor : Colors.grey,
// ),
Text(
'DASHBOARD',
style: TextStyle(
color: currentTab == 1 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
// //Make a dummy space between
SizedBox(
width: width / 10,
),
// Score
MaterialButton(
onPressed: () {
bottomTapped(2);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://picsum.photos/20/20?image=9',
color: currentTab == 2 ? primaryColor : Colors.grey,
),
// Icon(
// Icons.star,
// color: currentTab == 1 ? primaryColor : Colors.grey,
// size: 30,
// ),
Text(
'RATING',
style: TextStyle(
color: currentTab == 2 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
//
MaterialButton(
onPressed: () {
bottomTapped(3);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://picsum.photos/20/20?image=9',
color: currentTab == 3 ? primaryColor : Colors.grey,
),
// Icon(
// Icons.settings,
// color: currentTab == 3 ? primaryColor : Colors.grey,
// ),
Text(
'PROFILE',
style: TextStyle(
color: currentTab == 3 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
],
),
),
shape: CircularNotchedRectangle(),
),
);
}
}
class Red extends StatefulWidget {
#override
_RedState createState() => _RedState();
}
class _RedState extends State<Red> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
);
}
}
class Blue extends StatefulWidget {
#override
_BlueState createState() => _BlueState();
}
class _BlueState extends State<Blue> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blueAccent,
);
}
}
class Yellow extends StatefulWidget {
#override
_YellowState createState() => _YellowState();
}
class _YellowState extends State<Yellow> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.yellowAccent,
);
}
}
class Green extends StatefulWidget {
#override
_GreenState createState() => _GreenState();
}
class _GreenState extends State<Green> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.greenAccent,
);
}
}

Answer 2

#Eren is right you cannot use same widget on every screen its against the flutter physics because its the scope of Scaffold field but you can use Common bottom-sheet class for every Page and pass that page context.

Answer 3

In flutter a good practice would be to create a widget and use that in every scaffold. Here is an example code I am using in my application
import 'package:flutter/material.dart';
class AppBottomNavigationBar extends StatelessWidget {
final int selectedIndex;
const AppBottomNavigationBar({
Key key,
#required this.selectedIndex,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail_outline),
title: Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(Icons.explore),
title: Text('Explore'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline),
title: Text('Profile'),
),
],
currentIndex: selectedIndex,
onTap: (int index) {
if (selectedIndex == index) {
return;
}
if (index == 0) {
Navigator.of(context).pushReplacementNamed('/home');
} else if (index == 1) {
Navigator.of(context).pushReplacementNamed('/messages');
} else if (index == 2) {
Navigator.of(context).pushReplacementNamed('/explore');
} else if (index == 3) {
Navigator.of(context).pushReplacementNamed('/profile');
}
},
);
}
}