Search code examples
flutterflutter-webflutter-navigation

Navigation with Fluro (Flutter web)


I'm trying to have navigation into pages. Trying to create some routes.

The problem I have is:

  1. When the route changes it disappears from the URL
  2. When I try to go back or forward in the browser it doesn't do anything.

I'm trying to use the Fluro package. I'm also trying to compare their example with mine and I don't find what is the difference. main.dart:

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;
}

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);
  }
}

function to navigate:

Application.router.navigateTo(context, kNotificationsRoute);


Solution

  • I still don't know why, but the issue was that all my pages started with MaterialApp, and the solution was to use Material.