Hello Flutter! 哎！你环境配了吗？

心已赠人 2022-03-21 20:01 193阅读 0赞

# 前言 #

技术的更新迭代越来越快，一直都有原生开发被取代的声音，作为一个纯原生开发者来说，跨平台开发，是一种新的尝试。为什么要选择 Flutter ，因为毕竟是谷爹的亲儿子, Android 也是亲儿子，说起来也都是兄弟，加深下兄弟之间纯真的友谊，还是很有很有必要的。

# Flutter 是什么？ #

Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作。在全世界，Flutter 正在被越来越多的开发者和组织使用，并且 Flutter 完全免费、并且开源，对开发者十分友好。

上面是我从官网上摘抄来的，总结来说，我只记住了三个关键词：

*  热重载
 *  跨平台
 *  UI框架

相信接下来学习中会逐渐体验这几点。接下来开始第一步配置 Flutter 开发环境。

# 准备 Flutter 开发环境 #

Flutter 可以选择纯命令方式开发，也可以选择 IDE ，IDE 可以使用 Android Studio，Xcode，VScode 等等，毕竟使用 IDE 开发比较直观，所以我选择了已经安装的 Android Studio。但是无论是那种方式开发，都需要下载 Flutter SDK，所以配置的步骤为：

1.  下载 Flutter SDK。
2.  配置 Flutter 环境变量
3.  IDE 安装 Flutter 相关插件

## 下载 Flutter SDK ##

可以去[官网][Link 1]下载，但是  
由于众所周知的原因，大概率会很慢，这里推荐一个[清华大学的镜像][Link 2]，速度超快，并且自带学霸气息，助你 flutter 大成～

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

# Flutter镜像 国内用户需要设置
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

## 配置 Flutter 环境变量 ##

# Flutter命令行工具
    export PATH=<yourpath>/flutter/bin:$PATH
    
    # 注意要将 <yourpath> 换成自己的地址，例如我的：
    export PATH=/Users/duanrui/Documents/youzan/flutter/flutter/bin:$PATH

配好执行命令行，检查下flutter 的配置环境。

# 检查下flutter 的配置环境
    flutter doctor

注意看下执行的结果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70]  
有的错误是 IDE 未安装，如果不需要可以不用管，例如下图的 Xcode，但是警告 `Android license status unknown`,因为我是 Android 环境开发，所以我就需要看一下。按照提示执行 `flutter doctor --android-licenses`,但是仍然报错。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 1]

解决方案：jdk 环境修改为 java 8，然后再执行一次 `flutter doctor --android-licenses`，一直输入 y,同意下去就好了。

## Android Studio 安装插件。 ##

需要安装的插件有两个：flutter 和 dart，安装之后需要重启Android Studio 使插件生效。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 2]

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

安装之后需要重启 Android Studio 使插件生效，生效后开始页面出现 New Flutter project 选项,  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 4]

# 从 Hello World 开始 #

环境配置好了，现在可以开始编写我们的第一个 Flutter 项目了。点击 New Flutter project ,起个你喜欢的名字，下一步，直到项目创建成功。

项目结构如下：  
![a8e4736061d174bade9769f7dc614f9d.png][]

暂时不要管它是为啥这样，运行起来先。

*  选择一个设备，我选择创建了一个 Android 模拟器
 *  选择 main.dart
 *  Just Run！

![在这里插入图片描述][20210416104046632.png]

运行成功后，会在模拟器上看到这样的画面：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 5]

如果失败了，没有关系，成功过程中不可避免会遇到种种磨难，下面记录了很多人都遇到的几个问题：

**1.一直在Initializing gradle… ,仿佛卡住了。**

原因：伟大的墙阻隔了 gradle 的下载。  
解决：将项目依赖的 gradle 版本换成本地已下载的版本。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 6]

如果不记得本地已下载的 Gradle 版本是什么，可以通过以下的方法查看：

方法一：打开之前的项目，查看该项目的 gradle 版本配置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 7]

方法二：Android Studio 中新建项目成功后会自动下载项目中定义版本的Gradle，存储在制定目录中，去这个目录就可以看到，有的同学可能有很多个版本，选择其中一个就好了，推荐选择其中最新的版本，比较靠谱。  
Mac平台默认下载目录： `/Users/<username>/.gradle/wrapper/dists`  
Win平台默认下载目录：`C:\Users\<username>.gradle\wrapper\dists`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 8]

