Flutter-下载安装Flutter以及移动端环境配置

最新推荐文章于 2024-08-08 08:57:11 发布

爱勤海之旅

最新推荐文章于 2024-08-08 08:57:11 发布

阅读量2k

点赞数 2

分类专栏： Flutter 文章标签： Flutter Dart

本文链接：https://blog.csdn.net/SSY_1992/article/details/93165591

版权

Flutter 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

一、下载安装

下载地址
在这里插入图片描述
下载好之后，放在你想要放的地方，我将其放在/usr/local目录下。

二、配置镜像

因为Flutter在运行的时候，就需要去官网下载一些需要的资源，但是因为天国特色的wall的原因，我们就需要镜像服务器，这个在官网上面有说明，而且这是一个临时的镜像，后面还要以官网的镜像地址为准。

打开中终端，先找到这个.bash_profile隐藏文件，我们用vim打开这个文件

vim ~/.bash_profile

文件打开后默认是不可编辑状态，按下键盘上的A键进入编辑模式，把下面三个环境变量配置进去

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/usr/local/flutter/bin:$PATH

第三个环境变量这里/usr/local/是我存放的目录，然后/flutter/是我们刚刚解压的的zip包里面的flutter文件夹。上面两个环境变量是两个镜像地址。接着输入:号，然后输入wq保存并退出vim。输入如下命令：

source ~/.bash_profile

最后我们就可以验证一下flutter环境有没有配置成功了：

flutter -h

看到如下如的打印信息就是配置成功了在这里插入图片描述
接下来，我们输入：

 flutter doctor

出现下图所示即安装成功，前两个是安卓与iOS的调试环境，出现叉号就按照给出的命令一条条配置就可以了，第三四个分别为Android Studio与IntelliJ IDEA的开发环境，我在MAC上用的是IntelliJ IDEA，第五个是设备连接。flutter doctor命令可多次执行，如果MAC没有homebrew可以面向百度先安装一下homebrew，不然用不了brew 的命令。
在这里插入图片描述
三、配置Android Studio环境

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.

下载地址，下载完成后安装，安装路径默认是在：/Users/shiyusun/Library/Android/sdk。打开AS（Android Studio简称）之后，它会自动下载一些应该下载的东西，完事之后我们再执行一下命令： flutter doctor。

配置安卓的环境变量，还是在根目录下找到vim .bash_profile文件，并在其中添加四个环境变量

export ANDROID_HOME=/Users/shiyusun/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/emulator
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

发现在会有这个提醒：

✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses

意思是Android许可证问题，而且它也告诉我们解决办法了，输入命令：

flutter doctor --android-licenses

在这里插入图片描述
按照打印提示，直接y（yes）往下进行，直到最后会打印All SDK package licenses accepted，说明已经接受了全部许可证。我们再执行命令：flutter doctor

在这里插入图片描述
打印结果可以看出，已经解决了第一个✗号。我们来解决第二个Android Studio问题：

    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

思议就是缺少Flutter插件，需要到Android Studio里面去配置一下。Android Studio -> Preferences -> Plugins，选择Marketplace，然后在搜索栏中输入flutter，找到第一个Flutter的插件，然后Install。当跳出安装Dart插件的提示界面时，记得点击Yes进行安装。安装完毕之后Restart IDE重启AS。在这里插入图片描述
重启之后就能看到多了一个这个东西:

我们再用命令flutter doctor检测一下，发现其也变成对号，如下图：

上图看到[✓] Android Studio (version 3.4)，说明安卓的环境基本上配置成功，接下来配置iOS环境。

四、配置iOS环境

先看下配置提醒：

 ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy

本人就是做iOS开发的，Xcode是最新版本10.2.1，显然版本和安装都没有问题，那就按照它说的执行下命令试试：

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

输入密码之后，再执行命令flutter doctor检测一下
在这里插入图片描述
上图可以看出，安装问题已经解决了。还有两个小问题✗ libimobiledevice and ideviceinstaller are not installed和✗ ios-deploy not installed，我们依然按照他说的去做，输入命令：

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller

注意：执行完上面几条命令后，要执行下面一条命令，不然结果还是会报错的。

 brew install ios-deploy

这几个命令可能执行的时间会长一点，稍微耐心等待一下。如股一切顺利恭喜你！！！但是总会有问题出现，当我执行brew link usbmuxd的时候报错了：

Could not symlink include/usbmuxd-proto.h /usr/local/include is not writable.

我们来排查下问题，输入命令：

brew doctor

在这里插入图片描述
上面给出了报错的原因，按照它的提醒去做，输入命令：

sudo chown -R $(whoami) /usr/local/include /usr/local/lib /usr/local/sbin

sudo mkdir -p /usr/local/include /usr/local/lib /usr/local/sbin

然后我们再执行命令： brew link usbmuxd就OK了，继续执行下面的命令。执行完之后，我们再执行命令flutter doctor检测一下：
在这里插入图片描述
嗯，错误不见了，到这里iOS和Android环境配置完了。但是里面我的Mac上面还有ItelliJ IDEA，这个也要安装Flutter插件，不是用它的话可以先不管它，有的同学电脑安装是VSCode，插件安装过程类似AS。刚好我们安装好了AS，我们可以用它来创建一个Flutter项目。

注意：不知道是不是我的IDEA版本太低了（ideaUI-2018.3.2）还是什么原因，反正就是搜不到Flutter插件，Dart都可以搜的到，试了好多方法就是不行，一气之下直接到IntelliJ IDEA官网，下载一个最新版本（ideaUI-2019.1.3），装好之后发现还是搜不到，而且更夸张，是什么都搜不到的那种，一个插件也搜不到，感情还不如老版本的呢！！！试遍了网上的方法，就是不行，干脆我也不用你了，反正有Android Studio可以用，而且是已经装好的插件。戏剧性的一幕出现了，过了大概一个小时吧，我再去IntelliJ IDEA搜索插件居然能搜到了，而且很齐全，Flutter插件也有，心中说不出的滋味，真是感到无语！！！于是就去 flutter doctory一下，结果令人很满意：
在这里插入图片描述
看到都是✅，心里舒服啊！最后那个三个连接的设备是我在Android Studio运行模拟器的三个机型（iPhoneXR、iPhone6sPlus、一个安卓模拟器）