Flutter: Create and run a simple Flutter app

[hhstore]

related:

• Flutter: Index #202 : flutter
• Cross-Platform App Frameworks: diff #192 : diff

[hhstore]

flutter 开发环境搭建:

• 参考flutter 官方教程配置, 没有坑.
  • 中文社区: https://flutter.cn/
  • https://flutterchina.club/get-started/editor/#vscode
• 主要流程:
  • 安装 flutter SDK.
  • 设置 flutter 环境变量.
  • 安装/配置 xcode + iOS 模拟器.
  • 安装/配置 Android studio + Android NDK.
  • 运行示例 demo app 到 iOS 模拟器.
• vscode 配置 + 运行 Debug 调试模式.

vscode 配置:

• Flutter: Create and run a simple Flutter app #204 (comment)

Android Studio 配置:

• Flutter: Create and run a simple Flutter app #204 (comment)
• IDE 导入 snippets 插件, 快捷输入 flutter 代码.

flutter 高效输入插件:

• https://github.com/AweiLoveAndroid/Flutter-learning/tree/master/code_plugins
• 支持 Android Studio, Intellij IDEA and VSCode

ref:

• M1 搭建环境: https://zhuanlan.zhihu.com/p/366471261

[hhstore]

1. 下载+安装 flutter SDK:

• 镜像源: https://flutter.dev/community/china
• 安装教程: https://flutter.dev/docs/get-started/install
  • 下载稳定版: https://flutter.dev/docs/get-started/install/macos
• CN: https://flutter.cn/docs/get-started/install/macos

1.0 手动安装 flutter:

• 可以直接跳到 1.1, 使用 FVM 安装管理 flutter 版本.

# 下载:
wget -P ~/Downloads https://storage.flutter-io.cn/flutter_infra/releases/stable/macos/flutter_macos_1.20.0-stable.zip

# 创建 sdk 根目录:
mkdir ~/sdk

# 解压到 sdk 目录: 
cd ~/sdk
unzip ~/Downloads/flutter_macos_1.20.0-stable.zip




# 设置flutter sdk 环境变量: 
# export PATH="$PATH":"$HOME/sdk/flutter/bin/cache/dart-sdk/bin"


# for dart: 
export PATH="$PATH:/usr/lib/dart/bin"

# for dart pub:
export PATH="$PATH":"$HOME/.pub-cache/bin"

# fvm:
export FVM_HOME="$HOME/.fvm"

# use fvm: fluter + dart + pub
export PATH="$PATH":"$HOME/.fvm/default/bin":"$HOME/.fvm/default/bin/cache/dart-sdk/bin"


# 
# android 环境变量: Android Studio安装的sdk，则其路径可能不同，请自行确定。
# 
export ANDROID_HOME=~/sdk/android
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator




# 查看安装版本号:
-> % flutter --version
Flutter 1.20.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 840c9205b3 (10 days ago) • 2020-08-04 20:55:12 -0700
Engine • revision c8e3b94853
Tools • Dart 2.9.0


# 验证: 
flutter doctor

1.1 安装 fvm:

• https://fvm.app/docs/getting_started/installation
• https://fvm.app/docs/guides/basic_commands
• https://github.com/leoafarias/fvm
• ⭐⭐⭐⭐⭐
• flutter 版本管理工具.

brew tap leoafarias/fvm
brew install fvm

• 不建议使用 pub 安装:

dart pub global activate fvm

• .gitignore 添加忽略:

.fvm/flutter_sdk

• 查看 fvm 配置:

fvm config

1.1 设置 flutter 环境变量:

• 完整环境变量设置: https://gist.github.com/hhstore/43f496988512b713be29a083f4ad8a1e

• sdk 目录:

• 环境检测: 当前属于正常.

2. 模拟器安装+启动:

2.1 配置 iOS 模拟器:

• https://flutter.cn/docs/get-started/install/macos#ios-setup

• 安装 xcode 11(旧版本)

• 需要苹果开发者账号, 登录, 下载: https://developer.apple.com/download/more/

