Flutter工具类代码生成插件flutter_util_generator的使用

Flutter工具类代码生成插件flutter_util_generator的使用

什么是flutter_util_generator

Flutter_util_generator 是一个用于 Flutter 的文件生成器，它可以帮助你轻松地生成文件。

安装该插件可以通过在终端运行以下命令：

flutter pub add flutter_util_generator

或者通过将以下内容添加到你的 pubspec.yaml 文件中：

dev_dependencies:
  flutter_util_generator: last_version

如何使用

选择不同的生成器并运行相应的命令。

Bloc生成器

功能之一是使用 Bloc 模式生成具有以下结构的 Bloc 文件：

example_bloc
├── bloc
│   ├── bloc.dart
│   ├── bloc_event.dart
│   └── bloc_state.dart
└── view
    └── view.dart

要生成这些文件，请在终端运行以下命令：

flutter pub run flutter_util_generator:generate_bloc --name blocName --path path/to/your/bloc

或者

flutter pub run flutter_util_generator:generate_bloc -n blocName -p path/to/your/bloc

Router生成器

生成所有需要使用的文件，并设置包 go_router。使用 ShellRoute 包围应用程序的大多数路由。 生成的代码使用了包 go_router 来生成路由。

你可以选择两种类型的 ShellRoutes：

  • 导航栏
  • 导航轨
navigation
├── app_router.dart
├── routes.dart
├── scaffold_with_nav_bar.dart
└── scaffold_with_nav_bar_destination.dart

navigation
├── app_router.dart
├── routes.dart
├── scaffold_with_navigation_rail.dart
└── scaffold_with_navigation_rail_destination.dart

要生成这些文件，请在终端运行以下命令：

flutter pub run flutter_util_generator:generate_router --type rail --path path/to/your/navigation
flutter pub run flutter_util_generator:generate_router --type navbar --path path/to/your/navigation

一旦文件生成，你可以根据需要更改路由和导航轨或导航栏的标签。你还需要在 app_router.dart 和 routes.dart 文件中设置自定义路由。

要在你的应用中使用新的路由器，你需要在 MyApp 小部件中进行以下更改：

将

return MaterialApp(
  [...]
)

替换为

return MaterialApp.router(
  routerConfig: AppRouter.getInstance().router,
  [...]
)

更多关于Flutter工具类代码生成插件flutter_util_generator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter工具类代码生成插件flutter_util_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_util_generator插件的一个详细示例。这个插件主要用于生成一些工具类代码，比如常量、国际化字符串等，以减少手动编写这些代码的繁琐工作。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  build_runner: ^2.1.4  # 根据最新版本调整
  flutter_util_generator: ^x.y.z  # 替换为最新版本号

2. 创建配置文件

在项目的根目录下创建一个名为util_config.yaml的配置文件，用于配置flutter_util_generator的行为。例如，如果你想生成国际化字符串，你可以这样配置：

# util_config.yaml
intl:
  enabled: true
  files:
    - path: lib/l10n/messages.arb
      class_name: S

这里假设你有一个messages.arb文件用于存放国际化字符串。

3. 创建ARB文件

在lib/l10n/目录下创建一个messages.arb文件，内容如下：

{
  "welcome_message": "Welcome to our app!",
  "goodbye_message": "Goodbye!"
}

4. 运行代码生成器

在终端中运行以下命令来生成工具类代码：

flutter pub run build_runner build

这个命令会根据util_config.yaml中的配置生成相应的工具类代码。例如，对于国际化字符串，它会生成一个S类，你可以通过S.of(context).welcome_message来访问国际化字符串。

5. 使用生成的代码

现在，你可以在你的Flutter项目中使用生成的代码了。例如，在main.dart中：

import 'package:flutter/material.dart';
import 'package:your_app_name/generated/l10n.dart';  // 注意导入生成的国际化文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        S.delegate,  // 添加国际化委托
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,  // 添加支持的地区
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).welcome_message),  // 使用生成的国际化字符串
      ),
      body: Center(
        child: Text(S.of(context).goodbye_message),
      ),
    );
  }
}

总结

以上就是一个简单的使用flutter_util_generator插件的示例。通过配置util_config.yaml文件并运行代码生成器，你可以自动生成一些工具类代码，从而简化开发过程。请确保根据最新的flutter_util_generator文档和API调整代码和配置。

回到顶部