刚接触编程的新手，是不是一听到 “flutter 小程序框架” 就发怵？下载软件时卡在进度条不动，好不容易装完了，打开界面全是英文命令，对着屏幕半天不知道点哪里。其实啊，小编当初也是这么过来的，第一次用的时候，光是弄明白怎么创建项目就花了俩小时。今天就把超详细的步骤拆解开，哪怕你是零基础，跟着做也能慢慢上手，别担心，咱们一步一步来。
准备工作：先把工具装对，别上来就卡壳
用 flutter 之前，得先把电脑里的工具备齐，就像做饭前要先把锅碗瓢盆摆好一样。新手最容易在这里栽跟头，要么漏装了东西，要么装错了版本。
我列个清单，你们照着核对：
- 电脑系统：Windows 10 以上或者 Mac OS，太低的版本容易出问题
- 必须装的软件：Flutter SDK、Android Studio（里面要装 Android SDK）、VS Code（写代码用，也可以用其他编辑器，但这个对新手友好）
- 可选工具：Git（有些操作会用到，提前装上省得后面麻烦）
不同系统装 Flutter SDK 的步骤有点不一样，我做个表格对比，看着更清楚：
| 操作步骤 | Windows 系统 | Mac 系统 |
|---|---|---|
| 下载 SDK | 去 Flutter 官网点 “Windows” 下载按钮 | 点 “Mac OS” 下载，或者用终端输入 “brew install flutter” |
| 解压位置 | 建议放 D 盘根目录，比如 “D:\flutter”，别放带中文的文件夹里 | 一般放 “~/development/flutter” |
| 环境变量 | 右键 “此电脑”→“属性”→“高级系统设置”→“环境变量”，把 “flutter\bin” 路径加上 | 终端输入 “export PATH=”$PATH:pwd/flutter/bin”” |
有个新手朋友跟我说，他把 SDK 放了带 “新建文件夹” 的路径里，结果命令行一直提示 “找不到文件”，后来改到根目录就好了。所以路径里别用中文、空格，这点很重要。
第一步：检查环境对不对，用一行命令就知道
装完工具后，先别急着写代码，看看有没有漏装啥。打开命令提示符（Windows）或者终端（Mac），输入 “flutter doctor”，然后回车。
这时候会出现一堆检查结果，绿色对勾就没问题，红色叉号就是缺东西。比如出现 “Android license status unknown”，就输入 “flutter doctor –android-licenses”，然后一路按 “y” 同意就行。
要是卡在 “Checking Dart SDK version…” 不动，别急着关掉，可能是网络慢，多等几分钟。小编上次等了 8 分钟才好，一开始还以为死机了呢。
第二步：创建第一个项目，就像搭积木的地基
环境没问题了，就能建项目了。在命令提示符里输入 “cd 你想放项目的文件夹”，比如 “cd D:\projects”，然后输入 “flutter create my_app”，“my_app” 是项目名，你可以自己取，别用中文哦。
等几分钟，项目就建好了。打开文件夹，你会看到很多文件，新手不用管那么多，主要看 “lib\main.dart”，这就是写代码的地方。就像盖房子，这个项目就是地基，后面所有东西都在这上面加。
有朋友问，为啥要建项目？直接写代码不行吗？其实也不是不行，但项目里有很多自动生成的配置，省去了新手自己设置的麻烦，跟着框架走不容易错。
第三步：用 VS Code 打开项目，认识一下界面
打开 VS Code，点 “文件”→“打开文件夹”，选中刚才创建的 “my_app” 文件夹。左边是文件列表，中间是编辑区，新手主要在 “lib\main.dart” 里写东西。
顶部有个运行按钮，像个三角形，点一下就能运行项目。第一次运行可能有点慢，耐心等会儿，会弹出一个模拟器，或者你也可以用手机连电脑，开启 USB 调试，就能在手机上看效果了。
小编第一次用的时候，不知道怎么连手机，折腾了半天，后来才发现要在手机设置里打开 “开发者模式”，你们要是用手机测试，别忘了这步。
第四步：改改代码试试，先做个简单页面
默认的代码有点复杂，咱们改得简单点，先显示一行文字和一张图片。找到 “main.dart” 里的 “Widget build (BuildContext context)”，把里面的代码换成这样：
Container (
color: Colors.white,
child: Center (
children: [
Text (
‘ 我的第一个 Flutter 小程序 ‘,
style: TextStyle (fontSize: 20, color: Colors.blue),
),
SizedBox (height: 20), // 文字和图片之间留点距离
Image.network (
‘https://flutter.dev/images/flutter-logo-sharing.png‘,
width: 200,
),
],
),
)
改完后按 “Ctrl+S” 保存，点运行按钮，是不是看到文字和图片居中显示了？是不是很有成就感？
第五步：常见问题解决，新手别慌
运行的时候可能会遇到各种问题，我整理了几个常见的：
- 报错 “Could not find an option named “device-id””：说明没选设备，在 VS Code 右下角选一个模拟器或者连接的手机就行。
- 页面一片空白：看看代码里有没有拼写错误，比如把 “Color” 写成 “color”（首字母要大写）。
- 图片不显示：检查网络链接对不对，或者换成本地图片试试。
小编当初就因为把 “Colors” 写成 “colors”，找了半小时才发现，所以写代码的时候仔细点，少犯低级错误。
小编的一点建议
学 flutter 不用急着把所有功能都学会，先把这几步练熟，能自己建项目、改代码、看效果，就算入门了。每天花半小时动手写，比看一天教程管用。
可以找些简单的案例跟着做，比如做个计数器、显示列表，慢慢积累。遇到不懂的就搜 “flutter 某某功能 教程”，网上有很多新手友好的资料。
其实编程就像学骑车，一开始觉得难，多练几次就顺了。小编学了一个月，就能做简单的小程序了，你们肯定也可以。希望这篇教程能帮到你们，有问题随时问我呀！
