Flutter Dart中Context无Navigator错误的解决方法

点击按钮尝试切换页面时出现如下错误：

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

The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.
When the exception was thrown, this was the stack: 
#0      Navigator.of.<anonymous closure> (package:flutter/src/widgets/navigator.dart:2554:9)
#1      Navigator.of (package:flutter/src/widgets/navigator.dart:2561:6)
#2      _MyAppState.build.<anonymous closure>.<anonymous closure> (package:base_app/main.dart:64:35)
#3      _InkResponseState.handleTap (package:flutter/src/material/ink_well.dart:1072:21)
#4      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:253:24)
#5      TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:627:11)
#6      BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:306:5)
#7      BaseTapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:239:7)

问题代码 #

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';

import 'package:base_app/add_device.dart';

import 'amplifyconfiguration.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isAmplifyConfigured = false;

  @override
  void initState() {
    super.initState();
    _configureAmplify();
  }

  void _configureAmplify() async {
    try {
      await Amplify.addPlugin(AmplifyAuthCognito());
      await Amplify.configure(amplifyconfig);
      setState(() => _isAmplifyConfigured = true);
      print('Successfully configured');
    } on Exception catch (e) {
      print('Error configuring Amplify: $e');
    }
  }

  Future<bool> isUserSignedIn() async {
    final result = await Amplify.Auth.fetchAuthSession();
    return result.isSignedIn;
  }

  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        builder: Authenticator.builder(),
        home: _isAmplifyConfigured? FutureBuilder(
            future: isUserSignedIn(),
            builder: (BuildContext ctx, AsyncSnapshot snapshot) {
              if (snapshot.data == null) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              } else {
                return Scaffold(
                    floatingActionButton: FloatingActionButton(
                      backgroundColor: Colors.blue,
                      foregroundColor: Colors.white,
                      onPressed: () => {
                        Navigator.of(context).push(
                            MaterialPageRoute(builder: (context) => AddDevice())),

                      },
                      child: Icon(Icons.add),
                    )
                );
              }
            }): Text("not logged in")
      ),
    );
  }
}

问题原因 #

你调用Navigator.of(context)时使用的context是_MyAppState的上下文，这个上下文位于MaterialApp的上层，而Navigator是MaterialApp内部自动创建的组件，所以这个上层上下文无法找到Navigator实例。

解决方案 #

直接使用FutureBuilder的builder参数里的ctx即可，这个上下文属于MaterialApp子树，能正确找到Navigator：

修改onPressed中的代码：

onPressed: () => {
  Navigator.of(ctx).push(
      MaterialPageRoute(builder: (context) => AddDevice())),
},

或者另一种方法是用Builder组件包裹Scaffold，通过Builder获取子树上下文：

return Builder(
  builder: (scaffoldCtx) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        onPressed: () => {
          Navigator.of(scaffoldCtx).push(
              MaterialPageRoute(builder: (context) => AddDevice())),
        },
        child: Icon(Icons.add),
      ),
    );
  },
);

内容的提问来源于stack exchange，提问作者Muleque