处理手势时抛出以下断言：使用不包含导航器的上下文请求导航器操作

Question

I declared a class, returned MaterialApp and used button in it also used Navigator.Push method for navigation to different page, but it gave exception

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
            SafeArea(
            child: Scaffold(
            backgroundColor: Colors.red[100],
            body:Column(
              children: [
                   SizedBox(height: 50,),
                  Align(
                    alignment:Alignment.center,
                     child:Image.asset("assets/icons/appicon.png",
                   height:150),
                   ),
                   
                   Align(
                     alignment: Alignment.bottomCenter,
                     child: RaisedButton(  
  
                             child: Text('Click Picture'),  
  
                             color: Colors.red[800],  
  
                               onPressed: () {
  
                                            Navigator.push(
  
                                            context,
  
                                            MaterialPageRoute(builder: (context) =>  CameraRoute()
                                            ),
                                            );
  
                               },  
  
                             
  
                     ),
                   )
              ],
             
          ),
              
            ),
                        
        )
);
  

    //throw UnimplementedError();
  }
}

Answer 1

Separate the page/screen from MyApp by creating a new widget.

Like so

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              SizedBox(height: 100),
              Image.asset(
                "assets/icons.appicon.png",
                height: 150,
              ),
              RaisedButton(
                child: Text("Click Picture"),
                color: Colors.red,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => CameraRoute(),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

You're trying to get Navigator from a context that doesn't have a Navigator as parent. The only navigator in your code is in the MaterialApp, but that is a child of context.

The minimal way of getting a context that is a child of MaterialApp is to wrap your Scaffold with a Builder.

A better approach would be to split your code into more widgets (the build-method of each widget exposes a context) as mentioned by the other answer.