how to Navigate to a new screen onclick BottomAppBar icon? - dart

Question

i want to navigate to new screen on click icons of BottomAppBar but i get an error :
only static members can be accessed in initializers
final makeBottom = Container(
height: 45.0,
child: BottomAppBar(
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.home, color: Color.fromARGB(255, 30, 110, 160)),
onPressed: navigateToPage,//only static members can be accessed in initializers
),
IconButton(
icon: Icon(Icons.search, color: Color.fromARGB(255, 30, 110, 160)),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star, color: Color.fromARGB(255, 30, 110, 160)),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.favorite_border,
color: Color.fromARGB(255, 30, 110, 160)),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.account_circle,
color: Color.fromARGB(255, 30, 110, 160)),
onPressed: () {},
),
],
),
),
);
the method navigateToPage
void navigateToPage() async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Userqst(
user: widget.user,
),
fullscreenDialog: true));
}

Answer 1

Try this below code..
return Scaffold{
bottomNavigationBar : bottomNav() // call the Widget
}
Widget bottomNav(){
return new Container (
height :45.0,
//Copy the bottomAppBar code
);
}

Answer 2

Problem can be your method can't get context
So at your Iconbutton pass context like this
IconButton(
icon: Icon(Icons.home, color: Color.fromARGB(255, 30, 110, 160)),
onPressed: (){navigateToPage(context);},//only static members can be accessed in initializers
),
And try modifying method like this
void navigateToPage(BuildContext context) async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Userqst(
user: widget.user,
),
fullscreenDialog: true));
}

Answer 3

I think you're trying to build that Widget out of the "Widget build(BuildContext context)" context, that's why you're having this problem.
I thought about 2 solutions for that.
First, you place your code into the main function "Widget build(BuildContext context)" and call the Widget wherever you want to.
#override
Widget build(BuildContext context){
//here you put your "final makeBottom" code;
return Scaffold(//and somewhere around there you place your "makeBottom" Widget);
}
Second, wrap your whole code as a Function which will return that Container() and then call it into the "build" function.
Widget makeBottom(BuildContext context){
return //your Container();
}

Answer 4

Below code may help you -
class Home extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _HomeState();
}
}
class _HomeState extends State<Home> {
int _currentIndex = 0;
final List<Widget> _children = [
HomeListView(),
MyGridView()
];
var _title = 'Home';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromRGBO(41, 167, 77, 50),
title: Text(_title, textAlign: TextAlign.center),
),
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
selectedItemColor: Color.fromRGBO(33, 137, 38, 60),
type: BottomNavigationBarType.fixed,
backgroundColor: Color.fromRGBO(252, 207, 3, 60),
currentIndex: _currentIndex,
// this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('My Venue'),
)
],
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
switch (index) {
case 0:
_title = 'Home';
break;
case 1:
_title = 'My Venue';
break;
}
});
}
}