flu-cli

主题

自定义模板最佳实践 ​

自定义模板是 flu-cli 最强大的功能之一，让你可以为团队创建统一的项目结构和规范。

为什么需要自定义模板？ ​

团队统一 ​

  • ✅ 统一项目结构
  • ✅ 统一代码风格
  • ✅ 统一依赖版本
  • ✅ 统一配置文件

提高效率 ​

  • ⚡ 快速创建项目
  • 🚀 预配置常用功能
  • 📦 预装常用依赖
  • 🎯 减少重复工作

最佳实践 ​

  • 📝 内置团队规范
  • 🔧 预配置开发工具
  • 🎨 统一 UI 组件库
  • 📚 包含项目文档

创建自定义模板 ​

方式 1: 本地模板 ​

适合快速测试和个人使用。

1. 创建模板目录 ​

bash
mkdir my-flutter-template
cd my-flutter-template

2. 初始化 Flutter 项目 ​

bash
flutter create .

3. 自定义项目结构 ​

my-flutter-template/
├── lib/
│   ├── main.dart
│   ├── app.dart
│   ├── core/
│   │   ├── theme/
│   │   ├── router/
│   │   └── constants/
│   ├── shared/
│   │   ├── widgets/
│   │   └── utils/
│   └── features/
│       └── home/
├── assets/
│   ├── images/
│   └── fonts/
├── .vscode/
│   └── dart.code-snippets
├── pubspec.yaml
└── README.md

4. 添加变量占位符 ​

在需要替换的地方使用变量：

dart
// lib/main.dart
import 'package:flutter/material.dart';
import 'app.dart';

void main() {
  runApp(const {{Name}}App());
}
yaml
# pubspec.yaml
name: { { projectName } }
description: A new Flutter project by {{author}}.

dependencies:
  flutter:
    sdk: flutter
  # 你的依赖

5. 使用模板 ​

bash
flu-cli new
# 选择: 新增自定义模板（本地）
# 输入: /path/to/my-flutter-template

方式 2: Git 模板（推荐） ​

适合团队协作和版本管理。

1. 创建 Git 仓库 ​

bash
# 在 GitHub/GitLab 创建仓库
# 例如: https://github.com/yourorg/flutter-template.git

2. 克隆并初始化 ​

bash
git clone https://github.com/yourorg/flutter-template.git
cd flutter-template

flutter create .

3. 自定义项目 ​

按照本地模板的方式自定义项目结构。

4. 提交到 Git ​

bash
git add .
git commit -m "Initial template"
git push origin main

5. 使用模板 ​

bash
flu-cli new
# 选择: 新增自定义模板（Git）
# 输入仓库: https://github.com/yourorg/flutter-template.git
# 输入分支: main

模板结构建议 ​

基础结构 ​

flutter-template/
├── lib/
│   ├── main.dart              # 应用入口
│   ├── app.dart               # 应用配置
│   ├── core/                  # 核心功能
│   │   ├── theme/            # 主题
│   │   ├── router/           # 路由
│   │   ├── constants/        # 常量
│   │   └── utils/            # 工具
│   ├── shared/               # 共享资源
│   │   ├── widgets/          # 通用组件
│   │   ├── models/           # 通用模型
│   │   └── services/         # 通用服务
│   └── features/             # 功能模块
│       └── home/             # 示例模块
├── assets/                   # 资源文件
│   ├── images/
│   ├── fonts/
│   └── icons/
├── .vscode/                  # VSCode 配置
│   ├── dart.code-snippets   # 代码片段
│   ├── settings.json        # 编辑器设置
│   └── launch.json          # 调试配置
├── test/                     # 测试文件
├── .gitignore
├── analysis_options.yaml     # 代码分析配置
├── pubspec.yaml
└── README.md

推荐包含的文件 ​

1. VSCode 代码片段 ​

.vscode/dart.code-snippets:

json
{
  "Flutter Stateful Page": {
    "prefix": "flu.stPage",
    "body": [
      "import 'package:flutter/material.dart';",
      "import '${1:{{vm_import}}}';",
      "",
      "class {{Name}}Page extends StatefulWidget {",
      "  const {{Name}}Page({super.key});",
      "",
      "  @override",
      "  State<{{Name}}Page> createState() => _{{Name}}PageState();",
      "}",
      "",
      "class _{{Name}}PageState extends State<{{Name}}Page> {",
      "  late final {{Name}}ViewModel _viewModel;",
      "",
      "  @override",
      "  void initState() {",
      "    super.initState();",
      "    _viewModel = {{Name}}ViewModel();",
      "  }",
      "",
      "  @override",
      "  Widget build(BuildContext context) {",
      "    return Scaffold(",
      "      appBar: AppBar(title: const Text('{{title}}')),",
      "      body: const Center(child: Text('{{title}}')),",
      "    );",
      "  }",
      "",
      "  @override",
      "  void dispose() {",
      "    _viewModel.dispose();",
      "    super.dispose();",
      "  }",
      "}"
    ]
  }
}

2. 代码分析配置 ​

analysis_options.yaml:

yaml
include: package:flutter_lints/flutter.yaml

linter:
  rules:
    - prefer_const_constructors
    - prefer_const_literals_to_create_immutables
    - avoid_print
    - prefer_single_quotes
    - sort_pub_dependencies

3. README 模板 ​

README.md:

markdown
# {{projectName}}

{{description}}

## 作者

{{author}}

## 开始使用

