MaterialApp 中的导航器 - Flutter

Question

I wrote an simple app, when i want use onPressed in my build() it throw me this type of error:

Navigator operation requested with a context that does not include a Navigator.

Can anybody tell me why I can't use navigator in my onPressed() ?

How can I fix it?

   @override
  Widget build(BuildContext context) {
    // double width = MediaQuery.of(context).size.width;
    return MaterialApp(
      home:Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(50.0),
        child: AppBar(
          title: Image(
            alignment: Alignment.center,
            image: AssetImage('assets/images/logo.png'),
            height: 70.0,
          ),
          centerTitle: true,
          iconTheme: IconThemeData(color: Color.fromRGBO(9, 133, 46, 100)),
            backgroundColor: Colors.white,
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.person,
                  color: Color.fromRGBO(9, 133, 46, 100),
                  size: 30.0,       
                ),
                onPressed: () {

//HERE

                  Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => LoginScreen()));
                },
              ),
              IconButton(
                icon: Icon(
                  Icons.shopping_cart,
                  color: Color.fromRGBO(9, 133, 46, 100),
                  size: 30.0,
                ),
                onPressed: (){
                  //AND HERE :(
                },
              ),
            ],
        ),
      ),
      body: Builder(

              ...

            ),
          ),
        ),
        floatingActionButton: RawMaterialButton(
            ...
              ),
        drawer: MyDrawer(), 

      ), 
    );
  }

Answer 1

onPressed: _navigate

void _navigate() {
Navigator.push(
    context, MaterialPageRoute(builder: (context) => HomeScreen()));
}

Answer 2

I fix it by create new class

class UserIcon extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return IconButton(
      icon: Icon(
        Icons.person,
        color: Color.fromRGBO(9, 133, 46, 100),
        size: 30.0,  
      ),
      onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => UserPage()));
      },
    );
  }
}

Answer 3

Try making a class called Home and using that as home in MaterialApp instead of directly creating a Scaffold. Like so,

return: MaterialApp(
home: Home(),
);

and then,

class Home extends StatefulWidget {

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(50.0),
        child: AppBar(
          title: Image(
            alignment: Alignment.center,
            image: AssetImage('assets/images/logo.png'),
            height: 70.0,
          ),
          centerTitle: true,
          iconTheme: IconThemeData(color: Color.fromRGBO(9, 133, 46, 100)),
            backgroundColor: Colors.white,
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.person,
                  color: Color.fromRGBO(9, 133, 46, 100),
                  size: 30.0,       
                ),
                onPressed: () {

//TRY MY ANSWER

                  Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => LoginScreen()));
                },
              ),
              IconButton(
                icon: Icon(
                  Icons.shopping_cart,
                  color: Color.fromRGBO(9, 133, 46, 100),
                  size: 30.0,
                ),
                onPressed: (){
                  //HOPEFULL IT WORKS :)
                },
              ),
            ],
        ),
      ),
      body: Builder(

              ...

            ),
          ),
        ),
        floatingActionButton: RawMaterialButton(
            ...
              ),
        drawer: MyDrawer(), 

      ), 
    );
  }
}

You are getting this error because, MaterialApp is actually a child of MyApp . So when we use "context" to build another page, MyApp 's BuildContext can't use MaterialApp as a parent. Thus, using a new Class usually fixes this issue!

Do tell if it doesn't work!!!