Flutter自动生成代码插件ds_flutter_gen的使用
Flutter自动生成代码插件ds_flutter_gen的使用
在本指南中,我们将详细介绍如何使用ds_flutter_gen
插件来自动生成Flutter应用中的代码。该插件可以帮助你避免手动编写资产路径字符串,从而提高代码的安全性和可维护性。
1. 安装过程
通过pub global
安装
dart pub global activate ds_flutter_gen
可能需要设置环境变量以确保ds_flutter_gen
命令可以在任何地方运行。
作为build_runner
的一部分安装
- 在你的
pubspec.yaml
文件中添加依赖:
dev_dependencies:
build_runner:
ds_flutter_gen_runner:
- 运行以下命令来安装依赖:
flutter pub get
- 使用
build_runner
生成代码:
dart run build_runner build
2. 配置文件
ds_flutter_gen
根据pubspec.yaml
文件中的配置生成代码。默认配置可以在这里找到:默认配置。
# pubspec.yaml
# ...
ds_flutter_gen:
output: lib/gen/ # 可选(默认:lib/gen/)
line_length: 80 # 可选(默认:80)
# 可选
integrations:
flutter_svg: true
flare_flutter: true
rive: true
lottie: true
colors:
inputs:
- assets/color/colors.xml
flutter:
uses-material-design: true
assets:
- assets/images/
fonts:
- family: Raleway
fonts:
- asset: assets/fonts/Raleway-Regular.ttf
- asset: assets/fonts/Raleway-Italic.ttf
style: italic
你也可以在build.yaml
文件中配置生成选项,它将优先于pubspec.yaml
中的配置:
# build.yaml
# ...
targets:
$default:
builders:
ds_flutter_gen_runner: # 或者 flutter_gen
options:
output: lib/build_gen/ # 可选(默认:lib/gen/)
line_length: 120 # 可选(默认:80)
3. 使用示例
资产生成
# pubspec.yaml
flutter:
assets:
- assets/images/
- assets/images/chip3/chip.jpg
- assets/images/chip4/chip.jpg
- assets/images/icons/paint.svg
- assets/images/icons/dart@test.svg
- assets/json/fruits.json
- assets/flare/Penguin.flr
- assets/rive/vehicles.riv
- pictures/ocean_view.jpg
这些配置会默认在lib/gen/
目录下生成assets.gen.dart
文件。
// 使用生成的类
Widget build(BuildContext context) {
return Assets.images.chip3.image();
}
字体生成
# pubspec.yaml
flutter:
fonts:
- family: Raleway
fonts:
- asset: assets/fonts/Raleway-Regular.ttf
- asset: assets/fonts/Raleway-Italic.ttf
style: italic
- family: RobotoMono
fonts:
- asset: assets/fonts/RobotoMono-Regular.ttf
- asset: assets/fonts/RobotoMono-Bold.ttf
weight: 700
这些配置会默认在lib/gen/
目录下生成fonts.gen.dart
文件。
// 使用生成的字体
Text(
'Hi there, I\'m FlutterGen',
style: TextStyle(
fontFamily: FontFamily.robotoMono,
fontFamilyFallback: const [FontFamily.raleway],
),
)
颜色生成
# pubspec.yaml
ds_flutter_gen:
colors:
inputs:
- assets/color/colors.xml
这些配置会默认在lib/gen/
目录下生成colors.gen.dart
文件。
// 使用生成的颜色
Text(
'Hi there, I\'m FlutterGen',
style: TextStyle(
color: ColorName.denim,
),
)
4. 示例代码
import 'package:example_resources/gen/assets.gen.dart';
import 'package:flutter/material.dart';
import 'gen/assets.gen.dart';
import 'gen/colors.gen.dart';
import 'gen/fonts.gen.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// 自动从FlutterGen生成的字体
fontFamily: MyFontFamily.raleway,
primarySwatch: MyColorName.crimsonRed,
),
home: Scaffold(
appBar: AppBar(
title: const Text('FlutterGen'),
),
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 自动从FlutterGen生成的图像
SizedBox(
width: 200,
height: 200,
child: MyAssets.flare.penguin.flare(
animation: 'walk',
fit: BoxFit.contain,
),
),
SizedBox(
width: 200,
height: 200,
child: MyAssets.rive.vehicles.rive(
fit: BoxFit.contain,
),
),
SizedBox(
width: 200,
height: 200,
child: MyAssets.lottie.hamburgerArrow.lottie(
fit: BoxFit.contain,
),
),
SizedBox(
width: 200,
height: 200,
child: MyAssets.lottie.geometricalAnimation.lottie(
fit: BoxFit.contain,
),
),
SizedBox(
width: 200,
height: 200,
child: MyAssets.lottie.alarmClockLottieV440.lottie(
fit: BoxFit.contain,
),
),
MyAssets.images.chip1.image(),
Container(
height: 400,
decoration: BoxDecoration(
image: DecorationImage(
image: MyAssets.images.chip1.provider(),
),
),
child: const Center(child: Text('Deco')),
),
// 使用example_resource包
MyAssets.images.icons.kmm.svg(key: const Key('kmm_svg')),
MyAssets.images.icons.fuchsia.svg(),
MyAssets.images.icons.paint.svg(
width: 120,
height: 120,
),
Text(MyAssets.images.icons.kmm.path),
Text(MyAssets.images.icons.kmm.keyName),
Text(ResAssets.images.dart.path),
Text(ResAssets.images.dart.keyName),
ResAssets.images.flutter3.image(),
ResAssets.images.dart.svg(),
SizedBox(
width: 200,
height: 200,
child: ResAssets.images.skills.rive(
fit: BoxFit.contain,
),
),
SizedBox(
width: 200,
height: 200,
child: ResAssets.images.favorite.flare(
shouldClip: false,
),
),
SizedBox(
width: 200,
height: 200,
child: ResAssets.images.runningCarOnRoad.lottie(
fit: BoxFit.contain,
),
),
const Text(
'Hi there, I\'m FlutterGen',
style: TextStyle(
// 自动从FlutterGen生成的颜色
color: MyColorName.black60,
// 自动从FlutterGen生成的字体
fontFamily: MyFontFamily.robotoMono,
fontFamilyFallback: [MyFontFamily.raleway],
),
),
],
),
),
),
),
));
}
更多关于Flutter自动生成代码插件ds_flutter_gen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter自动生成代码插件ds_flutter_gen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
ds_flutter_gen
是一个用于自动生成 Flutter 代码的插件,旨在帮助开发者减少重复性工作,提高开发效率。它通常用于生成一些常见的代码模板,如路由、模型类、网络请求等。
安装 ds_flutter_gen
-
在
pubspec.yaml
中添加依赖:首先,你需要在
pubspec.yaml
文件中添加ds_flutter_gen
的依赖。dev_dependencies: ds_flutter_gen: ^1.0.0
然后运行
flutter pub get
来获取依赖。 -
配置
build.yaml
:你需要在项目根目录下创建一个
build.yaml
文件,用于配置ds_flutter_gen
的行为。targets: $default: builders: ds_flutter_gen|ds_flutter_gen: enabled: true
使用 ds_flutter_gen
ds_flutter_gen
通常通过注解或配置文件来生成代码。以下是一些常见的用法示例:
1. 生成路由
假设你有一个路由配置文件 routes.yaml
,内容如下:
routes:
- name: HomePage
path: /home
- name: ProfilePage
path: /profile
ds_flutter_gen
可以根据这个配置文件自动生成路由相关的代码。
运行以下命令生成代码:
flutter pub run build_runner build
生成的代码可能会包含路由的映射和相关方法,例如:
class AppRoutes {
static const String home = '/home';
static const String profile = '/profile';
static Map<String, WidgetBuilder> routes = {
home: (context) => HomePage(),
profile: (context) => ProfilePage(),
};
}
2. 生成模型类
如果你有一个 JSON 数据,ds_flutter_gen
可以帮助你生成对应的 Dart 模型类。例如,给定一个 JSON 文件 user.json
:
{
"id": 1,
"name": "John Doe",
"email": "john.doe@example.com"
}
运行以下命令生成模型类:
flutter pub run build_runner build
生成的代码可能会类似于:
class User {
final int id;
final String name;
final String email;
User({required this.id, required this.name, required this.email});
factory User.fromJson(Map<String, dynamic> json) {
return User(
id: json['id'],
name: json['name'],
email: json['email'],
);
}
Map<String, dynamic> toJson() {
return {
'id': id,
'name': name,
'email': email,
};
}
}
3. 生成网络请求代码
ds_flutter_gen
还可以根据 API 定义生成网络请求代码。例如,给定一个 API 配置文件 api.yaml
:
endpoints:
- name: getUser
path: /user/{id}
method: GET
response: User
生成的代码可能会包含网络请求的方法:
class ApiService {
Future<User> getUser(int id) async {
final response = await http.get(Uri.parse('/user/$id'));
if (response.statusCode == 200) {
return User.fromJson(jsonDecode(response.body));
} else {
throw Exception('Failed to load user');
}
}
}