Flutter 安装 (Mac环境)

Posted wangjunling888

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter 安装 (Mac环境)相关的知识,希望对你有一定的参考价值。

Flutter 安装

今天偶然看到一个公众号写了一篇关于Flutter 的文章, 感觉挺好, 所以就来尝试一下, 整个安装过程挺简单, 但也不是特别顺利, 因为我自己使用的是Mac系统所以这里所有操作都是Mac系统下的操作

  1. 安装Flutter SDK

    编写你的第一个 Flutter App 这篇文章有SDK和编辑器的下载方式,

    我这里推荐使用git下载

    //1.终端中输入以下指令克隆项目
    git clone -b beta https://github.com/flutter/flutter.git
    //2. 导出到Flutter保存路径
    export PATH=`pwd`/flutter/bin:$PATH

    由于国内网络限制我们可以通过修改镜像地址来解决, 好在Google良心,专门给我们大陆提供了方案, 终端中一次输入以下命令即可解决

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    git clone -b dev https://github.com/flutter/flutter.git
    export PATH="$PWD/flutter/bin:$PATH"
    cd ./flutter
    flutter doctor
  2. flutter doctor 检测环境执行结果如下

    [✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale zh-Hans-CN)
    [✓] android toolchain - develop for Android devices (Android SDK 27.0.3)
    [!] ios toolchain - develop for iOS devices (Xcode 9.4.1)
       ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
           brew install --HEAD libimobiledevice
           brew install ideviceinstaller
    [✓] Android Studio (version 3.1)
    [!] IntelliJ IDEA Ultimate Edition (version 2018.1.1)
       ✗ Flutter plugin not installed; this adds Flutter specific functionality.
       ✗ Dart plugin not installed; this adds Dart specific functionality.
    [!] VS Code (version 1.24.1)
    [✓] Connected devices (1 available)
    
    ! Doctor found issues in 3 categories.
    
    • 第一个对勾是说我的Flutter安装没问题

    • 第二个对勾是说我的安卓工具也OK

    • 第三行是说iOS工具没安装好, 具体就是需要安装他提供的两个库 按照他的说法终端执行如下操作

      brew install --HEAD libimobiledevice
      
      brew install ideviceinstaller
      
      注意上面这两个东西第一次没安装成功就是因为我网络的原因, 有可能你第一次执行完 flutter doctor 就不会报这个错,  对于网络原因的话我建议大家去

      完事之后再执行 flutter doctor, 这一项就会变成对勾

    • 第四个对勾是说我的Android Studio中Flutter插件已经安装, 如果没有安装提示和第五个 [!] 内容提示一样

      [!] Android Studio IDEA Ultimate Edition (version 2018.1.1)
       ✗ Flutter plugin not installed; this adds Flutter specific functionality.
       ✗ Dart plugin not installed; this adds Dart specific functionality.

      解决方案就是打开Android Studio -> Preference > Plugins 在搜索框中搜索 Flutter, 本地没有, 就联网查找,搜索到Flutter, 点击安装即可 Dart环境他自动会安装好, IntelliJ 的操作是一模一样的这里不再赘述

    • 第五个是 VS code 编辑器, 这个里面直接搜索插件Flutter安装即可

    • 第六个是我链接的一台设备

  3. 全部搞定运行 flutter doctor 结果如下

    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale zh-Hans-CN)
    [✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    [✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    [✓] Android Studio (version 3.1)
    [✓] IntelliJ IDEA Ultimate Edition (version 2018.1.1)
    [!] VS Code (version 1.24.1)
    [✓] Connected devices (2 available)
    

    看到以上结果就可以高高兴兴的开发了.

创建第一个Flutter Demo

  1. 打开 Android Studio 新建一个Flutter项目 如下图所示

  2. 第二步选择 一个项目模板 Flutter Application

  3. 如下图, Flutter SDK path 一定要填写正确, 如果你上面操作和我一样, 用git克隆的, 那么位置就在/Users/youUserName/flutter , youUserName就是你的电脑用户名, 正确填写即可.

  4. 打开项目如果有手机运行APP到手机上, 瞬间开心死了, 一套代码两个平台简直美死了,

  5. 接下来就是要好好学习dart语法了

好了今天的探索就到这里, 以后学习时再来总结, 如果大家有好的学习方法或见解请在留言区积极交流, 互相学习, 谢谢

以上是关于Flutter 安装 (Mac环境)的主要内容,如果未能解决你的问题,请参考以下文章

从0开始学习Flutter 02 图解 Mac 环境下安装配置环境

Flutter 专题02 图解 Mac 环境下安装配置环境 #yyds干货盘点#

Flutter 安装 (Mac环境)

Flutter 安装 (Mac环境)

flutter 安装环境 Mac

MAC安装flutter开发环境