Flutter:零基础可操作的 mason 脚手架完整流程


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 类)

结论

  1. 一次性生成页面/provider/路由片段/路由常量
  2. 复制粘贴,极大提升你的 Flutter 工程效率和规范

相关推荐
葡萄城技术团队2 小时前
给 SpreadJS 单元格装上自动完成
前端
恋猫de小郭2 小时前
Flutter 多窗口重要优化合并,多窗口性能和实用性大幅提升
android·前端·flutter
StudyAndLife2 小时前
开源一个 API 开放平台门户前端:本地 npm run dev 就能逛接口文档
前端
广州华水科技2 小时前
GNSS变形监测一体机在大坝安全监测中的应用与优势分析
前端
hunteritself2 小时前
夯爆了!Qoder 狂肝 2 小时,293 个测试全绿,Credits 一分没扣
前端·人工智能·chrome·深度学习·机器学习
Hilaku2 小时前
为什么前端应该主动去学数据库?
前端·javascript·程序员
涛涛ing2 小时前
2026年,你终于可以在 `<textarea>` 里定位任意字符了
前端
三8443 小时前
TLS + Web API 安全 · 05 · JWT 与 OAuth2 攻防
前端·安全
zhongwei2283 小时前
vba将一个文件夹的内容复制到另外一个文件夹的函数,若存在则是否覆盖的参数。复制前检查源文件夹是否存在。若目标文件夹不存在,则新建
前端·vba
怕浪猫4 小时前
分享一个做视频的skill,这条白板视频,每一笔都是代码画的
前端·javascript·面试