Flutter开发之环境配置

ゝ一纸荒年。 2022-05-23 00:47 202阅读 0赞

##### 原博客地址：[https://github.com/AweiLoveAndroid/Flutter-learning][https_github.com_AweiLoveAndroid_Flutter-learning] #####

**第一次入坑Flutter，找了大佬的博客然后再添加了点自己遇到的坑，适合小白入门（应该是最详细的介绍了）。**

![20180530142903931][]

首先简单介绍一下Flutter

在 Google I/O ’17 上，Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。

Flutter是什么呢?它是Google使用Dart语言开发的移动应用开发框架，用来帮助开发者在iOS和Android平台上开发高性能、高质量的原生应用。Flutter是跨平台的免费开源UI框架，iOS和Android可以共用一套代码。

Flutter是基于Dart语言编写的。主要优点：

1.  免费开源
2.  利用保持状态的热重载（Hot Reload）、全新的响应式框架、丰富的控件以及集成的开发工具这些特点进行快速开发。
3.  通过可组合的控件集合、丰富的动画库以及分层可扩展的架构来实现富有感染力的灵活界面设计。
4.  借助可移植的 GPU 加速的渲染引擎以及高性能本地 ARM 代码运行时以达到跨设备跨平台的高质量用户体验。
5.  提高效率：使用一套代码同时开发Android和iOS。
6.  可扩展性很强：Flutter框架本身提供了丰富的Material Design和Cupertino(iOS-flavor)风格的控件，可自由扩展控件不受手机平台控件的限制。

听完这个介绍是不是感觉很强大，有没有一种特别神奇的感觉，下面我们就开始环境配置：

![20180530143041446][]

