flutter之从零搭建小米商城APP（一）项目结构

电玩女神 2023-06-28 04:51 0阅读 0赞

### 1.准备工作 ###

1）安装环境准备  
[官网环境搭建][Link 1],我这里是windows环境，这一步是安装flutter SDK，配置环境变量，安装安卓虚拟机什么的，挺详细的，自行安装吧，**注: 下载的时候Flutter要求翻墙的，要不能会安装失败，所以翻墙了最好**，没有翻墙的话，上面也有介绍，自己按步骤来吧。  
2）配置编辑器  
我这里用的是vscode，[官网地址][Link 2],自行看吧

### 2.搭建项目 ###

我想，做软件的软件环境是一种最起码的能力，如果不成功的话，自行解决，就不过多叙述，上面的环境都成功的搭建之后  
[搭建项目][Link 3]，查看就可以了，实在不懂，在vscode快捷键ctrl+shift + p快捷键,输入 ‘flutter’, 然后选择 ‘Flutter: New Project’,输入 Project 名称 (如myapp), 然后按回车键,我的项目名叫mi\_shop，自己设置自己的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]

### 3.运行flutter ###

在vscode右下角会看到no device，显示没有设备，点击新建设备，我这里已经有设备了，你点击create android emulator创建设备，确保在VS Code的右下角选择了目标设备，按 F5 键或调用Debug>Start Debugging或者调试/启动调试，三种方法就可以运行起来了，就可以看到welcome to flutter页面了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]

### 4.目录结构构建 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]  
主要在lib下编写代码，  
**components目录存放公用组件  
http目录 封装http请求  
pages 页面目录  
main.dart 程序主入口**  
**pubspec.yaml也需要注意，类似package.json文件，里面有各种信息，依赖的下载也在里面配置，后面会讲到**  
其他的暂不关注。  
敬请期待下一节，谢谢。

[Link 1]: https://flutterchina.club/setup-windows/
[Link 2]: https://flutterchina.club/get-started/editor/#vscode
[Link 3]: https://flutterchina.club/get-started/test-drive/#vscode
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200107142547870.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200107143749761.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200107142656708.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70