hailiting Blog

# Flutter 开发环境搭建

# 系统要求

  • 700MB+内存
  • 需要有bash、curl、git、mkdir、rm、unzip、which命令行工具

# 设置 Flutter 镜像（非必须）

在国内访问 Flutter 可能会受限制， Flutter 官方为中国搭建临时镜像， 大家可以将如下环境变量加入到用户环境变量里

# 打开.bash_profile配置镜像地址
vim ~/.bash_profile
# i 进去 INSERT 模式
# 最新的镜像地址 https://flutter.dev/community/china
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH="/Users/xxx/flutter/bin:$PATH" # 要存放的地址
# esc :wq! 保存文件  :qa! 不保存文件
# 保存并生效
source ~/.bash_profile

# 下载安装配置 flutterSDK

# 下载

# 方法一：

# 1. 官网下载

https://flutter.dev/docs/development/tools/sdk/releases

# 2. 安装

将地址放在 path 的路径里

# 方法二：git clone

# 1. 下载

git clone -b beta https://github.com/flutter/flutter.git

# 2. 安装
cd /Users/hailiting/Documents
# 注意下载的版本
unzip ~/Downloads/flutter_windows_v1.2.1-stable.zip
sudo chmod -R 777 flutter # 赋值flutter最高权限
# 打开.bash_profile
cd ~
vim ./.bash_profile
export PATH=/Users/hailiting/Documents/flutter/bin:$PATH
:wq!
source ~/.bash_profile
flutter doctor（查看安装配置情况-哪些没安装，哪些安装了）

# ios 开发环境设置

# 安装 Xcode

1， appstore 下载 2， 配置 Xcode 命令行工具以使用最新安装的 Xcode 版本

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

3，确保 Xcode 许可协议是通过的： 第一次打开或通过命令 sudo xcodebuild -license 同意过了

# 设置 ios 模拟器

1，在终端输入如下命令打开一个 ios 模拟器

open -a Simulator

2，通过模拟器菜单的硬件>设备，确保打开的是 64 位 iPhone5s 或更新的模拟器 3，可以通过 Window>Scale 菜单下设置设备比例

# 创建并运行一个简单的 Flutter 项目

1，flutter create my_app 创建一个 Flutter 项目 2，cd my_app, flutter run 运行它

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild
state), press "R".
An Observatory debugger and profiler on iPhone Xʀ is available at:
http://127.0.0.1:58789/
For a more detailed help message, press "h". To detach, press "d"; to quit,
press "q".
  • R 键：点击后热加载，也就是重新加载
  • p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用
  • o 键：切换 android 和 iOS 的预览模式
  • q 键：退出调试预览模式
├── README.md
├── android # 安卓平台代码
├── build  # 打包代码
├── ios  # ios平台代码
├── lib  # 程序代码
│   └── main.dart
├── my_app.iml
├── pubspec.lock # 依赖包配置文件
├── pubspec.yaml
└── test  # 测试代码
    └── widget_test.dart

可参见【解读 flutter 新建项目生成的示例代码】

# 如何将 Flutter 安装到 ios 真机上

  • 1，安装 homebrew
  • 2，确保 homebrew 已更新brew update
  • 3，安装依赖
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install indeviceinstaller ios-deploy cocoapods
pod setup

tips: 如果安装失败，可用brew doctor按照说明解决问题

  • 4，open ios/Runner.xcworkspace打开默认发 Xcode workspace
  • 5，在 Xcode 中，选择导航模板左侧中的 Runner 项目
  • 6，在 Runner target 设置页面中，确保在 常规>签名>团队 下选择开发团队。（当选择了开发团队时，Xcode 会创建并下载开发证书，向本设备注册对应的账户，并创建和下载配置文件） tips: 如果 Signing 报红，可以修改 Bundle Identifier (因为用的人太多了)
  • 7，通过flutter run运行启动项目 tips: General -> Device Management, then select your Developer App certificate to trust it. （需要打开手机设置 -> 通用 -> 设备管理，找到编辑工程的 ID 资料，点击允许）

# Android 开发环境设置

# 下载 android studio

  • https://developer.android.com/studio(需科学上网)
  • https://developer.android.google.cn/studio(谷歌为中国开发者开放的镜像) 安装教程> https://developer.android.google.cn/studio/intro

# 如何在 Android 模拟器上运行 Flutter

1，在你的机器上启用 VM acceleration; 2，启动 Android Studio > Tools > Android > AVD Mangager 并选择 Create Virtual Device; 3，选择一个设备并选择 Next; 4，为要模拟的 Android 版本选择一个或多个系统映像，然后选择 Next,建议使用 x86 或 x86_64 的镜像 5，在 Emulated Performance 下，选择 Hardware - GLES 2.0 以启用硬件加速； 6，验证 AVD 配置是否正确，然后选择 Finish;

<!-- emulator  环境变量 -->
#  /Users下   .bash_profile 文件加 android sdk  和  emulator
export ANDROID_HOME=/Users/用户名/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator

# 在项目下
emulator -avd a81(模拟器名字)

# 如何在 Android 真机运行

1，在设备上启用开发人员选项和USB调试 2，使用 USB 将手机插入电脑，如果有授权提示需要同意授权 3，在终端中，运行flutter devices命令以验证 Flutter 是否识别你连接的 Android 设备 4，通过 flutter run 运行启动项目

# 安装 Flutter 和 Dart 插件

1，打开 Android Studio 2，打开 Preferences>Plugins 3，选择 Browse repositories，搜索 Flutter plugin，然后点击安装 4，然后安装 Dart，完成后重启 Android studio

← 混合开发 Android →