Flutter Android Studio开发环境的搭建

Love The Way You Lie 2021-12-13 14:27 510阅读 0赞

--------------------

Flutter开发工具很多，有很多支持Flutter开发的IDE。比如Android Studio、Visual Studio Code、InteIIiJ IDEA、Atom、Komodo等。这里我们介绍一下Android Studio下的Flutter开发环境的搭建。模拟器的话，这里推荐使用Android官方的模拟器，也就是Android Studio SDK里带的模拟器，或者使用真机也是可以的。接下来，我们就开始Flutter在Android Studio下的开发环境的搭建吧。注意：本文是在Windows环境下安装的开发环境。本文将主要介绍：

>  *  Flutter SDK下载与环境变量配置
>  *  Android Studio的Flutter和Dart插件安装与新建Flutter项目
>  *  模拟器的新建与运行
>  *  运行Flutter项目到模拟器和真机
>  *  Flutter常用命令

--------------------

## Flutter SDK下载与环境变量配置 ##

Flutter的SDK目前官方推荐的是1.5.4版本，我们可以在它的官方下载到最新版本的SDK：[https://flutter.dev/docs/get-started/install][https_flutter.dev_docs_get-started_install]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70][]  
我们可以在官方看到一些要求。  
我们可以直接下载 zip sdk压缩包，或者通过Git进行下载。

Flutter SDK的官方github上主要有dev、beta和stable三个官方分支使，这里正式开发的话可以下载stable稳定版本。用Git命令进行下载stable分支：

git clone -b stable https://github.com/flutter/flutter.git

下载完SDK后我们可以把它解压放到指定文件夹里，接下来就是配置SDK环境变量量，这样我们就可以在需要的目录执行相关命令了。如果在官网更新下载SDK慢的话，可以设置国内的镜像代理地址，这样下载会快一些。可以将如下的国内下载镜像地址加入到环境变量中：

变量名：PUB_HOSTED_URL，变量值：https://pub.flutter-io.cn
    变量名：FLUTTER_STORAGE_BASE_URL，变量值：https://storage.flutter-io.cn

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]  
Flutter SDK环境变量，将Flutter的bin目录加入环境变量即可：

[你的Flutter文件夹路径]\flutter\bin

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]  
这样我们的Flutter SDK的环境变量就配置完毕了。接下来在命令提示符窗口中输入命令：

flutter doctor

它可以帮助我们检查Flutter环境变量是否设置成功，Android SDK是否下载以及配置好环境变量等等。如果有相关的错误提示，根据提示进行修复和安装、设置即可。每次运行这个命令，都会帮你检查是否缺失了必要的依赖。通过运行flutter doctor命令来验证你是否已经正确地设置了，并且可以自动更新和下载相关的依赖。如果全部配置正确的话，会出现如下类似的检测信息：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]

主要检测信息为：Flutter、Android toolchain、Connected device。

## Android Studio的Flutter和Dart插件安装与新建Flutter项目 ##

接下来我们启动Android Studio，安装Flutter和Dart插件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4][]

我这里使用的是Android Studio3.3.1版本，大家也可以使用3.4及以上的新版本，都没有影响。

打开Android Studio -> File -> Settings -> Plugins 搜索：Flutter、Dart插件，进行安装。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5][]

安装好插件后，就可以重启Android Studio了，我们的基本环境、工具就搭建好了。接下来我们就可以新建Flutter项目了。

点击 File -> New -> New Flutter Project 新建项目：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6][]  
弹出窗口选择：Flutter Application，后面的几种类型我们将会在以后给大家讲解。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 7][]  
点击下一步：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 8]  
点击下一步：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 9]  
设置好所有信息后，点击Finish就完成了Flutter项目的创建。

项目结构如下图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 10][]

## 模拟器的新建与运行 ##

接下来我们进行模拟器的新建和运行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 11][]  
我这里已经创建好了一个，这里建议使用Android9.0及以下版本的模拟器，Android Q目前还不太稳定。  
这里直接点击运行创建好的Android模拟器即可。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 12][]  
我们的Android原生模拟器是支持置顶的:  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 13][]  
勾选就可以置顶了。

## 运行Flutter项目到模拟器和真机 ##

我们在Android Studio的顶部可以看到运行按钮，点击运行按钮便可以运行项目到模拟器上了：  
![20190707231605431.png][]  
运行成功示意图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 14][]  
支持项目的热重载（Hot Reload）和热重启（Hot Restart）：  
![20190707231628674.png][]  
闪电图标为热重载，它的右侧的图标为热重启。

顶部工具栏也有热重载按钮和停止按钮：  
![20190707231637264.png][]  
Android Studio是使用按钮进行相应操作的，非常的方便。

## Flutter常用命令 ##

真机设备运行调试和模拟器的过程基本一样，手机和电脑通过USB连接，手机开启开发人员选项和USB调试，最后运行flutter run命令即可。  
其他常用的命令如下：

flutter build apk;           //打包Android应用
    flutter build apk –release;
    flutter install;              //安装应用
    flutter build ios;            //打包IOS应用
    flutter build ios –release;
    flutter clean;               //清理重新编译项目
    flutter upgrade;            //升级Flutter SDK和依赖包
    flutter channel;            //查看Flutter官方分支列表和当前项目使用的Flutter分支
    flutter channel <分支名>;   //切换分支

## 总结 ##

本节课主要是给大家讲解Flutter SDK的主要版本区分、环境变量配置、Android Studio开发工具的使用、模拟器运行、新建和运行项目等。为后面的正式高效学习与开发做好准备。主要注意点如下：

*  大家可以使用稳定版或者开发版Flutter SDK，推荐使用稳定版。
 *  如果遇到下载SDK慢或者无法下载情况，请按照课程内设置国内下载镜像地址。
 *  配置好环境变量后，需要用flutter doctor检查一下环境。
 *  尝试新建个项目运行到手机或模拟器上，看配置是否有问题。
 *  尝试使用Android Studio创建运行一个Flutter项目到模拟器和真机。

[https_flutter.dev_docs_get-started_install]: https://flutter.dev/docs/get-started/install
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20211213/dbf583d827df4483b43bf725ac0e37be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20211213/678d427927294d8f85d5000e92595c98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20211213/be9a24f46f0244189580a64cb6dce5a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: /images/20211213/2f42b1a832aa4d3cae917c48d07efcba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: /images/20211213/cd107e5e55b842f58d4f34f2ecde884a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]: /images/20211213/5f3fb773bac44676aff911207bd84c88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]: /images/20211213/9d86956cb7f449669c9b4c45aee39d39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 7]: /images/20211213/d85155ec65f54ceeb8a0d536916f39ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 8]: /images/20211213/4aad864fef274f0cbaa654da89892727.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 9]: /images/20211213/c86ac8b943334fc59a38e8092fa6c8a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 10]: /images/20211213/a35495305ae047fb89b9545b4aa5b3fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 11]: /images/20211213/9b00793117fc4bfcac462f80e59f8c54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 12]: /images/20211213/86bc912ec96c41a6a160d96c67f30c0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 13]: /images/20211213/dc80263054d14617bd73513ea5b67fb7.png
[20190707231605431.png]: /images/20211213/66c2668825fe445fa1f2e0bcf720f24c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9mYW50YXN5LmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 14]: /images/20211213/b5da6cc1450d4191bbd245ea2b3cf842.png
[20190707231628674.png]: /images/20211213/651fefdb77ae4233a2d8ce92f1e6227f.png
[20190707231637264.png]: /images/20211213/e4fcb24a400f469fb5d9785f655fa728.png