flutter的介绍和环境搭建（超详细）

曾经终败给现在 2021-12-24 00:59 339阅读 0赞

使用Flutter首先需要搭建Flutter的开发环境，以下以 Android  、Windows 标准 搭建开发环境，其他pc系统，移动平台请看官方文档。

**一、使用镜像**

**官方说明：**

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

**注意：** 此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 [Using Flutter in China][] 以获得有关镜像服务器的最新动态。

![format_png][]

\------------------------------

解释：官方就给了两行代码一样的东西，可能有的同学看不懂，实际运用如下：

**1、打开'计算机高级系统设置' ---> '高级'--->'环境变量'**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70][]

**2、在用户环境变量中分别加入上述两行的 '变量' 和 '值'**

export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 1][]

![format_png 1][]

![format_png 2][]

**Android SDK 的环境变量在同样是在用户变量添加,，及本地的SDK地址。**

**ANDROID\_HOME   D:\\SoftWare\\Java\\Android\\Sdk**

** 二、获取Flutter SDK**

这一步比较简单，去官方找到最新的版本下载下来安装即可，注意不要将flutter安装到需要一些高权限的路径如`C:\Program Files\`

[ 官方下载地址][Link 1]   or  [GitHub下载地址][GitHub]

这里下载或许很慢，建议通过

Git软件： git clone https://github.com/flutter/flutter.git

或者我这里使用的是Windows.Mac的根据官方教程下载安装即可。  
**[https://flutter.io/docs/get-started/install][https_flutter.io_docs_get-started_install]**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 2][]

然后 在查看版本号

**三、更改环境变量**

如果你想在Windows系统自带命令行（而不是）运行flutter命令，需要添加以下环境变量到用户PATH：

*  转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
 *  在“用户变量”下检查是否有名为“Path”的条目:
    
     *  如果该条目存在， 追加 flutter\\bin的全路径，使用 ; 作为分隔符.
     *  如果该条目不存在，创建一个新用户变量 Path ，然后将 `flutter\bin` 的全路径作为它的值.

重启Windows以应用此更改.

验证方法：使用`flutter --version` 查看一下版本号

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 3][]

可以看到我当前的版本号为1.2.1

**四、升级Flutter SDK和依赖包**

要升级flutter sdk，只需一句命令：

flutter upgrade

该命令会同时更新Flutter SDK和你的flutter项目依赖包。如果你只想更新项目依赖包（不包括Flutter SDK），可以使用如下命令：

flutter packages get获取项目所有的依赖包。
    flutter packages upgrade 获取项目所有依赖包的最新版本。

**五、Flutter SDK分支**

Flutter SDK有多个分支，
    如beta、dev、master，其中beta分支为稳定分支（日后有新的稳定版本发布后可能也会有新的稳定分支，如1.0.0），
    dev和master为开发分支，安装flutter后，
    你可以运行flutter channel查看所有分支，如笔者本地运行后，结果如下：
    
    Flutter channels:
      beta
      dev
    * master
    带"*"号的分支即你本地的Flutter SDK 跟踪的分支，
    要切换分支，可以使用flutter channel beta 或 flutter channel master，Flutter官方建议跟踪稳定分支，
    但你也可以跟踪master分支，这样可以查看最新的变化，但这样稳定性要低的多。

查看所有分支及当前分支

![format_png 3][]

**六、`flutter doctor`**

查看依赖是否齐全

可以看到 红色X 标记的使我们还需要对应处理的

依次看：

![format_png 4][]

当前Android Studio 版本为3.5 Beta 4

注意 如果提示插件出问题，需要在Android studio里面进行插件的下载

对应安装操作：

安装步骤：

1.  启动Android Studio（注意：要求as 3.0+，建议先用稳定版本的Android studio Bate版本还不是太稳定）。
2.  打开插件首选项 (**Preferences>Plugins**, Windows：**File>Settings>Plugins**)。
3.  选择 **Browse repositories…**，选择 flutter 插件以及dart 并点击 `install`。
4.  重启Android Studio后插件生效。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 4][]

更新重启Android Studio完成后，再次 flutter doctor

![format_png 5][]

显然，现在flutter 开发环境的搭建已经完成，验证如下：

发现多了一个 New Flutter Project ，可以建立Flutter项目说明 Flutter的环境搭建已经成功。

![format_png 6][]

**七、创建一个Flutter项目试试：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 5][]

书到用时方恨少，纸上得来终觉浅。

[Using Flutter in China]: https://github.com/flutter/flutter/wiki/Using-Flutter-in-China
[format_png]: /images/20211223/b8cc708cc70248b8a8754ef9bac9c4b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70]: /images/20211223/4d394ef90cbf4b5eb80074a3a39e3b34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 1]: /images/20211223/a7d64985d3964d6fb701c8531dece909.png
[format_png 1]: /images/20211223/1b736f1166be4963abab3f25eed0da62.png
[format_png 2]: /images/20211223/77b6ee071e684037ac2204024f217faf.png
[Link 1]: https://flutter.io/docs/development/tools/sdk/archive#windows
[GitHub]: https://github.com/flutter/flutter/releases
[https_flutter.io_docs_get-started_install]: https://flutter.io/docs/get-started/install
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 2]: /images/20211223/385f395d4f9c482f81066b4e879c1424.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 3]: /images/20211223/56f99d979fc340649ed9d7d683a131ae.png
[format_png 3]: /images/20211223/a46dc31cd75c4492915786388a54c984.png
[format_png 4]: /images/20211223/8867b7be4163401f9893ab9ab528ecb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 4]: /images/20211223/e4e07968b504479e98180a57703a2f91.png
[format_png 5]: /images/20211223/7fefbe69e7b74628b7b76843c89cdab9.png
[format_png 6]: /images/20211223/2873bb7d8f314e7783fdce0d0fabdf36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 5]: /images/20211223/548856b46ab14193a447015326de70c3.png