如何更换或更新flutter上的routerConfig？

Question

我应该如何根据用户角色更新或替换

Material.router routerConfig

？例子我有这个

loginRoute = GoRouter(...);
adminRouts = GoRouter(...);
memberRoutes = GoRouter(...);

MaterialApp.router()
  routerConfig: loginRoute,
);

现在成功登录后我想将

routerConfig

替换为

adminRoutes

或

memberRoutes

？

Answer 1

我能够使用

bloc

解决这个问题，当我触发登录时，它将更改适当的路线。

首先设置路线

// login routes has login and register
final loginRoute = GoRouter(routes:[...], ...);

// admin routes has routes if the user is already logged in
final adminRoute = GoRouter(routes:[...], ...);

然后我有一个

Cubit

，它会通知身份验证状态是否发生变化。

class RouteCubit extends Cubit<GoRouter> {
  // I  use authRouter as the default routes
  RouteCubit() : super(authRouter);

  GoRouter get router {
    return state;
  }

  void login() {
    // then when login is triggered it will emit the appropriate route
    // on this I just use adminRoute for example
    emit(adminRoute);
  }
}

然后在我的

main.dart

中，我使用主应用程序上的

BlockProvider

。

void main() {
  usePathUrlStrategy();
  runApp(
    BlocProvider(
      create: (context) => RouteCubit(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final MaterialTheme theme = MaterialTheme(Theme.of(context).textTheme);
    final ThemeData light = theme.lightHighContrast();
    final ThemeData dark = theme.darkHighContrast();

    return BlocBuilder<RouteCubit, GoRouter>(
      builder: (context, route) {
        return MaterialApp.router(
          // this is the part that will change the routes
          routerDelegate: route.routerDelegate,
          routeInformationParser: route.routeInformationParser,
          routeInformationProvider: route.routeInformationProvider,
          // routes setup end
          title: 'Health Information System',
          theme: light.copyWith(
            appBarTheme: AppBarTheme(
              backgroundColor: light.colorScheme.inversePrimary,
            ),
          ),
          darkTheme: dark.copyWith(
            appBarTheme: AppBarTheme(
              backgroundColor: dark.colorScheme.inversePrimary,
            ),
          ),
          themeMode: ThemeMode.light,
        );
      },
    );
  }
}

然后在登录屏幕上我只需调用

login

的

RouteCubit

。

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bloc Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Login Form'),
            ElevatedButton(
              onPressed: () {
                // calling the login to change the route
                BlocProvider.of<RouteCubit>(context).login();
              },
              child: const Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}