how to Navigate to a new screen onclick BottomAppBar icon?

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));

}

What happens if your write `onPressed: () => navigateToPage()`? — flarkmarup, May 07 '19 at 21:12
Are you creating this at the constructor? Because as far as I'm concerned, this error is supposed to happen only at the constructor. If you want to store some widget in a variable (don't know if you're supposed to do that, thought), do that inside `initState` method. — Hugo Passos, May 07 '19 at 22:43
I call the method makeBottom where i creat the battomappbar, which constructor you are talking about? — Djamila Jada, May 08 '19 at 03:40
@DjamilaJada You got four answers, engaging with comments with the people who tried to help you might lead to successful results. — Roko C. Buljan, Jan 13 '20 at 08:57

score 0 · Answer 1 · answered May 09 '19 at 06:33

0

Try this below code..

return Scaffold{
bottomNavigationBar : bottomNav()  // call the Widget
}

Widget bottomNav(){
return new Container (
height :45.0,
//Copy the bottomAppBar code
);
}

answered May 09 '19 at 06:33

Dineshkumar

370
2
5
16

score 0 · Answer 2 · answered May 09 '19 at 09:25

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));
}

score 0 · Answer 3 · answered May 09 '19 at 10:38

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();
}

score 0 · Answer 4 · answered May 09 '19 at 11:50

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;

          }
        });
      }
    }

how to Navigate to a new screen onclick BottomAppBar icon?

4 Answers4