顶层的 Flutter Router Navigator 和 Provider 可以协同工作吗？

Question

我在使用提供者和导航器的状态管理时遇到了一个大问题。

我们必须知道的事情：

1) 我的 RESTFUL API 给出了一个 12 点过期的令牌。

2) 我的家：如果用户通过身份验证或未通过身份验证，则参数是有条件的。如果没有，我必须根据其他参数来决定哪个屏幕必须是家。

3) 如果我在一个屏幕上并且令牌在应用程序对 API 执行的任何请求时过期，我：

在我的 auth 提供程序中调用一个执行注销程序的函数（我用令牌清理 localStorage）。此 auth 提供商将名为 isAuth 的属性设置为 false。
当 isAuth 为 false 时，如果您查看 home: 处的 main.dart 文件，您将看到 LoginPage().

这里的一切都很好。问题是当我必须使用 Navigator.of... 进行重定向时。例如，如果令牌过期错误，我会这样做：Navigator.popUntil(context, ModalRoute.withName('/login')); 应用程序毫无问题地转到 LoginPage() ，但是...当我尝试使用登录（使用 auth 提供商的 login 功能）时，它停留在登录页面上！如果我在任何地方使用 Navigator 去任何其他地方，它似乎会覆盖我用来控制哪个页面显示为 home 的 'state management way'。

你能帮帮我吗？

我的main.dart代码：

// Providers
import 'package:provider/provider.dart';
import 'package:cadsanjuan_movil/providers/auth.dart';

// Pages
import './pages/login_page.dart';
import './pages/initial_loading_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final storage = new FlutterSecureStorage();
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
          ChangeNotifierProvider<Auth>(create: (context) => Auth()),
          ChangeNotifierProvider<TurnActive>(create: (context) => TurnActive()),
          ChangeNotifierProxyProvider<TurnActive, Checkup>(
              create: (context) => Checkup(),
              update: (_, turnActive, checkup) {
                checkup.turnData = turnActive.turnData;
                return checkup;
              }),
          ChangeNotifierProxyProvider<Auth, ErrorProvider>(
              create: (context) => ErrorProvider(),
              update: (_, auth, errorProvider) {
                errorProvider.logoff = auth.logoff;
                return errorProvider;
              }),
        ],
        child: Consumer3<Auth, TurnActive, Checkup>(
          builder: (context, auth, turnActive, checkup, _) {
            return MaterialApp(
              title: 'CAD App',
              theme: ThemeData(
                primarySwatch: Colors.blue,
              ),
              home: auth.isAuth
                  ? (turnActive.turnData != null &&
                          turnActive.turnData['turn']['checkUpStartId'] != null)
                      ? CheckupPage() // Si el cotejo está en proceso
                      : InitialLoadingPage() // Si no hay cotejo iniciado
                  : FutureBuilder(
                      // Si estamos no hay autenticación en el estado, se chequea en el localStorage
                      future: auth.tryAutoLogin(),
                      builder: (ctx, authResultSnapshot) =>
                          authResultSnapshot.connectionState ==
                                  ConnectionState.waiting
                              ? LoadingData()
                              : LoginPage(),
                    ),
              routes: {
                LoginPage.routeName: (context) => LoginPage(),
                InitialLoadingPage.routeName: (context) => InitialLoadingPage(),
                CheckupPage.routeName: (context) => CheckupPage(),
                CheckupGroupsPage.routeName: (context) => CheckupGroupsPage(),
              },
            );
          },
        ));
  }
}

Answer 1

问题出在这里：

Navigator.popUntil(context, ModalRoute.withName('/login'))

如果我们按下“/login”，这将覆盖 MaterialApp 中的 home 参数，加载登录页面但页面不会弹出，因为路由。正确的做法是：

Navigator.of(context)
          .pushNamedAndRemoveUntil('/', (Route<dynamic> route) => false);

有了这个，我们重定向到“/”，然后使用 home 参数的状态管理将起作用。

顶层的 Flutter Router Navigator 和 Provider 可以协同工作吗？

Can Flutter Router Navigator and Provider at top level work together?

provider

router

state

state-management

flutter