Flutter开发环境搭建---Mac

配置Flutter中国镜像

因为有可能被墙,所以需要配置镜像。
国内有两个镜像可以用,一个就是官方 Flutter 社区的国内镜像,另一个是上海交通大学 Linux 用户组的镜像,建议用官方 Flutter 社区的国内镜像。

  • Flutter 社区

FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn

PUB_HOSTED_URL: https://pub.flutter-io.cn

  • 上海交通大学 Linux 用户组

FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn

PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn

配置方法

~/.bash_profile上添加:

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

保存文件后,在运行:

source ~/.bash_profile
一、下载Flutter SDK包

下载地址:SDK包

下载SDK![flu_h.png](https://upload-images.jianshu.io/upload_images/2660287-492a18ab661d28f0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) .png

二、配置环境变量

1、

vim ~/.bash_profile

2、找到sdk文件的位置,我是放在了根目录的sdk文件下,因此:

export FLUTTER_HOME=/Users/menghua.ma/sdk/flutter  //这个路径就是压缩包解压后的位置
export PATH=$PATH:$FLUTTER_HOME/bin

3、检查是flutter是否安装成功

flutter -h

出现下图的内容,证明成功了


flutter检查.png
三、检查开发环境

使用flutter的检查一下都需要安装哪些软件和插件的支持:

➜  ~ 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.12.6 16G1918, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
    ✗ 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
    ✗ CocoaPods installed but not initialized.
        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 initialize CocoaPods, run:
        pod setup
      once to finalize CocoaPods' installation.
[!] 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 2016.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    ✗ This install is older than the minimum recommended version of 2017.1.0.
[✓] VS Code (version 1.22.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

图片上的每一条都是需要打勾的状态才对,如果有[!]x标志,表示本行检测没有通过,就需要我们根据提示设置或者安装相应的软件了。

⚠️Android toolchain - develop for Android devices是代表着要安装Android 开发环境,如果没有安装的话,需要安装一下,步骤在下边。
⚠️brew install --HEAD libimobiledevice:此时有可能会出现权限被拒绝的错误,那么就先执行sudo chown -R $(whoami) /usr/local,然后再brew install --HEAD libimobiledevice

⚠️pod setup的时候有可能会出现如下报错:

emote: Enumerating objects: 20009, done.
  remote: Counting objects: 100% (20009/20009), done.
  remote: Compressing objects: 100% (9896/9896), done.
  error: RPC failed; curl 56 SSLRead() return error -980677.00 KiB/s
  fatal: The remote end hung up unexpectedly
  fatal: early EOF
  fatal: index-pack failed

那么此时就参考一下文章执行:https://blog.csdn.net/YangxLan/article/details/73930755?locationNum=3&fps=1

三、安装Android/IOS 开发环境
配置Android开发环境

1、下载Android Studio

因为需要用到Android 开发环境,所有需要下载。
下载地址:Android Studio,选择Mac的版本就OK。
或者去官网下载:Android Studio官网

2、配置Android SDK环境变量

打开 Android Studio,选择 Confiure -> 'SDK Manager':


打开Android Studio.png

SDK路径.png

记住这个地方的SDK的位置,在~/.bansh_profile添加:

export ANDROID_HOME=/Users/****/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

此时已经配置好了Android的开发环境,但是Android Studio需要安装Flutter插件才可以支持Flutter。

搜索Flutter进行安装。安装完成以后重启Android Studio。


安装Flutter插件.png
配置IOS开发环境

1、安装Xcode:由于我的电脑不支持最新的11版本,因此着了一个其他版本下载:download
2、运行:

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

3、打开Xcode,同意Xcode的许可协议
4、运行

sudo xcodebuild -license
Flutter的编辑器
VS Code

1、安装VS Code:VS Code
2、安装Flutter插件(如下图所示),安装完成后relaod一下,然后重启VS Code。

vs_flutter.png

Android Studio

上面已经配置Android开发环境的时候已经写啦,请参考。

参考了以下文章:🙏🙏🙏
⚠️Flutter完成手册
⚠️技术胖--Flutter基础知识

Flutter web环境(1.5版本才可以)

https://segmentfault.com/a/1190000019381936?utm_source=tag-newest

https://www.v2ex.com/t/569744
运行flutter web必须安装webdev才可以,webdev也需要安装。

1、安装webdev package包

flutter pub global activate webdev

此时会有出现一个警告(如下图),也就是更新一下环境变量,按照提示做就可以


警告.png

2、clone官方的例子到本地(此步骤可以直接跳过,如果自己有flutter web项目的话)

git clone https://github.com/flutter/flutter_web.git

进入到example/hello-word中,运行flutter pub upgrade

cd examples/hello_world
flutter pub upgrade

3、运行webdev serve(此步骤也可以略过,跳转到步骤4)

webdev serve

如果此时有如下警告,则是因为没有将dart sdk加入到环境变量中,dart sdk是在安装的flutter/bin/cache/dart-sdk/bin目录下,找到添加环境变量即可

dart: command not found

添加好环境变量再次运行webdev serve,此时会提示需要运行pub get,那就运行一下就pub get,再次运行webdev serve即可。

4、如果不想配置dart sdk的环境变量,可以使用下面的命令代替webdev serve

flutter pub global run webdev serve

5、如果想要自己创建web项目,有两种办法,一种是同创建android或者ios的一样(此处不在赘述),一种是用命令行工具。
命令行创建 web 项目需要安装另一个工具

flutter pub global activate stagehand

安装好之后就可以创建web项目(注意:创建项目的地方一定是一个空文件夹)

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

推荐阅读更多精彩内容