1. 安装 mason CLI(如已安装跳过)
csharp
dart pub global activate mason_cli
2. 初始化 mason(如已有 .mason/
可跳过)
csharp
mason init
3. 新建 brick
arduino
mason new fast_page
会生成 .mason/bricks/fast_page/
目录。
4. 在 .mason/bricks/fast_page/__brick__/
下新建目录和文件
进入 .mason/bricks/fast_page/__brick__/
,新建如下目录结构(直接写模板变量名):
scss
view/
{{name.snakeCase()}}_page.dart
provider/
{{name.snakeCase()}}_provider.dart
route.txt
route_const.txt
5. 填写模板内容
view/{{name.snakeCase()}}_page.dart
typescript
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../provider/{{name.snakeCase()}}_provider.dart';
class {{name.pascalCase()}}Page extends ConsumerWidget {
const {{name.pascalCase()}}Page({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(title: const Text('{{name.pascalCase()}}')),
body: const Center(child: Text('This is {{name.pascalCase()}}Page')),
);
}
}
provider/{{name.snakeCase()}}_provider.dart
dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
final {{name.camelCase()}}Provider = StateProvider<int>((ref) => 0);
route.txt
scss
GoRoute(
path: RouterConst.{{name.camelCase()}}Page,
name: '{{name.pascalCase()}}',
builder: (context, state) => const {{name.pascalCase()}}Page(),
),
route_const.txt
arduino
static const String {{name.camelCase()}}Page = '/{{name.paramCase()}}';
6. 配置 brick.yaml(在 .mason/bricks/fast_page/brick.yaml
)
yaml
name: fast_page
description: Flutter page with provider and route
version: 0.1.0+1
environment:
mason: ^0.1.1
vars:
name:
type: string
description: The page name
prompt: What is the name of the page?
7. 配置项目根目录 mason.yaml
在你项目根目录的 mason.yaml
里加:
yaml
bricks:
fast_page:
path: .mason/bricks/fast_page
8. 拉取模板
arduino
mason get
9. 使用 mason 生成页面
在你想生成的目录(建议项目根目录)下执行:
css
mason make fast_page --name login
10. 复制文件到目标位置
- 将
view/login_page.dart
、provider/login_provider.dart
移动到你实际 feature 模块目录(如lib/features/login/view/
、lib/features/login/provider/
) - 将
route.txt
内容复制到lib/route/app_router.dart
(你的 go_router 配置) - 将
route_const.txt
内容复制到lib/route/router_const.dart
(你的 RouterConst 类)
结论
- 一次性生成页面/provider/路由片段/路由常量
- 复制粘贴,极大提升你的 Flutter 工程效率和规范