2025-06-27 Flutter 常见路由配置

一. 原生 MaterialApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/', // 默认初始路由
      routes: {
        '/': (context) => HomeScreen(), // 根路由
        '/second': (context) => SecondScreen(), // 定义'/second'路由对应的页面
      },
    );
  }
}

or

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: (settings) {
        // 根据路由名称和参数生成页面
        switch (settings.name) {
          case '/':
            return MaterialPageRoute(builder: (context) => HomeScreen());
          case '/second':
            // 可以从settings.arguments中获取参数
            final args = settings.arguments as Map<String, String>; // 假设传递的是Map类型参数
            return MaterialPageRoute(builder: (context) => SecondScreen(args['param'])); // 假设SecondScreen有一个参数接收的构造函数或字段
          default:
            return MaterialPageRoute(builder: (context) => UnknownScreen()); // 未知路由的处理
        }
      },
    );
  }
}

正常Push 还有一些其他方法 replace

Navigator.pushNamed(context, '/second'); //直接根据名字跳
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => SecondScreen())); //直接根据Page跳

二. GoRouter

final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'details',
          builder: (BuildContext context, GoRouterState state) {
            return const DetailsScreen();
          },
        ),
      ],
    ),
  ],
);
/// The main app.
class MyApp extends StatelessWidget {
  /// Constructs a [MyApp]
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

跳转

context.go('/details')
context.replace('/details');

三. Getx

@override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      initialBinding: ControllerBinding(),
      getPages: Routes.pages,
      initialRoute: RoutePath.lanuchP,
    );
  }
/// 路由路径
class RoutePath {
  /// 登录
  static const String login = '/login';
}

class Routes {
  static final List<GetPage> pages = [
    GetPage(name: RoutePath.login, page: () => LoginPage()),
  ];
}

跳转

Get.toNamed( RoutePath.login);
Get.replace(LoginPage());

常见三种主流跳转

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容