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

Question

我声明了一个 class，返回了 MaterialApp 并在其中使用了按钮，还使用了 Navigator.Push 方法导航到不同的页面，但它给出了异常

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

通过创建新小部件将 page/screen 与 MyApp 分开。

像这样

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

您正在尝试从没有 Navigator 作为父级的上下文中获取 Navigator。您代码中唯一的导航器在 MaterialApp 中，但它是上下文的子项。

获取作为 MaterialApp 子项的上下文的最小方法是用构建器包装您的脚手架。

如其他答案所述，更好的方法是将您的代码拆分为更多小部件（每个小部件的构建方法公开一个上下文）。

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

The following assertion was thrown while handling a gesture: Navigator operation requested with a context that does not include a Navigator

flutter

flutter-navigation