Flutter入门之Mac最详环境搭建

看到愈来愈多的同窗准备入坑Flutter开发,而Flutter的环境搭建仍是挺繁琐的,官网和网上的一些文章写的都不全。结合本身实际环境搭建中遇到的一些问题,同时整合了一些看到的文章,但愿此文能够帮助准备学习Flutter的同窗少踩坑,不要让环境搭建就把你们挡在了Flutter的门外。html

系统环境要求

  • 操做系统: macOS (64-bit) 10.14以上(由于最新的Flutter SDK要求Xcode10.1以上,而Xcode10须要10.14以上的系统)android

  • 磁盘空间: 3GB (Flutter SDK 3GB左右,不包括Xcode或Android Studio的磁盘空间,ps:Xcode大概10G,一版建议Mac选择Xcode)ios

  • 软件: 建议先安装Xcode、 VsCodegit

  • 工具: brew 是 Mac下的一个包管理工具,它在环境搭建中有着超级大的做用,因此没有的同窗先去安装github

Sept 1.下载Flutter SDK包

官网下载Flutter SDK包,进入页面后向下滑,看到以下图所示的界面,点击按钮,下载Flutter SDK。macos

Step 2.配置环境变量

压缩包下载好之后,找个位置进行解压。这个位置很重要,由于下面配置环境变量的时候要用到。好比你解压到了根目录下的Flutter文件夹.vim

打开终端工具,打开环境变量配置文件,这里使用vim,命令以下:xcode

vim ~/.bash_profile
复制代码

在打开的文件里增长一行代码,意思是配置flutter命令在任何地方均可以使用bash

export PATH=/你放Flutter SDK的绝对路径/bin:$PATH
复制代码

配置完成后,须要用source命令从新加载一下环境变量文件 ,具体命令以下:app

source ~/.bash_profile
复制代码

完成这步之后,就算咱们flutter SDK的安装工做完成了。能够使用下面命令来检测一下,是否安装成功了。

flutter –h
复制代码

出现下面的结果,说明到目前为止,咱们安装一切顺利

Step 3.检测Flutter运行环境,安装相关依赖

接下来用flutter自带命令检测一下flutter的运行环境

flutter doctor
复制代码

按照检测结果的说明,若是有[!] ✗ 标志,表示本行检测不经过,须要作一些设置或者安装一些软件。我这里Mac的运行环境已经配置完成,不许备配置Android的开发环境,因此Android的警报忽略。

初次运行flutter doctor的时候可能会报一些环境错误

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[!] iOS toolchain - develop for iOS devices (Xcode 9.4.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
    ✗ 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 CocoaPod plugins will not work on iOS.For more info, see https://flutter.io/platform-plugins
    To install:
        brew install cocoapods
        pod setup
[!] Android Studio (not installed)
[!] IntelliJ IDEA Ultimate Edition (version 2018.3.5)
    ✗ 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.
复制代码

看到这个,不要慌,先保证brew安装好,而后按照提示,安装相关依赖软件就行。

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
复制代码

安装pod setup速度奇慢,国内大佬们摸索出一种取巧的方法,具体步骤以下:

  1. github.com/CocoaPods/S… 网址把文件clone下来,默认文件夹名字为Specs-master

  2. 前往文件夹 ~/.cocoapods/repos(用 commad+shift+. 快捷键能够现实隐藏文件)

  3. 终端cd到你的工程目录中执行 pod setup,等待一会,等到开始下载的时候,会发如今~/.cocoapods/repos 下面多一个master文件,这时,须要复制master下面的.git 文件夹到Specs-master下面,同时中止pod setup

  4. Specs-master文件夹名字修改成master,并替换~/.cocoapods/repos 下的master文件夹

还有一种更简单的方法,若是有同事已经配好了flutter环境,直接将他的~/.cocoapods/repos/master文件夹拷贝一份,替换本身本地的就行。

常见问题总汇:

Cocoapods is installed but not initializedCocoapods已经安装但没有初始化,执行下面语句完成初始化(可能较慢,耐心等待):
pod setup

✗ 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
提示xcode安装不完整须要完整安装,运行如下命令而后输入root密码即可:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

执行brew install --HEAD libimobiledevice命令会抛出以下异常:
configure: error: Package requirements (libusbmuxd >= 1.1.0) were not met:    Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10   Consider adjusting the PKG_CONFIG_PATH environment variable if you  installed software in a non-standard prefix.   Alternatively, you may set the environment variables libusbmuxd_CFLAGS  and libusbmuxd_LIBS to avoid the need to call pkg-config.  See the pkg-config man page for more details.   READ THIS: https://docs.brew.sh/Troubleshooting 
这时候须要运行brew unlink usbmuxd & brew install --HEAD usbmuxd而不是libusbmuxd。
复制代码

Step 4.更新环境变量

因为在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,你们能够将以下环境变量加入到用户环境变量中,添加方法第二步同样。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码

至此,Flutter运行环境搭建搭建完成,咱们能够在Mac上写Flutter应用,安卓的环境若是有须要,我会再写一篇安卓环境搭建。

Step 5.运行第一个Flutter应用

创建一个Flutter项目的文件夹,在文件夹下运行

flutter create xxx
复制代码

这里须要注意的是,建立的应用名不能采用驼峰命名法,同时有可能会出现flutter命令识别的状况,再运行一下 source ~/.bash_profile 命令就能够使用flutter命令了建立一个flutter应用,建立完成后目录结构如图所示:

打开模拟器,Mac下能够使用 open -a Simulator打开模拟器,而后进入flutter目录里运行flutter run命令,如图所示:

等待几分钟,就能够在模拟器上看的你本身第一个flutter应用的界面,官方提供的一个计数器示例。主代码在lib/main.dart文件里,修改代码,按R就能够更新到界面上,调试是否是很方便。

如今你已经能够本身写本身的flutter应用了,在Flutter的世界中遨游吧!

相关文章
相关标签/搜索