在颤动的屏幕之间导航时出错

Question

我正在尝试使用手势检测器浏览 btw 屏幕，但收到错误消息 我该如何解决这个问题？

错误

======== 手势捕获的异常 ==================================== ============================== 处理手势时抛出以下断言： 使用不包含 Navigator 的上下文请求的 Navigator 操作。

用于从 Navigator 推送或弹出路由的上下文必须是作为 Navigator 小部件后代的小部件的上下文。 抛出异常时，这是堆栈： C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49 throw 包/flutter/src/widgets/navigator.dart 2732:9 packages/flutter/src/widgets/navigator.dart 2738:14 的 包/task1/main.dart 78:10 [_navigateToNextScreen] 包/task1/main.dart 60:21 ... 处理程序：“onTap” 识别器：TapGestureRecognizer#ae0a6 debugOwner：手势检测器 状态：可能 赢得竞技场 finalPosition: 偏移量(857.6, 553.0) finalLocalPosition：偏移量（264.6，206.2） 按钮：1 发送点击向下

我的代码：

   import 'package:flutter/material.dart';
   
   import 'package:url_launcher/url_launcher.dart';
   
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           body: Column(
   
   
             children:  <Widget>[
               Padding(
                 padding: const EdgeInsets.all(18.0),
                 child: Text(
                   'choose an option',
                   style: TextStyle(
                     fontSize: 32,
                     color: Colors.black87,
                   ),
                 ),
               ),
               Center(
                 child: ClipRRect(
                   borderRadius: BorderRadius.all(Radius.circular(45.0)),
                   child: Image(
                     width: 350,
                     image: NetworkImage(
                         'https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80'),
                   ),
                 ),
               ),
   
               SizedBox(
                 height: 40.0,
               ),
               Center(
                 child: ClipRRect(
                   borderRadius: BorderRadius.all(Radius.circular(45.0)),
                   child: GestureDetector(
                     onTap: () {
                       _navigateToNextScreen(context);
                     },
                     child: Image(
                       width: 350,
                       image: NetworkImage(
                           "https://images.unsplash.com/photo-1555967522-37949fc21dcb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2Nob2xhcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"),
                     ),
                   ),
                 ),
               ),
             ],
           ),
         ),
       );
     }
   
     void _navigateToNextScreen(BuildContext context) {
       Navigator.of(context)
           .push(MaterialPageRoute(builder: (context) => HomePage()));
     }
   }
   
   
   class HomePage extends StatelessWidget {
     void _launchUrl(String _url) async => await launch(_url);
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Tech News'),
         ),
         body: SingleChildScrollView(
           child: Center(
             child: Column(
               children: <Widget>[
                 SizedBox(
                   height: 40.0,
                 ),
                 ElevatedButton(
                   child: Text('article1'),
                   onPressed: () {
                     _launchUrl(
                         "https://theprint.in/opinion/mark-zuckerberg-and-elon-musks-ai-gamble-shows-why-the-tech-is-not-ready-for-prime-time/744962/");
                   },
                 ),
                 SizedBox(
                   height: 40.0,
                 ),
                 ElevatedButton(
                   child: Text('article2'),
                   onPressed: () {
                     _launchUrl(
                         "https://www.livemint.com/market/stock-market-news/wall-street-slammed-by-rotation-out-of-big-tech-nasdaq-falls-over-2-11633360763474.html");
                   },
                 ),
                 SizedBox(
                   height: 40.0,
                 ),
                 ElevatedButton(
                   child: Text('article3'),
                   onPressed: () {
                     _launchUrl(
                         "https://www.business-standard.com/article/companies/bengaluru-startup-offers-three-day-work-week-to-attract-tech-talent-121100400945_1.html");
                   },
                 ),
                 SizedBox(
                   height: 40.0,
                 ),
                 new InkWell(
                     child: new Text('Open Browser'),
                     onTap: () => launch(
                         'https://docs.flutter.io/flutter/services/UrlLauncher-class.html')),
               ],
             ),
           ),
         ),
       );
     }
   }
   ```

Answer 1

什么是 Navigator.of(context)？

当你调用Navigator.of(context) 时，flutter 会尝试获取给定context 的Navigator。

为什么会出现错误？

Navigator 放在小部件树中为MaterialApp，因此，任何context 下面 MaterialApp 都应该能够调用Navigator.of(context)。

您使用的是MyApp 的context，它高于 MaterialApp，因此出现错误。

解决方案

您需要获得 bellow MaterialApp 的上下文。实现此目的的一种简单方法是使用 Builder 小部件。

这是您使用Builder 获取正确context 的代码：

MaterialApp(
  home: Builder(
    builder: (context) {
      return Scaffold(
        body: Column(
          children:  <Widget>[
            Padding(
              padding: const EdgeInsets.all(18.0),
              child: Text(
                'choose an option',
                style: TextStyle(
                  fontSize: 32,
                  color: Colors.black87,
                ),
              ),
            ),
            Center(
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(45.0)),
                child: Image(
                  width: 350,
                  image: NetworkImage(
                      'https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80'),
                ),
              ),
            ),

            SizedBox(
              height: 40.0,
            ),
            Center(
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(45.0)),
                child: GestureDetector(
                  onTap: () {
                    _navigateToNextScreen(context);
                  },
                  child: Image(
                    width: 350,
                    image: NetworkImage(
                        "https://images.unsplash.com/photo-1555967522-37949fc21dcb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2Nob2xhcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"),
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }
  ),
);