Flutter入门学习心得

一、介绍

简介（源自百度百科）

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。 [5]  Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。Flutter已推出稳定的2.0版本。

二、搭建环境

按照惯例，先把官网贴上

Flutter 官网Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.https://flutter.dev/

Flutter中文网 Flutter中文网是中国最大的Flutter开发者交流学习平台，致力于打造Flutter开发中文社区。在这里能轻松找到代码实例、项目案例、并有专人提供最新文档翻译。https://flutterchina.club/

注：虽然官方推出了中文官网，但我在学习的过程中发现文档或者一些引导是没有及时更新的，但由于网络或者语言等各种因素的原因，并不是每个人都能在官方文档获得很好的体验，只是入门的话看中文文档也足够了。

Windows搭建

1、所需系统及其环境

写下文章时 Flutter版本为：3.0.4 

• OS ：Windows 10 or later (64-bit), x86-64 版本.
• 磁盘空间：1.64GB（不包含IDE工具）
• 命令行工具：Windows powershell 5.0 和 git 2.x 命令行工具

在官网下载Flutter SDK到电脑并解压，然后配置环境变量

2、配置环境变量

右键此电脑 -> 属性 -> 高级系统设置 -> 环境变量（在“高级”选项卡中）

由于Flutter默认的资源下载在国外，所以我们需要配置两个用户变量方便我们获取资源

用户变量配置

变量名：FLUTTER_STORAGE_BASE_URL

变量值：https://storage.flutter-io.cn

 变量名：PUB_HOSTED_URL

 变量值：https://pub.flutter-io.cn

系统变量配置

 找到Path（没有则新建）-> 新建 -> （参考路径）D:\Kit\Flutter\flutter-3.0.4\bin

配置好之后可以运行命令来查看是否配置成功

fultter --version

3、Flutter Doctor

打开命令行，运行

flutter doctor

flutter会自动监测你当前的环境并下载所需依赖项。

如果你的Android SDK是自定义安装，那么你还需要重新告诉flutter你的Android SDK位置

方法如下：

                                flutter config --android-studio-dir <directory>

示例：                     flutter config --android-studio-dir D:\AndroidSDK

配置成功后如图所示

 接下来可以在IDE中开始写你的第一个Flutter项目了

4、配置IDE

Android Studio

AS中还需要下载两个插件，File -> Settings -> Plugins ->搜索 Dart 和 Flutter -> install

重启后插件生效

 三、运行你的第一个Flutter Project

File -> New Flutter Project ->选中对应的SDK -> 配置项目信息 ->Finish 等待项目生成完毕之后，我们就可以尝试运行项目了。

 项目生成后如图所示

 我这里启动了模拟器之后，右上角的drive中就出现了 Pixel，点击运行按钮

我们的项目就运行成功啦！