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

【问题标题】：The following assertion was thrown while handling a gesture: Navigator operation requested with a context that does not include a Navigator处理手势时引发以下断言：使用不包含导航器的上下文请求导航器操作
【发布时间】：2021-01-14 08:42:41
【问题描述】：

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

使用不包含导航器

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

【问题讨论】：

嘿@Masi Mandlik。请通过此stackoverflow.com/help/how-to-ask 更好地提问。
这能回答你的问题吗？ Navigator operation requested with a context that does not include a Navigator
请不要张贴代码图片或错误信息。将它们粘贴到此处并进行适当的格式化。
对不起，这是我第一次在这里提问。所以我急着把它贴出来，所以我不明白如何正确格式化它
嘿@Dude，谢谢它有帮助

标签： flutter flutter-navigation

【解决方案1】：

通过创建一个新的小部件将页面/屏幕与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(),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

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

获取作为 MaterialApp 子级的上下文的最小方法是使用 Builder 包装您的 Scaffold。

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

【讨论】：

感谢@spkersten，您的回答很有帮助