2、开发环境准备:Flutter SDK安装与版本管理、创建第一个Flutter项目、项目结构解析、引入依赖包的方法
好,咱们正式开始动手了。这一章我带你把开发环境搭起来,顺便把第一个Flutter项目跑通。说实话,环境配置这块看着简单,但坑也不少。我当年第一次装Flutter时,光环境变量就折腾了半小时。咱们一步步来,稳一点。
2.1 Flutter SDK安装与版本管理
Flutter SDK的安装,说白了就是下载一个压缩包,解压,然后配环境变量。但这里有个关键点——版本管理。你想想看,项目越做越多,每个项目依赖的Flutter版本可能不一样。我手头就有个老项目还在用2.x,新项目已经切到3.x了。怎么切换?
我个人习惯用 fvm(Flutter Version Management)。它就像Node.js的nvm,能让你在多个Flutter版本间自由切换。
安装步骤(以macOS为例):
- 下载Flutter SDK:去官网或GitHub Releases页下载对应版本
- 解压到指定目录:比如
~/development/flutter - 配置环境变量:在
.zshrc或.bashrc中添加export PATH="$PATH:`pwd`/flutter/bin" - 安装fvm:
brew tap leoafarias/fvm && brew install fvm - 使用fvm安装指定版本:
fvm install 3.10.0 - 项目内使用:在项目根目录执行
fvm use 3.10.0
小技巧:我建议你在每个项目根目录都放一个 .fvm/flutter_sdk 文件。这样团队成员拉下代码后,执行 fvm use 就能自动切到正确版本。省心。
Windows用户呢?其实差不多。下载zip包,解压到 C:\src\flutter,然后把 flutter\bin 加到系统Path里。fvm在Windows上也能用,用 choco install fvm 安装就行。
注意:千万别直接改系统自带的Flutter路径。我曾经手贱把系统Flutter换成了beta版,结果公司项目全崩了。用fvm隔离管理,稳如老狗。
2.2 创建第一个Flutter项目
环境配好了,咱们来创建第一个项目。打开终端,执行:
flutter create my_first_app
cd my_first_app
flutter run
就这么简单?嗯,差不多。但这里有个细节——flutter create 默认会生成一堆示例代码。如果你想要一个干净的项目,可以加个 --empty 参数:
flutter create --empty my_clean_app
我第一次用Flutter时,看到生成的代码量吓了一跳。其实不用慌,大部分是模板代码,后面我们会慢慢拆解。
运行 flutter run 后,你会看到控制台输出一堆日志。如果一切顺利,模拟器或真机上会显示一个默认的计数器应用。点一下加号,数字会变。嗯,这就是你的第一个Flutter应用了。
避坑指南:如果你用的是Windows,记得先装好Visual Studio的C++工具链。我有个同事没装这个,结果编译时卡了半天,最后发现是缺少 cl.exe。去装个“使用C++的桌面开发”工作负载就行。
2.3 项目结构解析
项目创建好了,咱们来看看里面都有啥。打开项目文件夹,你会看到这样的结构:
my_first_app/
├── android/
├── ios/
├── lib/
│ └── main.dart
├── test/
├── pubspec.yaml
├── analysis_options.yaml
└── ...其他配置文件
我来给你拆解一下:
| 目录/文件 | 作用 |
|---|---|
android/ |
Android原生工程,里面是Gradle配置和Kotlin/Java代码 |
ios/ |
iOS原生工程,Xcode项目文件、Swift/OC代码都在这里 |
lib/ |
你的Dart代码主战场。所有业务逻辑都写在这里 |
test/ |
单元测试和Widget测试的目录 |
pubspec.yaml |
项目的“身份证”,声明依赖、资源、版本号等 |
analysis_options.yaml |
代码静态分析规则,可以自定义lint规则 |
你可能会问:为什么Flutter项目要带android和ios两个原生目录?说白了,Flutter只是UI框架,底层还是要调用原生平台的API。比如你要用相机、蓝牙,都得通过原生代码去实现。这两个目录就是给原生代码留的接口。
重点:lib/main.dart 是应用的入口文件。所有Flutter应用都从这里开始执行。你会在里面看到 void main() => runApp(MyApp()); 这行代码——它就是整个应用的启动点。
2.4 引入依赖包的方法
Flutter的强大之处在于它的生态。你想用网络请求?有 dio。想用状态管理?有 provider、riverpod。想用本地数据库?有 sqflite、hive。这些第三方包怎么引入?
答案就在 pubspec.yaml 文件里。打开它,你会看到类似这样的内容:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
要引入新包,只需要在 dependencies 下面加一行。比如我们要引入 dio:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
dio: ^5.0.0
然后执行 flutter pub get,Flutter就会自动下载并安装这个包。就这么简单。
版本号的小秘密:^5.0.0 表示允许使用5.0.0到6.0.0之间的任何版本(不包括6.0.0)。这叫“乐观版本约束”。我建议你刚开始时用这个,等项目稳定了再锁定具体版本。不然哪天包作者发了个破坏性更新,你的项目可能就炸了。
如果你想从GitHub直接引入一个包,或者引用本地包,也可以:
dependencies:
my_package:
git:
url: https://github.com/example/my_package.git
my_local_package:
path: ./packages/my_local_package
嗯,这个在团队协作时特别有用。比如你写了一个公共组件库,还没发布到pub.dev,就可以用本地路径引用。
注意:引入包后,记得执行 flutter pub get。我经常忘了这步,结果IDE里一直报红,还以为代码写错了。另外,如果遇到版本冲突,可以用 flutter pub deps 查看依赖树,找到冲突的根源。
好了,环境准备就到这里。下一章咱们开始写真正的代码——用Flutter实现本地存储。到时候你会看到,刚才引入的 sqflite 和 shared_preferences 是怎么派上用场的。