Flutter 入门指南与常用命令详解

前言

本文介绍三个Flutter入门项目的基本操作及Flutter常用命令，帮助开发者快速上手Flutter开发。

创建项目命令：flutter create project_name
运行项目命令：flutter run（先要执行cd project_name切换到项目目录）
热重启命令：r 或 R
终止项目命令：q

一、Flutter 官方资源

官方网站：https://flutter.dev/
中文官网：https://flutter.cn/
官方博客：https://flutter.cn/posts
Flutter CLI 文档：https://flutter.cn/docs/reference/flutter-cli

官方与中文站点的对应规则：

官方网址	中文网址
https://flutter.dev/xxx	https://flutter.cn/xxx
https://docs.flutter.dev/xxx	https://flutter.cn/docs/xxx
https://storage.googleapis.com/xxx	https://storage.flutter-io.cn/xxx

二、Flutter 常用 CLI 命令详解

Flutter 命令支持多种格式（参数位置、简写、单杠/双杠），并具备智能提示常见错误命令。

1. 基础命令

命令	说明
`flutter -h`	显示帮助信息，支持多种帮助格式如 `-h xx` 或 `help xx`
`flutter doctor`	环境检测，只需解决项目相关问题，不必全部处理
`flutter --version`	查看 Flutter SDK、Framework、Engine 和 Tools 版本信息
`where flutter dart`	查看 Flutter 和 Dart 安装路径，确保 flutter\bin 在最前面

2. 频道管理

命令	说明
`flutter channel`	查看所有发行渠道（分支）及当前使用渠道
`flutter channel <channel>`	切换至指定渠道，如 master、dev、beta、stable，推荐使用 stable

3. 配置与更新

命令	说明
`flutter config`	基本配置，如平台启用、SDK/IDE 路径、默认设备
`flutter upgrade`	更新 Flutter SDK 和依赖包

4. 依赖管理

命令	说明
`flutter pub <command>`	依赖包管理，包括 upgrade, add, remove, get, deps, outdated

5. 项目与构建

命令	说明
`flutter devices`	列出可用设备（Windows、Chrome、Android 设备等）
`flutter clean`	清理构建缓存，删除 build/.dart_tool，释放空间约至 5M
`flutter create .`	创建项目，或修复现有项目。支持 app/module/package/plugin 类型
`flutter create --platforms=windows,macos,linux .`	给现有项目添加桌面平台支持
`flutter build <type>`	构建指定类型产物（aar、apk、appbundle、bundle、web、windows）
`flutter run -d <device> --release/debug`	构建并启动应用，指定设备及构建类型
`flutter attach`	连接到已运行的 Flutter 应用，实现调试（热重载、热启动等功能）

注意：Web 应用启动完成后，需要启动 Web 服务器（如 npm serve）才能访问。

三、构建 Android 包相关命令详解

1. 构建 AAR 包（Android Archive）

命令示例：

1
2
3
flutter build aar --no-debug --no-profile --target-platform=android-arm64 --build-number=2.0
flutter build aar -h    # 显示详细帮助
flutter build aar -v    # 显示详细日志

默认入口为 lib/main.dart，暂不可配置。
主要参数说明：
- --[no-]debug、--[no-]release、--[no-]profile：构建不同版本（调试、发布、性能分析）。
- --build-number：内部版本号。
- --target-platform：支持平台，包括 android-arm（armeabi-v7a）、android-arm64（arm64-v8a）、android-x64（x86-64），目前不支持 android-x86。
- --output-dir：生成AAR存放路径，默认为当前目录的 android/build。
- --flavor：支持 Android 的 product flavors。
- 其他参数包括代码混淆、分割调试信息等，详见官方文档。

详见：StackOverflow - How to set Flutter build android aar version

2. 构建 APK 包

命令示例：

1
2
3
flutter build apk --release --target-platform=android-arm64 --build-number=88 --build-name=8.8
flutter build apk -h  # 帮助
flutter build apk -v  # 详细日志