\`\`\`bash
flutter pub get
flutter run
\`\`\`

## 项目结构

\`\`\`
lib/
├── core/ # 核心功能
├── shared/ # 共享资源
└── features/ # 功能模块
\`\`\`

## 依赖

- provider: 状态管理
- http: 网络请求
- shared_preferences: 本地存储

4. Git 忽略文件 ​

.gitignore:

# Flutter
.dart_tool/
.flutter-plugins
.flutter-plugins-dependencies
.packages
.pub-cache/
.pub/
build/

# IDE
.idea/
.vscode/
*.iml
*.ipr
*.iws

# macOS
.DS_Store

依赖管理 ​

pubspec.yaml 配置 ​

yaml
name: { { projectName } }
description: A new Flutter project by {{author}}.
publish_to: "none"
version: 1.0.0+1

environment:
  sdk: ">=3.0.0 <4.0.0"

dependencies:
  flutter:
    sdk: flutter

  # 状态管理
  provider: ^6.0.0

  # 网络请求
  http: ^1.1.0
  dio: ^5.0.0

  # 本地存储
  shared_preferences: ^2.2.0

  # 路由
  go_router: ^12.0.0

  # UI 组件
  flutter_screenutil: ^5.9.0

  # 工具
  intl: ^0.18.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter:
  uses-material-design: true

  assets:
    - assets/images/
    - assets/icons/

  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf
        - asset: assets/fonts/CustomFont-Bold.ttf
          weight: 700

依赖选择建议 ​

必备依赖 ​

  • flutter: Flutter SDK
  • flutter_lints: 代码规范

状态管理 ​

选择一个：

  • provider: 简单易用
  • get: 全功能框架

网络请求 ​

选择一个：

  • http: 官方包，简单
  • dio: 功能丰富，推荐

本地存储 ​

  • shared_preferences: 键值存储
  • hive: NoSQL 数据库
  • sqflite: SQL 数据库

路由 ​

  • go_router: 官方推荐
  • auto_route: 代码生成
  • fluro: 简单路由

变量占位符 ​

支持的变量 ​

变量说明示例
项目名称（snake_case）my_app
包名com.example.my_app
作者名称Your Name
PascalCaseMyApp
camelCasemyApp

使用示例 ​

Dart 文件 ​

dart
// lib/main.dart
import 'package:flutter/material.dart';
import 'app.dart';

/// {{projectName}} - Created by {{author}}
void main() {
  runApp(const {{Name}}App());
}

YAML 文件 ​

yaml
# pubspec.yaml
name: { { projectName } }
description: A new Flutter project by {{author}}.

Markdown 文件 ​

markdown
# {{projectName}}

Created by {{author}}

团队协作 ​

1. 创建团队模板仓库 ​

bash
# 组织仓库
https://github.com/your-org/flutter-template.git

2. 定义团队规范 ​

在 README.md 中说明：

  • 项目结构
  • 命名规范
  • 代码风格
  • 提交规范

3. 配置 CI/CD ​

.github/workflows/ci.yml:

yaml
name: CI

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: subosito/flutter-action@v2
      - run: flutter pub get
      - run: flutter analyze
      - run: flutter test

4. 版本管理 ​

使用 Git 分支管理不同版本：

bash
main          # 稳定版本
develop       # 开发版本
feature/*     # 功能分支

5. 团队使用 ​

团队成员使用模板：

bash
flu-cli new my_project
# 选择团队模板

模板维护 ​

定期更新 ​

  1. 更新依赖

    bash
    flutter pub upgrade

  2. 更新 Flutter SDK

    bash
    flutter upgrade

  3. 提交更新

    bash
    git add .
git commit -m "chore: update dependencies"
git push

版本标签 ​

使用 Git 标签管理版本：

bash
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin v1.0.0

更新日志 ​

维护 CHANGELOG.md：

markdown
# Changelog

## [1.1.0] - 2024-01-15

### Added

- 新增用户认证模块
- 新增网络请求封装

### Changed

- 更新 Flutter 到 3.16.0
- 更新依赖版本

### Fixed

- 修复路由问题

常见问题 ​

如何测试模板？ ​

bash
# 使用模板创建测试项目
flu-cli new test_project
# 选择你的自定义模板

# 测试项目
cd test_project
flutter pub get
flutter run

如何分享模板？ ​

  1. Git 仓库: 推荐，易于版本管理
  2. 压缩包: 适合离线分享
  3. 文档: 提供详细说明

如何更新已使用模板的项目？ ​

不建议自动更新。手动迁移：

  1. 对比新旧模板差异
  2. 手动更新需要的部分
  3. 测试确保功能正常

模板可以嵌套吗？ ​

不支持。但可以：

  1. 创建基础模板
  2. 基于基础模板创建特定模板

示例模板 ​

最小模板 ​

适合快速原型：

minimal-template/
├── lib/
│   ├── main.dart
│   └── app.dart
├── pubspec.yaml
└── README.md

标准模板 ​

适合大多数项目：

standard-template/
├── lib/
│   ├── main.dart
│   ├── app.dart
│   ├── core/
│   ├── shared/
│   └── features/
├── assets/
├── .vscode/
├── pubspec.yaml
└── README.md

企业模板 ​

适合大型项目：

enterprise-template/
├── lib/
│   ├── main.dart
│   ├── app.dart
│   ├── core/
│   ├── shared/
│   ├── features/
│   └── config/
├── assets/
├── test/
├── .vscode/
├── .github/
├── docs/
├── pubspec.yaml
└── README.md

下一步 ​

Released under the MIT License.

Copyright © 2025 火叶工作室 | 关注公众号「火叶」获取最新动态