Flutter开发环境搭建(Mac)

Flutter 介绍

读音：[ˈflʌtər]

什么是Flutter？

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

有啥用？

目前主要用来开发跨平台App，一套代码开发iOS和Android。

为啥要用Flutter？

跨平台，一套代码开发iOS和Android，可以轻松实现跨平台开发，提升竞争力。
UI风格一致性。
在应用程序运行时更改代码并重新加载（HotReload），这个点真的是 App 开发质的提升。
性能接近原生App。

Flutter 框架结构

开发工具

Visual Studio Code
Android Studio
IntelliJ IDEA

以上都支持 Flutter 开发。

Dart 介绍

什么是Dart？

读音：[dɑːt]

维基百科：

Dart（[KK] 英语发音：/dɑrt/, [DJ] 英语发音：/dɑ:t/）是一种适用于万维网的开放源代码编程语言，由Google主导开发，于2011年10月公开。它的开发团队由Google Chrome浏览器V8引擎团队的领导者拉尔斯·巴克主持，目标在于成为下一代结构化Web开发语言。类似JavaScript，Dart也是一种面向对象语言，但是它采用基于类的编程。它只允许单一继承，语法风格接近C语言。 Dart is a client-optimized language for fast apps on any platform. Dart是针对任何平台上的快速应用程序的客户端优化语言。是一门编程语言。

网站：

官方网站：dart.dev/

中文网： dartpad.cn/

在线Dart环境：dart.dev/#try-dart

环境搭建

安装 Flutter

下载对应平台的SDK：flutter.dev/docs/get-st…
- 进入到压缩包路径：cd ~/development
- 解压：unzip ~/development/flutter_macos_1.17.3-stable.zip
- 将 flutter 工具添加到您的路径：
```
# 注意：这种方式添加路径，只能在~/development下才能找到flutter命令
export PATH="$PATH:`pwd`/flutter/bin"
```
可以把flutter命令添加到全局，根据使用的命令行不同，会有所不同。

如果使用zsh：
```
sudo vi ~/.zshrc

#在.zshrc配置文件最后面添加flutterSDK的路径
#flutter path
export PATH="$PATH:/Users/用户名/development/flutter/bin"

source ~/.zshrc
```

检查flutter环境

flutter doctor

根据提示，安装缺少的东西：

# Mac需要安装这个
sudo gem install cocoapods

# 安装 Android Studio


[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit visit
      https://flutter.dev/docs/get-started/install/macos#android-setup for
      detailed instructions.
解决办法：flutter doctor --android-licenses
Java版本有切换到Java8

echo $JAVA_HOME
/Library/Java/JavaVirtualMachines/jdk1.8.0_221.jdk/Contents/Home

✗ Flutter plugin not installed; this adds Flutter specific functionality.
解决办法：
Android Studio>>File>Settings>Plugins>Browse Repositories
搜索Flutter，并安装该插件。

# 选择Auto-detect proxy setting
# 或者用手机热点来下载插件
[!] IntelliJ IDEA Ultimate Edition (version 2019.3.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

[!] Connected device
    ! No devices available
解决办法：安装手机---开发者选项----开启 USB 调试


flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.3, on Mac OS X 10.15.4 19E287, locale
    zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Android Studio (version 4.0)
[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.3)
[✓] Connected device (1 available)

• No issues found!

安装Dart环境

dart.dev/get-dart

Mac环境：

brew tap dart-lang/dart
brew install dart

brew info dart

安装成功：
🍺  /usr/local/Cellar/dart/2.8.4: 502 files, 486MB, built in 56 seconds

使用Android Studio创建项目

、

使用VsCode创建项目

VS code的Flutter配置也很简单：

打开VS code -> 扩展管理，在搜索框中搜索 Flutter，点击安装即可，Dart环境也是自动会安装好了。

然后输入 project Name。

运行：调试 => 启动调试

使用IntelliJ IDEA创建项目

运行效果：

Android:

iOS: