Mac上Flutter开发 环境搭建

这里需要明确两个概念 Flutter SDK 、Dart SDK

这是两个东西 我看网上也没几个人搞明白，估计搞明白了也没舍得说清楚，我反正是碰了钉子。

如果只是简单的学习Dart语言，console打印，那么安装Dart SDK就够了，包含了运行时以及编译器等工具。

如果想开发界面(android,iOS)那么只安装Flutter SDK也就够了，它包含了Dart SDK的功能，并且有自己的一些界面组件库和渲染引擎Skia。

另外 IDE的话也有好几种，

VSCode ：Visual Studio Code 微软的集成开发环境

Android Studio ：Google出的集成开发环境

XCode ：Apple出的集成开发环境

另外也可以用一些文本编辑器来写dart源码，比方vim，notepad++、editplus等等吧，编译打包就有点繁琐了，不如集成开发环境方便。

 

 

1、Dart SDK的安装

参考官方网站的引导来做就行 https://dart.dev/get-dart 可能需要vpn

 

然后 配置Dart的环境变量，也就是说dart命令随时可以在终端使用的话，需要把dart的可执行文件目录配置到环境变量中，

用vi打开环境变量文件 :   ~/.bash_profile

输入

# dart sdk 此行为注释行 

export DART_HOME=[我的dart解压目录的完整路径]/dart-sdk/bin

export PATH="${DART_HOME}:${PATH}"

保存退出

然后执行  ：source $HOME/.bash_profile 

好了Dart SDK算是OK了。

可以 终端执行一下 dart命令

dart --help

有东西出来就正常了。

 

2、Flutter SDK的安装

也是遵循官网的指引就行 https://flutter.dev/docs/get-started/install/macos#update-your-path

然后跟dart一样，需要配置环境变量

// 1. 在终端输入
sudo vim $HOME/.bash_profile

// 2. 添加如下命令，替换[PATH_TO_FLUTTER_GIT_DIRECTORY]为自己解压的flutter所在路径
export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

保存退出

// 3. 执行如下命令，生效bash_profile
source $HOME/.bash_profile

测试FlutterSDK安装成功否

执行 flutter doctor

localhost:bin chenfalei$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.6 19G73, locale zh-Hans-CN)

[✗] 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.dev/docs/get-started/install/macos#android-setup for detailed instructions).

      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.

      You may also want to add it to your PATH environment variable.

 

[!] Xcode - develop for iOS and macOS (Xcode 11.6)

    ! CocoaPods 1.7.4 out of date (1.8.0 is recommended).

        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.

        Without CocoaPods, plugins will not work on iOS or macOS.

        For more info, see https://flutter.dev/platform-plugins

      To upgrade:

        sudo gem install cocoapods

[!] Android Studio (not installed)

[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

 

有反馈，说明FlutterSDK安装配置成功，就是有其他的工具未到位，比方没有安装Androidstudio，cocoapods版本1.7.4太低，需要1.8.0的版本。

这个都好说，因为我们不做android开发，暂时不用安装andoridstudio。只把cocoapods更新一下好了，用home brew升级好了。

在升级cocoapods的时候，brew显示升级成功，但是 pods命令 显示版本还是1.7.4，flutter doctor也是提示版本还是1.7.4.难道升级失败了吗，没提示说失败呀，是成功。算了，重新install吧。这个时候brew提示 新升级的成功了，只是链接没做好，就是快捷方式没做好，现在还是1.7.4的快捷方式，所以，用到pods命令的都是用的1.7.4的老的pods工具，那么就把新的链接过来好了。

bogon:~ chenfalei$ brew link --overwrite cocoapods

Linking /usr/local/Cellar/cocoapods/1.9.3... 2 symlinks created

好了，pods命令显示版本未1.9.3了，并且flutter doctor也没提示这个了。OK了。

 

剩下就是在xcode里开发flutterApp了。下篇再说。

 

另外说一下这个 环境变量文件，其实有好几个

Mac系统的环境变量，加载顺序为：
/etc/profile     是系统级别的，系统启动就会加载

/etc/paths         是系统级别的，系统启动就会加载

~/.bash_profile    当前用户级的环境变量

~/.bash_login 当前用户级的环境变量

~/.profile  当前用户级的环境变量

~/.bashrc  当前用户级的环境变量

自己看着办，想改哪个，哪个改了好使应该能看明白。

 

3、测试flutterdemo

上面都完成之后就可以做开发了。

找一个目录 放源码的地方：比方Destop/myflutterdemo，命令行进入这个目录

执行  flutter create demo01

会自动在当前目录 创建一个 demo01的文件夹，并且创建了很多子目录和相关文件。

但是，注意，执行这个命令的时候，可能出现 卡在 

lRunning "flutter pub get" in demo01...   

这里一直不动，是因为有些必要的东西本机还未准备，需要网络去取回来，但是，网址没有配置到环境变量文件里，所以，它找不到，就一直在不停的找。解决也容易，还是在环境变量文件里增加一些配置

 

vi ~/.bash_profile 输入

# Flutter 依赖

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

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

保存退出 

source ～/.bash_profile

就好了，然后再尝试 flutter create demo01 这个时候就很快成功了。

最后会提示你

In order to run your application, type:

 

  $ cd flutterdemo01

  $ flutter run

 

那就 flutter run 好了，但是提示 

No supported devices connected.

没有链接任何设备，不能运行。

俩办法：连接手机、启动模拟器。

先说 启动模拟器

终端 输入命令 open -a Simulator

会启动模拟器 ，你可以在菜单里 改变模拟器的系统版本和机型。然后再次执行 flutter run 会提示你需要在哪个设备上运行

More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.

 

cfliphone8                 • 23eef36d2af78151f81a18ec0c65310c35a44079 • ios • iOS 13.5.1

iPhone 5s                  • 3A83EC71-99C2-4DCD-867A-959C848FD1B6     • ios • com.apple.CoreSimulator.SimRuntime.iOS-10-3 (simulator)

iPhone 11 Pro Max 

那就指定一个吧：比方，flutter run -d “iPhone 5s”   等一会就在模拟器里启动了

注意这里 -d后面的 设备名 如果有空格 要么用引号包起来，要么空格前“/”一下转义。都行。

好了。至此，算是一切就绪了。

还说一句，这个demo选在真机设备时，会提示你bundleidentifier的问题和code sign的问题，也是对的，因为还没给这个App配置过id呢。可以用xcode打开这个工程去配置一下，然后再继续就好了。

Try replacing 'com.example' with your signing id in Xcode:

  open ios/Runner.xcworkspace

localhost:flutterdemo01 chenfalei$ flutter run -d cfliphone8

Launching lib/main.dart on cfliphone8 in debug mode...

Automatically signing iOS for device deployment using specified development team in Xcode project: 64MK7EMH8V

Running Xcode build...                                                  

                                                   

 └─Compiling, linking and signing...                         6.5s

Xcode build done.                                           12.4s

Installing and launching...                                        26.1s

Syncing files to device cfliphone8...                              189ms

 

Flutter run key commands.

r Hot reload. 🔥🔥🔥

R Hot restart.

h Repeat this help message.

d Detach (terminate "flutter run" but leave application running).

c Clear the screen

q Quit (terminate the application on the device).

An Observatory debugger and profiler on cfliphone8 is available at: http://localhost:1024

此时设备上已经运行了App了。瓦利古德。yea。