Flutter开发环境搭建---Mac

作者: 菠菜女皇 | 来源:发表于2019-07-03 17:37 被阅读6次
配置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://img.haomeiwen.com/i2660287/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开发环境搭建---Mac

    本文链接:https://www.haomeiwen.com/subject/rirchctx.html