Flutter路由管理扩展插件go_router_lego的使用

Flutter路由管理扩展插件go_router_lego的使用

安装

  1. 打开终端并进入Lego项目的根目录，执行以下命令以安装CLI，并创建一个新的Lego项目（如果还没有项目）。

    flutter pub global activate lego_cli
lego create

  2. 在终端中，输入以下命令将go_router_lego添加到项目中。

    lego add go_router_lego

使用

在lib/util/config/go_router_lego/_.dart文件中配置路由。下面是一个完整的示例演示如何使用go_router_lego来管理路由。

示例代码

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:go_router_lego/go_router_lego.dart';

// 创建一个简单的页面
class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 导航到另一个页面
            context.go('/detail');
          },
          child: Text('前往详情页'),
        ),
      ),
    );
  }
}

// 创建另一个页面
class DetailScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('详情页'),
      ),
      body: Center(
        child: Text('这是详情页的内容'),
      ),
    );
  }
}

// 配置路由
void main() {
  final router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => HomeScreen(),
      ),
      GoRoute(
        path: '/detail',
        builder: (context, state) => DetailScreen(),
      ),
    ],
  );

  runApp(MaterialApp.router(
    router: router,
  ));
}

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

1 回复

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


go_router_lego 是一个基于 go_router 的 Flutter 路由管理扩展插件，旨在简化路由配置和管理。它提供了一些额外的功能和工具，使得在 Flutter 应用中处理路由更加高效和灵活。以下是如何使用 go_router_lego 的基本指南。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 go_router_lego 的依赖：

dependencies:
  flutter:
    sdk: flutter
  go_router_lego: ^latest_version

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

2. 基本用法

2.1 创建路由配置

go_router_lego 允许你通过简单的配置来定义路由。你可以使用 GoRouterLego 类来创建路由配置。

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

void main() {
  final GoRouter router = GoRouterLego(
    routes: [
      GoRouteLego(
        path: '/',
        builder: (context, state) => const HomeScreen(),
      ),
      GoRouteLego(
        path: '/details/:id',
        builder: (context, state) {
          final id = state.params['id'];
          return DetailsScreen(id: id);
        },
      ),
    ],
  );

  runApp(MyApp(router: router));
}

class MyApp extends StatelessWidget {
  final GoRouter router;

  const MyApp({Key? key, required this.router}) : super(key: key);

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

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.go('/details/123');
          },
          child: const Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  final String id;

  const DetailsScreen({Key? key, required this.id}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: Center(
        child: Text('Details for ID: $id'),
      ),
    );
  }
}

2.2 路由参数

你可以通过 state.params 来获取路由中的参数。例如，在上面的例子中，/details/:id 路由中的 id 参数可以通过 state.params['id'] 来获取。

2.3 嵌套路由

go_router_lego 也支持嵌套路由。你可以通过 GoRouteLego 的 routes 参数来定义嵌套路由。

final GoRouter router = GoRouterLego(
  routes: [
    GoRouteLego(
      path: '/',
      builder: (context, state) => const HomeScreen(),
      routes: [
        GoRouteLego(
          path: 'details/:id',
          builder: (context, state) {
            final id = state.params['id'];
            return DetailsScreen(id: id);
          },
        ),
      ],
    ),
  ],
);

3. 高级功能

3.1 路由守卫

go_router_lego 提供了路由守卫功能，允许你在路由跳转之前执行一些逻辑，例如身份验证检查。

final GoRouter router = GoRouterLego(
  routes: [
    GoRouteLego(
      path: '/',
      builder: (context, state) => const HomeScreen(),
      guards: [
        (context, state) {
          // 检查用户是否已登录
          final isLoggedIn = checkIfUserIsLoggedIn();
          if (!isLoggedIn) {
            return '/login';
          }
          return null;
        },
      ],
    ),
  ],
);

3.2 路由动画

你可以通过 GoRouteLego 的 pageBuilder 参数来自定义路由动画。

final GoRouter router = GoRouterLego(
  routes: [
    GoRouteLego(
      path: '/',
      pageBuilder: (context, state) {
        return CustomPage(
          key: state.pageKey,
          child: const HomeScreen(),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            return FadeTransition(
              opacity: animation,
              child: child,
            );
          },
        );
      },
    ),
  ],
);
回到顶部