要安装并运行Flutter，你的开发环境必须满足这些最低要求： 这里以windows系统为例， macos安装文档请查看：[https://flutter.io/setup-macos/][https_flutter.io_setup-macos] linux安装文档请查看：[https://flutter.io/setup-linux/][https_flutter.io_setup-linux]

> （一） 操作系统：Windows 7 SP1或更高版本（64位）

> （二） 磁盘空间：400 MB（不包括IDE /工具的磁盘空间）。

> （三） 对Android Studio的要求：需要安装3.0 或者更高的版本。

> （四） Flutter支持的sdk环境：Android 4.1（API 16）或者更高版本。

> （五） 对Android模拟器镜像的要求：推荐使用x86或者x86\_64镜像。

> （六） 工具：Flutter需要用到以下2个工具：

**(1) PowerShell 5.0或更新版本**

查看是否已经安装PowerShell：

最下角“开始”----> 最下面“所有程序”----> 往下滑动找到“附件”----> 看下是否有“Windows PowerShell”文件夹---> 如果有就说明已经安装 -----> 鼠标移动到PowerShell x86 ----> 以管理员身份运行 ---->成功运行（出来一个类似cmd的蓝色窗口）

如果没有安装：[点击这里下载][Link 1]

安装步骤很简单（图解，我就不细说了）：

![20180530094745738][]

![20180530094824458][]

![20180530094857490][]

![20180530094947226][]

点击安装补丁就可以了，安装完成之后需要重新启动电脑才能够生效。

查看PowerShell版本信息命令：

$PSVersionTable.PSVersion

![20180530100748206][]

红色箭头指向就是版本号。

【注意:】关于命令行无法显示某些字符或者中文乱码问题的解决：

*  1、无法显示√或者×字符 原因是点阵字体搞的鬼。设置一下控制台字体就可以了。 在控制台标题右键，选择字体，把点阵字体改为其他字体就可以了。
 *  2、cmd中文乱码的解决：

1. win+R 输入regedit 进入注册表 
    2. 找到 `HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe` 
    如果该项下已存在CodePage项，则把值改为十进制”65001”；
    如果不存在，在该项下新建一个 DWORD（32位值），命名为“CodePage”，值设为“65001” 
    3. 重启cmd后生效

*  3、PowerShell中文乱码的解决：

1. win+R 输入regedit 进入注册表
    2. 找到 `HKEY_CURRENT_USER\Console\%SystemRoot%_system32_WindowsPowerShell_v1.0_powershell.exe` 下的项。
    如果该项下已存在CodePage项，则把值改为十进制”65001”；
    如果不存在，在该项下新建一个 DWORD（32位值），命名为“CodePage”，值设为“65001”
    3. 重启PowerShell后生效

**(2) Git for Windows(下载Flutter)**

#####  #####

首先我们选择一个磁盘新建一个文件夹Flutter然后右键选择Git Bash Here然后输入以下命令：

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

拉取过程：

![20180530100646466][]

如果你已经下载Flutter，请执行更新命令（检查更新，更新的时候会更新SDK和包）：

flutter upgrade

##### (3)环境变量配置 #####

如果想在命令行中使用 flutter 命令，你需要添加flutter的路径到path中去。这个和配置java环境变量是同样的做法，找到flutter安装路径，比如我的是`E:\Flutter\flutter\bin`，我复制这个路径，右键`我的电脑`\-->`属性`\-->`高级系统属性`\-->`环境变量`\-->`找到PATH`，点击编辑-->在最后把刚复制的路径粘贴进来，-->一直`保存`确定就可以了。

![20180530142135643][]

win + R 快捷键，输入cmd，回车，输入`flutter doctor`，回车。

这个命令初次运行可能会很慢，Flutter会自动安装所需依赖，并进行编译

安装过程截图：

![20180530142316883][]

##### (4)flutter的常见命令 #####

<table style="border-spacing:0px;margin-top:0px;margin-bottom:16px;width:888px;color:rgb(36,41,46);font-family:'-apple-system', BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';font-size:16px;"> 
 <thead> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <th style="padding:6px 13px;border-color:rgb(223,226,229);">常用命令</th> 
   <th style="padding:6px 13px;border-color:rgb(223,226,229);">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><span style="font-weight:600;">--version</span></td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">查看Flutter版本</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><span style="font-weight:600;">-h</span>或者**--help**</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">打印所有命令行用法信息</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">analyze</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">分析项目的Dart代码。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><span style="font-weight:600;">build</span></td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">Flutter构建命令。</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">channel</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">列表或开关Flutter通道。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">clean</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">删除构建/目录。</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">config</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">配置Flutter设置。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><span style="font-weight:600;">create</span></td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">创建一个新的Flutter项目。</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><span style="font-weight:600;">devices</span></td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">列出所有连接的设备。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><span style="font-weight:600;">doctor</span></td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">展示了有关安装工具的信息。</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">drive</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">为当前项目运行Flutter驱动程序测试。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">format</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">格式一个或多个Dart文件。</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">fuchsia_reload</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">在Fuchsia上进行热重载。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><span style="font-weight:600;">help</span></td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">显示帮助信息的Flutter。</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><span style="font-weight:600;">install</span></td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">在附加设备上安装Flutter应用程序。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">logs</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">显示用于运行Flutter应用程序的日志输出。</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">packages</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">命令用于管理Flutter包。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">precache</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">填充了Flutter工具的二进制工件缓存。</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">run</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">在附加设备上运行你的Flutter应用程序。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">screenshot</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">从一个连接的设备截图。</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">stop</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">停止在附加设备上的Flutter应用。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">test</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">对当前项目的Flutter单元测试。</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">trace</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">开始并停止跟踪运行的Flutter应用程序。</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><span style="font-weight:600;">upgrade</span></td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">升级你的Flutter副本。</td> 
  </tr> 
 </tbody> 
</table>

##### (5)Android Studio配置（终于到大家关心的环节了，马上就要看到效果了） #####

![20180530143435654][]

Flutter对Android Studio的要求：需要安装`3.0` 或者`更高的版本`。

关于AS安装，这个就不用说了，大家都安装了吧，jdk,sdk这些都配置好了吧.直接看下文好了。

Flutter需要`Flutter`和`Dart`插件才可以使用：

File --> settings --> Plugins --> Browse repositories，然后输入Flutter就可以下载了，Drat也是一样的道理。

这里我操作的时候发现了一个特别神奇的操作，就是我们只用搜索下载Flutter插件就可以了，下载的时候AS会检查你是否装有Dart插件如果没有安装，它将给你提示，然后直接下载Dart 和 Flutter插件。

![20180530143759414][]

安装好之后重启一下AS就可以使用插件了。

##### (6)创建我们的第一个FlutterDemo #####

![20180530144013200][]

Flutter支持的sdk环境：Android 4.1（API 16）或者更高版本。 Android模拟器：推荐使用x86或者x86\_64镜像。

创建project过程和普通安卓项目是很类似的。

> （一）打开AS，点击 File --> New Flutter Project，选择Flutter application ，点击next，输入一个工程名字

\*\*注意：\*\*项目名称必须是小写，单词之间用下划线隔开，你看我这样创建就给我提示错误了，报错的如图所示。

![20180530144117367][]

> （二）输入包名，点击next，点击finish，等待编译就可以了。如果没配置好，这个时候往往会报错。

\*\*注意：\*\*这里可以支持ios和kotlin，如果需要的话可以勾上。

![20180530144821730][]

（三）首先模拟器，然后选择要运行的项目，注意了，这里有一个`MainActivity` 和 `main.dart`，选择`main.dart`，然后点击`绿色的三角号`图标运行（或者点击菜单栏 `Run`）就可以了。

![20180530145114948][]

但是有的同学想问了，咦点击了之后怎么出来了下面这个框框那，貌似是没有识别我的手机啊，不对啊，我已经连接手机了为什么识别不出来呢？bug?

![20180530150320849][]

![20180530145424389][]

这是因为你没有配置adb,需要在本地配置adb,还有一个ANDROID\_HOME也一定要配置：

adb配置：

![20180530145554265][]

ANDROID\_HOME配置：

![20180530145807633][]

说明一下：这里的变量名一定要是ANDROID\_HOME,否则会出错。变量值为你android sdk的路径

我们配置完成之后重新打开AS，然后会神奇的发现，你创建的模拟器都出来了。

![20180530150842308][]

我们就可以选择一个运行啦，这是我的运行结果，简单修改了下，点击”+’号增加数值，点击“\-”号减少数值

![20180530151046980][]

好了本文大概介绍完毕啦，如果觉得对你有所帮助的话点个赞吧，**[下一篇：Dart环境搭建][Dart]**。

[https_github.com_AweiLoveAndroid_Flutter-learning]: https://github.com/AweiLoveAndroid/Flutter-learning
[20180530142903931]: /images/20220523/378f1716e23e4a7da8f5e3e522f72387.png
[20180530143041446]: /images/20220523/c6043b56264e4ea68af84314644fa9d7.png
[https_flutter.io_setup-macos]: https://flutter.io/setup-macos/
[https_flutter.io_setup-linux]: https://flutter.io/setup-linux/
[Link 1]: https://docs.microsoft.com/en-us/powershell/scripting/setup/installing-windows-powershell?view=powershell-6#upgrading-existing-windows-powershell
[20180530094745738]: /images/20220523/83d6a4b211414c92a72ccd7aebc52c4b.png
[20180530094824458]: /images/20220523/5733d99fa7044362ad015f845fb1a594.png
[20180530094857490]: /images/20220523/f4144c0f1980488bb9d19c96bdc0c39e.png
[20180530094947226]: /images/20220523/3cf761a087534f59adfe1adf967b2a1d.png
[20180530100748206]: /images/20220523/dbbb7be63fa1419892823abaf55533b2.png
[20180530100646466]: /images/20220523/b277fc9074354ad5acf1fb14c466c145.png
[20180530142135643]: /images/20220523/6afd757d085d47ee9fad3eac35852833.png
[20180530142316883]: /images/20220523/53c62cad7d6842ea8c112ca978cf57c9.png
[20180530143435654]: /images/20220523/d083cad001a94920801b9a9d11415762.png
[20180530143759414]: /images/20220523/34c39d200e2d45d6bfe3f7eaeebaf692.png
[20180530144013200]: /images/20220523/c6116dbe4e514ac4a1fc9e11f8ad0ed9.png
[20180530144117367]: /images/20220523/73ff05b6c5e14fb1bd8d12dcb35e080d.png
[20180530144821730]: /images/20220523/a8cada16ce9e4fc6a5796447829f76e2.png
[20180530145114948]: /images/20220523/9aff611a1a7c438b9f163c5830c5b7c7.png
[20180530150320849]: /images/20220523/f3f1e571c25a44df9ee89a272edb3f8b.png
[20180530145424389]: /images/20220523/61b219cc6aef403da72664c1b8751250.png
[20180530145554265]: /images/20220523/7b8197ae7f004aee9f26cb1480dd5e7d.png
[20180530145807633]: /images/20220523/6d81d26f49e34ff2927e1d27ddda5c64.png
[20180530150842308]: /images/20220523/ccc45c3651b64608a562d3a256e0736a.png
[20180530151046980]: /images/20220523/bff7eec151754faf899590432175d734.png
[Dart]: https://blog.csdn.net/lyh1299259684/article/details/80524795