Flutter动态路由管理插件dynamic_router的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter动态路由管理插件dynamic_router的使用

dynamic_router 是一个基于 Flutter 的 Navigation API 的路由管理包。它可以帮助你更方便地管理和处理应用内的导航逻辑。

完整示例代码

import 'package:dynamic_router/approuter.dart';
import 'package:dynamic_router_example/detail/route/detail_route.dart';
import 'package:dynamic_router_example/home/route/home_route.dart';
import 'package:dynamic_router_example/splash/route/splash_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var dynamicRouter = DynamicRouter().routerConfig(
    homePage: SplashRoute(),
    // delegate: routerDelegate
    // backButtonDispatcher:  PageStackBackButtonDispatcher(),
  );

  [@override](/user/override)
  void initState() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: dynamicRouter,
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
            style: TextButton.styleFrom(
                backgroundColor: Colors.blue, foregroundColor: Colors.white)),
      ),
    );
  }
}

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

  routeToHome(BuildContext context) {
    AppRouter.pushAndRemoveUntil(HomeRoute(), (s) => false, context: context);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          style: TextButton.styleFrom(
            backgroundColor: Colors.blue,
          ),
          onPressed: () => routeToHome(context),
          child: const Text(
            "到主页",
          ),
        ),
      ),
    );
  }
}

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

  routeToDetail(BuildContext context, {required int id}) {
    AppRouter.pushPage(HomeDetailRoute(id: id), context: context);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          style: TextButton.styleFrom(
            backgroundColor: Colors.blue,
          ),
          onPressed: () => routeToDetail(context, id: 1),
          child: const Text(
            "到详情页",
          ),
        ),
      ),
    );
  }
}

代码说明

main.dart

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var dynamicRouter = DynamicRouter().routerConfig(
    homePage: SplashRoute(),
  );

  [@override](/user/override)
  void initState() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: dynamicRouter,
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
            style: TextButton.styleFrom(
                backgroundColor: Colors.blue, foregroundColor: Colors.white)),
      ),
    );
  }
}
  • MyApp 类定义了应用的主入口点。
  • dynamicRouter 使用 DynamicRouter 创建了一个路由器配置，设置首页为 SplashRoute。
  • SystemChrome.setPreferredOrientations 设置了应用的默认方向为横屏。
  • MaterialApp.router 使用 routerConfig 来设置路由配置。

SplashScreen

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

  routeToHome(BuildContext context) {
    AppRouter.pushAndRemoveUntil(HomeRoute(), (s) => false, context: context);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          style: TextButton.styleFrom(
            backgroundColor: Colors.blue,
          ),
          onPressed: () => routeToHome(context),
          child: const Text(
            "到主页",
          ),
        ),
      ),
    );
  }
}
  • SplashScreen 是应用启动时的第一个页面。
  • routeToHome 方法用于导航到主页。
  • 按钮点击事件调用 routeToHome 方法进行导航。

HomeScreen

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

  routeToDetail(BuildContext context, {required int id}) {
    AppRouter.pushPage(HomeDetailRoute(id: id), context: context);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          style: TextButton.styleFrom(
            backgroundColor: Colors.blue,
          ),
          onPressed: () => routeToDetail(context, id: 1),
          child: const Text(
            "到详情页",
          ),
        ),
      ),
    );
  }
}

更多关于Flutter动态路由管理插件dynamic_router的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter动态路由管理插件dynamic_router的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用dynamic_router插件进行动态路由管理的示例代码。dynamic_router插件允许你动态地定义和管理路由，这在需要根据条件或配置动态生成路由时非常有用。

首先，确保你已经在pubspec.yaml文件中添加了dynamic_router依赖：

dependencies:
  flutter:
    sdk: flutter
  dynamic_router: ^最新版本号 # 请替换为最新的版本号

然后，运行flutter pub get来安装依赖。

接下来，我们将展示如何配置和使用dynamic_router。

1. 创建路由配置

首先，定义一个路由配置类，这通常包含路由的路径、构建页面的函数等信息。在实际应用中，这些配置可能来自服务器或本地配置文件。

import 'package:flutter/material.dart';
import 'package:dynamic_router/dynamic_router.dart';

class MyRouteConfig {
  final String path;
  final WidgetBuilder builder;

  MyRouteConfig({required this.path, required this.builder});
}

List<MyRouteConfig> getRoutes() {
  return [
    MyRouteConfig(
      path: '/',
      builder: (context) => HomePage(),
    ),
    MyRouteConfig(
      path: '/details',
      builder: (context) => DetailsPage(),
    ),
    // 你可以根据需要添加更多路由配置
  ];
}

2. 设置DynamicRouter

在你的应用入口文件（通常是main.dart）中，使用DynamicRouter来管理路由。

import 'package:flutter/material.dart';
import 'package:dynamic_router/dynamic_router.dart';
import 'route_config.dart'; // 假设你将上面的代码放在route_config.dart文件中

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: DynamicRouterDelegate(
        routes: getRoutes().map((config) => DynamicRoute(
          path: config.path,
          builder: config.builder,
        )).toList(),
      ),
      routeInformationParser: DynamicRouteInformationParser(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 导航到详情页面
            context.router.navigateTo('/details');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details Page')),
      body: Center(
        child: Text('This is the details page'),
      ),
    );
  }
}

3. 运行应用

现在，你可以运行你的Flutter应用。应用启动时会显示HomePage，点击按钮后会导航到DetailsPage。

注意

  • DynamicRouterDelegate和DynamicRouteInformationParser是dynamic_router插件提供的类，用于处理动态路由。
  • DynamicRoute是定义单个动态路由的类，包含路径和页面构建函数。
  • 你可以根据需要从服务器或本地文件加载路由配置，并在运行时更新路由表。

这个示例展示了如何使用dynamic_router插件进行基本的动态路由管理。根据你的需求，你可以进一步扩展和自定义路由配置和页面逻辑。

回到顶部