仅在 application 项目中支持 --build-number, --build-name 参数，module项目中无效。
参数与 flutter build aar 大致相同，新增：
- --target=<path>：入口文件，默认为 lib/main.dart。
- --[no-]analyze-size：生成构建文件大小分析。
- --code-size-directory：分析文件存放目录，默认 build/。
- --[no-]multidex：是否启用 MultiDex，默认启用。
- --ignore-deprecation：忽略弃用 API 警告。
- --split-per-abi：分 ABI 构建多个独立 APK。

四、Flutter 调试命令 —— flutter attach

flutter attach 命令用于连接一个已运行的 Flutter 应用，实现调试功能，命令行内可以执行热重载、热重启等操作，与 IDE 中的快捷命令功能相同。

常用交互命令：

快捷键	功能说明
`r`	热重载（Hot reload）
`R`	热重启（Hot restart）
`d`	取消连接（Detach），断开调试但应用仍运行
`q`	终止程序（Quit）
`c`	清屏
`s`	截图，保存为 `flutter.png`
`v`	打开 Flutter DevTools
`h`	显示所有可用命令列表
`w`	打印 Widget 层级结构
`t`	打印渲染树（Rendering tree）
`L`	打印布局树（Layer tree）
`o`	切换模拟操作系统
`b`	切换亮度模式（浅色/暗色）

工具会搜索正在运行的 Flutter app 或 module，如果未检测到，会等待应用启动后自动连接。

五、三个入门项目详解与代码注释

下面对三个基础Flutter项目的完整代码提供详细注释，帮助理解Flutter框架的核心概念、Dart语法和常见用法。

1. Hello Flutter

目标：学习Flutter项目的基本结构与Dart基础语法。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import 'package:flutter/material.dart';  // 引入Flutter的Material组件库

// 应用入口函数，开始执行Flutter App
void main() {
  runApp(const MyApp());  // 运行MyApp组件，const表示不可变
}

// 自定义无状态组件MyApp，继承StatelessWidget
class MyApp extends StatelessWidget {
  const MyApp({super.key});  // 构造函数，传入key用于组件唯一标识

  @override
  Widget build(BuildContext context) {
    // 返回一个Material风格的应用，包含主题和首页结构
    return MaterialApp(
      title: '皇极经世',  // 应用标题
      theme: ThemeData(
        primarySwatch: Colors.yellow,  // 主题主色调为黄色
      ),
      home: Scaffold(  // 脚手架，搭建页面基本结构
        appBar: AppBar(  // 应用栏
          title: Text('皇极经世'),  // 标题文字
        ),
        body: Center(  // 主体内容居中显示
          child: Text('算命吗？', 
            style: Theme.of(context).textTheme.headlineMedium,  // 使用主题中的中大型标题样式
          ),
        ),
      ),
    );
  }
}

2. 点击计数器

目标：理解Stateless与Stateful组件的区别，学习事件处理和状态更新。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter',  // 应用名
      theme: ThemeData(
        primarySwatch: Colors.green,  // 主题色为绿色
      ),
      home: HomePage(title: 'TianHanCounter'),  // 主页，传入标题参数
    );
  }
}

// 有状态组件HomePage，支持状态管理
class HomePage extends StatefulWidget {
  const HomePage({super.key, required this.title});
  final String title;  // 组件接收标题字符串

  @override
  State<StatefulWidget> createState() {
    return _HomePageState();  // 创建状态对象
  }
}

// HomePage的状态实现类
class _HomePageState extends State<HomePage> {
  int _counter = 0;  // 计数器初始值为0

  // 增加计数器值
  void _incrementCounter(int n) {
    setState(() {  // 调用setState触发UI刷新
      _counter += n;
    });
  }

  // 递减计数器
  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),  // 使用widget中的标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,  // 垂直居中排列
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text('$_counter', 
              style: Theme.of(context).textTheme.headlineMedium,  // 大号字体显示计数
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,  // 按钮右对齐
        children: <Widget>[
          FloatingActionButton(
            onPressed: _decrementCounter,  // 点击时递减计数
            tooltip: 'Decrement',  // 悬浮提示
            child: Icon(Icons.remove),  // 减号图标
          ),
          SizedBox(width: 10),  // 按钮间距
          FloatingActionButton(
            onPressed: () => _incrementCounter(3),  // 点击增加3
            tooltip: 'Increment',
            child: Icon(Icons.add),  // 加号图标
          )
        ],
      ),
    );
  }
}