• https://download.developer.apple.com/Developer_Tools/Xcode_11.7/Xcode_11.7.xip

2.2 配置 Android 模拟器:

• https://flutter.cn/docs/get-started/install/macos#install-android-studio

• 创建一个模拟器:

• 选择手机型号:

• 下载 Android 版本:

• 选择:

• 同意, next:

• 下载 1GB 大小的包.

3. 编辑器设置: vscode

• https://flutter.cn/docs/get-started/editor?tab=vscode

4. 运行示例 app:

• https://flutter.dev/docs/get-started/install/macos#create-and-run-a-simple-flutter-app
• 命令行执行:

# mac 下, 先启动一个 iOS 模拟器:
open -a Simulator

# 创建示例项目: 
flutter create my_app

cd my_app

# 启动: 
flutter run

• 如图: 启动的模拟器效果

• 至此, 说明 flutter 的开发环境是正常的.
• 因为在 mac 下做开发, 有 XCode + iOS模拟器, 就足够.
• 暂时不需要搭建 Android 的环境, 就不安装 Android Studio 和 Android 的 NDK 了.

[hhstore]

关于 Xcode + iOS 模拟器:

• 如果 xcode 未安装, 需要安装, 安装步骤. 可以参考flutter 官方文档. 没啥特别的.
• https://flutter.cn/docs/get-started/install/macos#ios-setup

[hhstore]

使用 vscode 调试 flutter:

• 官方文档介绍:
  • https://flutter.cn/docs/development/tools/vs-code
  • 开发者工具: https://flutter.cn/docs/development/tools/devtools/vscode
• 基于 flutter create 创建的 demo app 为例子:
• 使用 vscode 打开项目.
• 编辑文件: lib/main.dart
• 使用 vscode 调试模式的好处:
  • 自动 hot reload, 代码修改, 自动热加载显示到模拟器. 很棒.
  • 支持 打断点 debug.

• 按 F5, 选择 flutter, 启动 debug 模式. 如下图, 模拟器效果.

• 可以浏览器打开 devTool, 这个功能很强大.

• 浏览器查看: 方便做进一步的性能分析.

关于 flutter 的开发者工具套件:

• https://flutter.cn/docs/development/tools/devtools/memory
• 断点调试: https://flutter.cn/docs/development/tools/devtools/debugger

[hhstore]

xxxxxx:

xxxxxxxxxxxxxx	xxxxxxxxxxxxxx	xxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx

[hhstore]

flutter 测试+调试:

• https://flutter.cn/docs/testing/debugging

flutter 性能优化:

• https://flutter.cn/docs/perf

打包发布:

• https://flutter.cn/docs/deployment/ios

平台间差异:

• https://flutter.cn/docs/resources/platform-adaptations

[hhstore]

Android Studio 配置:

下载:

• https://developer.android.com/studio

安装:

• IDE 安装步骤, 需要从 google 下载 Android 模拟器. (需要科学上网).

• Android SDK 安装成功, 点击finish.

• 手动取消, 后续再单独安装.

配置:

• https://flutter.cn/docs/get-started/editor?tab=androidstudio

安装 flutter 相关插件:

• flutter:

• dart :
  

IDE 配置:

• 配置 flutter SDK 路径:

• 配置好 flutter 的 SDK Path, 然后 dart 的 SDK Path 会自动检测到.

配置项优化:

• https://juejin.im/post/6844903651111092231

IDE 智能提示, 禁用输入大小写 匹配.

高效的 flutter snippets 输入:

• https://github.com/AweiLoveAndroid/Flutter-learning/tree/master/code_plugins

• IDE/vscode 导入该插件.

• 插件下载: https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/code_plugins/have_new_keywords/settings.jar

• 导入方法: https://github.com/AweiLoveAndroid/Flutter-learning/tree/master/code_plugins#3how-to-import-aproject

• 快捷输入关键词列表:

• 具体演示效果, 参看该文档 gif 演示.

[hhstore]

1

[hhstore]

android 模拟器环境问题修复:

• flutter doctor -v

• 修复: flutter doctor --android-licenses