首页 > 解决方案 > 使用 Fluro 进行导航(Flutter web)

问题描述

我正在尝试导航到页面。试图创建一些路线。

我遇到的问题是:

  1. 当路由更改时,它会从 URL 中消失
  2. 当我尝试在浏览器中后退或前进时,它什么也不做。

我正在尝试使用Fluro 包。我也在尝试将他们的示例与我的示例进行比较,但我没有发现有什么区别。主要飞镖:

void main() {
  runApp(AppComponent());
}

class AppComponent extends StatefulWidget {
  @override
  State createState() {
    return _AppComponentState();
  }
}

class _AppComponentState extends State<AppComponent> {
  _AppComponentState() {
    final router = FluroRouter();
    Routes.configureRoutes(router);
    Application.router = router;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NexTeam',
      debugShowCheckedModeBanner: false,
      initialRoute: kHomeRoute,
      onGenerateRoute: Application.router.generator,
    );
  }
}
class Application {
  static FluroRouter router;
}

路由器.dart:

class Routes {
  final router = FluroRouter();

  static Handler _loginHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => LoginPage());
  static Handler _registerHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => RegisterPage());
  static Handler _homeHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => HomePage());
  static Handler _profileHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => ProfilePage());
  static Handler _notificationsHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => NotificationsPage());
  static Handler _chatHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => ChatPage());

  static void configureRoutes(FluroRouter router) {
    router.define(kLoginRoute, handler: _loginHandler);
    router.define(kRegisterRoute, handler: _registerHandler);
    router.define(kHomeRoute, handler: _homeHandler);
    router.define(kProfileRoute, handler: _profileHandler);
    router.define(kNotificationsRoute, handler: _notificationsHandler);
    router.define(kChatRoute, handler: _chatHandler);
  }
}

导航功能:

Application.router.navigateTo(context, kNotificationsRoute);

标签: flutterflutter-webflutter-navigation

解决方案


我仍然不知道为什么,但问题是我所有的页面都以 开头MaterialApp,而解决方案是使用Material.


推荐阅读