3. 心爱配对 (Love Match)

目标：学习ListView展示列表、页面导航Navigator与较复杂的状态管理。

依赖包安装：需要安装english_words，可以通过修改pubspec.yaml文件或在命令行使用flutter pub add english_words安装。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';  // 引入英文单词对生成库

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '爱心配对',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,  // 主题种子颜色深紫色
        ).copyWith(surfaceTint: Colors.transparent),  // 取消表面颜色阴影
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.green,  // AppBar背景绿色
          elevation: 4.0,  // 阴影高度
          shadowColor: Theme.of(context).colorScheme.shadow,  // 阴影颜色
        ),
      ),
      home: HomePage(),  // 主页组件
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  final _words = <WordPair>[];      // 存储生成的单词对列表
  final _favorites = <WordPair>[];  // 存储用户收藏的单词对

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('爱心配对'),
        actions: [
          // 右上角收藏按钮，点击进入收藏页面
          IconButton(icon: Icon(Icons.list), onPressed: _goToFavorites),
        ],
      ),
      body: Center(child: _buildList()),  // 主体为单词列表
    );
  }

  // 跳转到收藏页面，展示已收藏的单词对列表
  void _goToFavorites() {
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (BuildContext context) {
          // 构造收藏单词对的列表项
          final Iterable<ListTile> tiles = _favorites.map((WordPair pair) {
            return ListTile(
              title: Text(pair.asPascalCase, style: TextStyle(fontSize: 18.0)),
            );
          });
          return Scaffold(
            appBar: AppBar(title: Text('收藏')),
            body: ListView(children: tiles.toList()),  // 使用ListView展示收藏列表
          );
        },
      ),
    );
  }

  // 构建主列表，动态生成单词对列表项
  Widget _buildList() {
    // 每次调用添加10个单词对
    _words.addAll(generateWordPairs().take(10));
    return ListView.builder(
      itemBuilder: (context, item) {
        if (item.isOdd) return Divider();  // 奇数行插入分割线
        int index = item ~/ 2;  // 计算实际单词对索引
        if (index >= _words.length) {
          // 超出列表长度时自动加载更多
          _words.addAll(generateWordPairs().take(10));
        }
        return _buildRow(index);  // 构建单个列表项
      },
    );
  }

  // 单个列表项构建，包含单词对文字和收藏图标
  Widget _buildRow(int index) {
    return ListTile(
      title: Text(_words[index].asPascalCase),  // Pascal命名格式展示单词对
      trailing: _changeIcon(index),              // 右侧收藏图标
      onTap: () => {_changeFavorites(index)},   // 点击切换收藏状态
    );
  }

  // 根据是否收藏显示不同图标
  Widget _changeIcon(int index) {
    if (_favorites.contains(_words[index])) {
      return Icon(Icons.favorite, color: Colors.red);  // 已收藏红色爱心
    } else {
      return Icon(Icons.favorite_border);  // 未收藏空心爱心
    }
  }

  // 切换收藏状态
  void _changeFavorites(int index) {
    setState(() {
      if (_favorites.contains(_words[index])) {
        _favorites.remove(_words[index]);  // 取消收藏
      } else {
        _favorites.add(_words[index]);     // 添加收藏
      }
    });
  }
}

Flutter 入门指南与常用命令详解#

前言#

一、Flutter 官方资源#

二、Flutter 常用 CLI 命令详解#

1. 基础命令#

2. 频道管理#

3. 配置与更新#

4. 依赖管理#

5. 项目与构建#

三、构建 Android 包相关命令详解#

1. 构建 AAR 包（Android Archive）#

2. 构建 APK 包#

四、Flutter 调试命令 —— flutter attach#

常用交互命令：#

五、三个入门项目详解与代码注释#

1. Hello Flutter#

2. 点击计数器#

3. 心爱配对 (Love Match)#