Flutter

 ·  ☕ 5  · 👀...

介绍

技术 特性 适用场景 说明
Flutter - 声明式
- 跨平台
- 热重载
- 使用 C、C ++、Dart 和 Skia(2D渲染引擎)技术构建
移动端跨平台开发 - 官网
- Docs
- Github
- awesome-flutter
Flutter plugin - 运行
- 调试
- 热重载
开发环境插件 支持Flutter开发人员工作流程(运行、调试、热重载等)
Dart plugin - 代码验证
- 键入代码
- 完成代码
开发环境插件 提供了代码分析(代码验证、键入代码、完成代码等)

安装

Mac

安装SDK

1
2
3
4
5
6
7
########## 安装SDK ##########
$ mkdir -p ~/development
$ cd ~/development
$ wget https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.7.8+hotfix.4-stable.zip
$ unzip flutter_macos_v1.7.8+hotfix.4-stable.zip
$ export PATH="$PATH:`pwd`/flutter/bin"
$ flutter doctor

配置IOS

安装Xcode

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

设置IOS模拟器

1
$ open -a Simulator

部署到iOS设备

1
2
3
4
5
6
$ brew update
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

如果这些命令中的任何一个失败,请运行brew doctor并按照说明解决问题。

配置Android

安装Android Studio

  1. 下载并安装Android Studio
  2. 启动Android Studio,然后执行“Android Studio安装向导”。这将安装最新的Android SDK,Android SDK平台工具和Android SDK构建工具,这是Flutter开发Android应用时所必备的。

配置adb与android环境变量

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
# 搜索用户目录
$ find /Users -name adb  
# 搜索全盘
find / -name adb

# 查询到adb的路径为:/Users/iamwlb/Library/Android/sdk/platform-tools/adb
$ vi ~/.bash_profile
##### 增加内容开始 #####
export ANDROID_HOME=/Users/iamwlb/Library/Android/sdk/
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PATH=${PATH}:${ANDROID_HOME}/tools
##### 增加内容结束 #####

# 使生效
$ source ~/.bash_profile

配置Flutter环境变量

1
2
3
4
5
6
7
$ vi ~/.bash_profile
##### 增加内容开始 #####
export PATH=/Users/iamwlb/development/flutter/bin:$PATH
##### 增加内容结束 #####

# 使生效
$ source ~/.bash_profile

配置Flutter在zsh中的环境变量

1
2
3
4
5
6
7
$ vim ~/.zshrc
##### 增加内容开始 #####
export PATH=/Users/iamwlb/development/flutter/bin:$PATH
##### 增加内容结束 #####

# 使生效
$ source ~/.zshrc

设置你的安卓设备

  • Android 4.1(API级别16)+
  • 设备上启用开发人员选项和USB调试。
  • 使用USB线将手机与电脑链接。如果你的设备出现提示,请授权你的计算机访问你的设备。
  • 在终端中,运行flutter devices命令以验证Flutter识别你连接的Android设备。
  • 运行flutter run来启动你的应用。

默认情况下,Flutter使用adb工具所基于的Android SDK版本。如果你希望Flutter使用安装的其他的Android SDK,则必须将ANDROID_HOME环境变量设置为该安装目录。

设置Android模拟器

  1. 在你的机器上启用VM加速
  2. 启动Android Studio>Tools>Android>AVD Manager,然后选择Create Virtual Device。
  3. 选择一个设备定义并选择Next。
  4. 为要模拟的Android版本选择一个或多个系统映像,然后选择Next。 建议使用x86或x86_64映像。
  5. 在仿真性能下,选择Hardware - GLES 2.0以启用硬件加速
  6. 验证AVD配置是否正确,然后选择Finish。
    有关上述步骤的详细信息,请参阅管理AVD。
  7. 在Android虚拟设备管理器中,单击工具栏中的Run。模拟器启动并显示所选操作系统版本和设备的默认画布。
  8. 运行flutter run来启动你的应用。连接的设备名称是Android SDK built for ,其中platform是芯片系列,如x86。

允许协议

1
$ flutter doctor --android-licenses

创建并运行一个简单的Flutter应用程序

1
2
3
$ flutter create my_app
$ cd my_app
$ flutter run

配置开发环境

配置Visual Studio Code

安装Visual Studio Code

下载 https://code.visualstudio.com

安装Dart代码插件

  1. 启动VS Code
  2. 调用View>Command Palette…
  3. 输入“install”,然后选择**“Extensions:Install Extension”**操作
  4. 安装Flutter、Dart插件

配置Android Studio

安装

http://www.androiddevtools.cn/

配置插件

  1. 【Configure】 -> 【Plugins】
  2. 搜索Flutter、Dart
  3. 【Preferences】-> 【Languages & Frameworks】
  4. 配置Flutter、Dark的sdk path

配置Proxy

【Androdi Studio】 –【Preferences】– 【System Settings】 – 【HTTP Proxy】,【点选】 Auto-detect proxy settings,【勾选】Automatic proxy configuration URL:mirrors.neusoft.edu.cm:80

配置IDEA

  1. 【Configure】 -> 【Plugins】
  2. 搜索Flutter、Dart
  3. 【Preferences】-> 【Languages & Frameworks】
  4. 配置Flutter、Dark的sdk path

命令

1
2
3
4
5
6
7
8
# 创建工程
flutter create <output directory>

# 查看可以连接的设备
$ flutter devices

# 运行工程
$ flutter run [options]

常用键

说明
q 退出
p 显示/隐藏 网格
o android/ios显示切换
r 热重载

常见问题

Error initializing ADB:Android Debug Bridge not found

遇到这种问题,检查如下:

  1. 检查adb是否可用
1
$ adb devices
  1. 检查flutter是否可用
1
$ flutter doctor
  1. 检查项目的sdk版本
    【File】->【Project Structure】->【Project Setting】->【Project】->【Project SDK】,如果是,则改成Android API 29 Platform,重启IDE开发工具。

Error: No pubspec.yaml file found

问题描述

1
2
3
4
~/Documents/Workspace/flutter/demo1 $ flutter run
Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
Do not run this command from the root of your git clone of Flutter.

解决办法

1
2
3
4
~/Documents/Workspace/flutter/demo1 $ ls
flutter_app
~/Documents/Workspace/flutter/demo1 $ cd flutter_app
~/Documents/Workspace/flutter/demo1/flutter_app $ flutter run

Wanglibing
Wanglibing
Engineer,Lifelong learner