Flutter 开发环境搭建——Mac OS

Flutter 开发环境的搭建,对于前端来说还是有点复杂的,我这边由于做过 Android 开发,已经搭好 Java 和 Android 的环境,这里主要介绍 Flutter 的开发环境。

SDK下载

官方地址:https://flutter.dev/docs/development/tools/sdk/releases

Flutter SDK

推荐使用最新 Stable 版本,需要注意的是,网页浏览是没有问题,但是下载就需要想点办法了。

对此官方也给出了解决办法:https://flutter.dev/community/china

将下载地址复制出来,替换 storage.googleapis.com 域名为 storage.flutter-io.cn 即可下载,例如:

  • 原始网址:
    https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip

  • 镜像网址:
    https://storage.flutter-io.cn/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip

下载后解压,我保存在 /Users/ff/Develop/Flutter/ 目录下,这个路径在下面配置环境变量时需要使用。

配置镜像和环境变量

由于不能保证镜像长期有效,建议官网进行配置参照:https://flutter.dev/community/china

这里也简单介绍下:
vim ~/.bash_profile

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# Setting PATH for Flutter
export PATH=/Users/ff/Develop/Flutter/flutter/bin:$PATH

source ~/.bash_profile

完成配置,使用 flutter -h 检测是否配置成功

配置成功

检查开发环境

使用 flutter doctor 检查开发环境:

➜  ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.13.6 17G7024,
    locale zh-Hans-CN)
 
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    ✗ 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
    ✗ Brew can be used to install tools for iOS device development.
      Download brew at https://brew.sh/.
[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2019.1.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

[✓] 标记成功的配置项,[!] 标记有问题的配置项。

  • 第一部分:Flutter 环境

  • 第二部分:Android 工具链
    有些 licenses 没有接受,需要运行 flutter doctor --android-licenses,遇到 (y/N)? 一路 y 即可。

  • 第三部分:iOS 工具链
    libimobiledevice 和 ideviceinstaller 没有安装;ios-deploy 没有安装;brew 没有安装。
    首先需要安装 brew,不然是无法执行它推荐的 brew ... 命令的
    使用下面命令安装 brew :
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    输入命令后,根据提示按下 return,然后输入 root 密码,后面等待就可以了。
    brew 安装完成后,按照提示依次执行 brew ... 命令即可。

  • 第四部分:Android Studio 插件
    未安装 Flutter 插件和 Dart 插件


    安装插件

    点击Install后,它会捆绑安装 Dart 插件,点击 Yes 即可,安装完成后根据提示Restart,重启后,就会发现增加了一个 Flutter 入口。


    AS 启动界面
  • 第五部分:IDEA 插件
    未安装 Flutter 插件和 Dart 插件,由于我安装了 IntelliJ IDEA,所以这里也会有个提示,如果不使用 IDEA 的话,可以不用理会。

  • 第六部分:设备连接
    提示你没有连接设备,当连接模拟器或者真机后,这里自然就不会有问题了。

按照上面提示,全部安装完成后,连接一台设备,再次使用 flutter doctor 检查开发环境:

➜  ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.13.6 17G7024,
    locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] iOS toolchain - develop for iOS devices
    ✗ 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
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work
        on iOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✓] Android Studio (version 3.4)
[!] IntelliJ IDEA Ultimate Edition (version 2019.1.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Connected device (1 available)

iOS 工具链还有有问题:

  1. Xcode安装不完整
    根据提示执行:
    sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  2. CocoaPods没有安装
    根据提示分别执行:
    brew install cocoapods
    pod setup

再次使用 flutter doctor 检查开发环境:

➜  ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.13.6 17G7024,
    locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.4)
[!] IntelliJ IDEA Ultimate Edition (version 2019.1.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

搞定!

新建Flutter项目

启动 Android Studio,Start a new Flutter project,后面选项默认值即可。

Flutter project

有异议的部分是这里:
Create project offine

有不少人说要勾选离线项目,不然构建项目会非常慢,卡在 Creating Flutter Project,这个和网络状况是有关系的,我这里尝试不勾选,构建也是很快的,如果存在问题可以尝试使用手机热点,推荐大家尽量不要勾选,除非真的不能成功创建。

项目创建成功后,在 Run 的时候会出现卡在 Resolving dependencies... 的现象

Resolving dependencies

这个原因是连接不到 google 仓库,可以使用阿里镜像:

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' }

需要修改两个文件:

  1. 项目中 android/build.gradle

    build.gradle

    注释掉google()jcenter()

    buildscript {
        repositories {
    //        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'}
        }
    
        dependencies {
            classpath 'com.android.tools.build:gradle:3.2.1'
        }
    }
    
    allprojects {
        repositories {
    //        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'}
        }
    }
    
  2. Flutter SDK 中 /packages/flutter_tools/gradle/flutter.gradle
    注释掉google()jcenter()

    buildscript {
        repositories {
            // 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'}
        }
        dependencies {
            classpath 'com.android.tools.build:gradle:3.2.1'
        }
    }
    

另外,直接 Run 起来的是 debug 版本,由于支持 Hot reload,所以安装包比较大,release 版本大小和原生安装包相差不大。

升级Flutter

使用命令 flutter upgrade 可以很方便的更新 SDK。

如果有下面提示:

Your flutter checkout has local changes that would be erased by upgrading. If
you want to keep these changes, it is recommended that you stash them via "git
stash" or else commit the changes to a local branch. If it is okay to remove
local changes, then re-run this command with --force.

只需要运行 flutter upgrade --force 即可强制升级。

参考

官网中文:https://flutter-io.cn/
中文社区:https://flutterchina.club/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容

  • Flutter相关配置及问题记录 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量...
    Anyers阅读 2,681评论 0 2
  • flutter是最近比较火的新玩意,解决移动端跨平台的痛点,且性能不输原生开发。 在flutter之前,为了解决跨...
    Code人生阅读 4,126评论 1 8
  • 写作二字,在当初看来,对于我一个打工的人来说,实在太过遥远了。每天下班后,连休息时间都没有,哪能抽出时间写...
    微光使者阅读 431评论 2 10
  • 今天做了一件错事。 在食堂打完饭拿勺子的时候,不小心把一个勺子弄掉在地上,却没有弯腰去捡。不该。
    晚来天欲雨阅读 614评论 0 0
  • 我是火啊! 你往火里投东西,他只会燃的旺盛,火也会死,你抽走氧气,他死了;你向他泼水或是撒沙,他也会死,但火也能蔓...
    苏菲很暖阅读 373评论 0 6