Flutter入门篇-环境搭建及项目创建（一）

客官°小女子只卖身不卖艺 2023-06-16 10:46 116阅读 0赞

## **Flutter** ##

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

#### 1.以windows为例子 ####

###### 系统配置要求 ######

操作系统：Windows 7 SP1 或更高的版本（64 位操作系统）。  
磁盘空间：除安装 IDE 和一些工具之外还应有至少 400 MB 的空间。  
工具：要让 Flutter 在你的开发环境中正常使用，依赖于以下的工具：  
Windows PowerShell 5.0 或者更高的版本（Windows 10 中已经预装了）  
Git for Windows 2.x，并且勾选从 Windows 命令提示符使用 Git 选项。  
如果 Windows 版的 Git 已经安装过了，那么请确保能从命令提示符或者 PowerShell 中直接执行 git 命令。

###### 获取 Flutter SDK ######

**Flutter SDK：** [flutter\_windows\_v1.9.1+hotfix.6-stable.zip][flutter_windows_v1.9.1_hotfix.6-stable.zip]  
**解压到任意目录：** 配置环境变量例如，C:/flutter/bin添加到path  
**诊断：** cmd运行 *flutter doctor*

忽略此警告![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70]  
IDE编辑器也忽略警告：idea，Android Studio

###### 下载dart ######

地址：https://github.com/GeKorm/dart-windows/releases/download/v1.6.0/Dart\_x64.stable.setup.exe

别忘记环境变量（忘记是否会默认添加）

###### 编辑器的使用 ######

1.  **idea，Android Studio**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 1]
2.  **创建项目**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 3]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 4]
3.  **配置Android 模拟器**
    
    下载SDK先选择路径不能包含空格（第一次安装需要选择路径之后直接下载APIs 29 ）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 5]  
    以华为meta 30为例子![在这里插入图片描述][20191126110952362.png]  
    创建![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 8]  
    选择好下一步选择API（我的已选好）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 9]  
    点击API 29继续下载，之后finish

##### 项目启动 #####

1.  **启动虚拟器**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 10]
2.  项目启动  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 11]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 12]

[flutter_windows_v1.9.1_hotfix.6-stable.zip]: https://storage.flutter-io.cn/flutter_infra/releases/stable/windows/flutter_windows_v1.9.1+hotfix.6-stable.zip
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191126102339235.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191126102824782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191126125803596.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191126125918856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191126125945474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191126104600783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[20191126110952362.png]: https://img-blog.csdnimg.cn/20191126110952362.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191126111112766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191126111209696.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191126111542126.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191126111657361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191126130046133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191126130514862.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191126130532621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4,size_16,color_FFFFFF,t_70