**2.一直在Resolving dependencies…，仿佛又卡住了。**  
原因：是的，还是伟大的墙，这次阻隔的是下载依赖的仓库地址。  
解决：将仓库地址换成阿里云的镜像地址。

//        google()
    //        jcenter()
            maven { url 'https://maven.aliyun.com/repository/google' }
            maven { url 'https://maven.aliyun.com/repository/jcenter' }
            maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

# 开始体验 Flutter #

经过上个步骤，第一个 Flutter 项目已经成功运行了，现在来体验下 Flutter 的几个特色功能：

## 热重载 ##

1.修改 main.dart 文件中一个字符串  
![089a1b792c5108d6b73316800b676a87.png][]  
2.保存代码或点击热重载按钮 (就是闪电⚡️按钮)，然后发现模拟器上面的页面也自动变化了，而且是保存着我之前操作的状态，数字仍然为 4，不是初始化的 0。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 9]

从 Console 窗口中的运行日志中，看出以上操作就是热重载过程。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 10]

## 跨平台 ##

以上是 Android 设备上的展现，在 iOS 设备 iPhone XR上的运行效果是这个样纸的，看下面：

![893ecfc179ca788d142da512c63539ac.png][]

基本上是一模一样的，没有改动任何代码，就达到了两个平台UI和逻辑的统一。

MAC OS 上部署到 iOS设备的步骤：

1.  下载安装 Xcode
2.  配置 Xcode 命令行工具

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

1.  运行以下命令，安装 libimobiledevice，这是一个横跨 Mac,Windows,Linux三大桌面平台的非官方版本USB接口协议库，可以用它来管理连接的iOS设备。

brew update   
    brew install --HEAD libimobiledevice   
    brew install ideviceinstaller ios-deploy cocoapods   
    pod setup

1.  打开一个 iOS 模拟器，如果顺利， Android Studio 的设备列表已经可以看到刚才打开的 iOS 设备了。  
    已经安装了Xcode，iOS模拟器不需要另外再安装，命令行打开 iOS 设备的步骤是：

//列出你安装的所有可用的设备
    xcrun instruments -s
    //开启指定模拟器
    xcrun instruments -w "iPhone XR (12.1)"

1.  选择 iOS 设备，运行项目。

过程中如果遇到其他问题，运行命令行 `flutter doctor -v` 和网络搜索基本都能解决。

## UI框架 ##

Flutter 提供了很多组件，可以很轻松实现很多漂亮的 UI 设计，这一点，相信在后面的学习中，可以慢慢体验到。

# 结语 #

以上就是全部内容了，Flutter 的基础开发环境已经配置完毕，接下来会通过一些简单的页面小 Demo 去了解更多的知识，有兴趣的可以一起学习哈，下篇文章见。

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

欢迎关注个人微信公众号，最新的博客，好玩的事情，都会在上面分享，期待与你共同成长。

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

[Link 1]: https://flutter.dev/docs/development/tools/sdk/releases
[Link 2]: https://mirrors.tuna.tsinghua.edu.cn/flutter/flutter_infra/releases/stable/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70]: /images/20220322/ce2f3d23e17741248f882928a232c110.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 1]: /images/20220322/002bdbcf53184459808db39880a80379.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 2]: /images/20220322/93fa0cfe315b4a96803ab94dea158c2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 3]: /images/20220322/2dc5f2f082014f39989209615387bca1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 4]: /images/20220322/fefa97c863a24d4a81c218777cddb330.png
[a8e4736061d174bade9769f7dc614f9d.png]: /images/20220322/f1ef233ba7a54f2aaad6b54daa5aa712.png
[20210416104046632.png]: /images/20220322/24db4faf469c4212b4c11058981d0acb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 5]: /images/20220322/79753e53df1746288a4ebbca3407432f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 6]: /images/20220322/632b43d8702248f8805201245c42e5a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 7]: /images/20220322/21fdd013fc274a1a90582fea98e0705a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 8]: /images/20220322/845853cd004e492c9ed6113de1a4d27b.png
[089a1b792c5108d6b73316800b676a87.png]: /images/20220322/0950050280774db680ef89cf56d684e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 9]: /images/20220322/d4320f71566e41e8a04661f25e46a257.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70 10]: /images/20220322/c28e3b76c3c243dfb4e03b4a13c189f8.png
[893ecfc179ca788d142da512c63539ac.png]: /images/20220322/eb0307f1534042f4a984d260228f3157.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70_pic_center]: /images/20220322/98c9eaf6f7714c9ca0c45657c6da3903.png