Appearance
Flutter
Flutter项目的开发语言是Dart,Dart 是由 Google 开发的一种面向对象语言,可以编译成 ARM 和 x86 代码直接运行在 iOS、Android 设备上。 推荐先学习Dart语言官方教程,对Dart有初步了解之后再进行Flutter的学习和开发。
参考[学习文档+工具]
- Windows install
- macOS install
- Using Flutter in China
- dart文档
- Material 图标icon预览 -
使用-需在 pubspec.yaml中开启 uses-material-design:true
- 苹果 Icon
- Flutter Gallery - UI组件-直观交互 - 直观组件布局-第三方的
- Color颜色
- MaterialColor色彩表
- 查IP
- UI设计&资源 - UI采用figma设计出设计稿
- UI设计&资源 - 图标、banner用的canva
- UI设计&资源 - 字体用的google fonts
- UI设计&资源 - 图片用的unsplash
- UI设计&资源 - 灵感 - 设计参考pinterest - 例如搜索: app login
- UI设计&资源 - 设计稿模版 - 购买UI模版
- fvm 版本管理
- 移动端抓包工具-Fiddler(在调试模式下需要抓包调试所有我们使用代理并禁用HTTPS证书校验)-web端可使用谷歌浏览器的控制台的network调试接口 - 下载安装使用
- bloc架构即代码规范
Flutter 开发环境搭建
Android Studio
首次安装需要去下载 sdk,一路默认就行,请打开加速,这个 dl.google.com 不太稳
SDK 配置
点击 “SDK Manager”:
- SDK Platforms:SDK 列表, 可以先勾选个 Android 12 的,以后根据需要再加
- Android API 32(Sv2)
- Android 12.0(S)
- SDK Tools:安装 Android SDK Command-line Tools、Android SDK Platform-Tools、Intel x86 Emulator Accelerator 加速器
XCode
Apple Store 中升级到最新的 xcode
cocoapods
Flutter SDK
下载 Flutter SDK
。
下载
比如你将下载下来的flutter包解压到 ~/Documents/sdk/flutter
环境变量
- macos
sh
# 1. 打开 .bash_profile 配置文件
$vi ~/.bash_profile
# 2. 写入配置
# flutter sdk
export PATH=${PATH}:~/Documents/sdk/flutter/bin
# dart sdk
export PATH=${PATH}:~/Documents/sdk/flutter/bin/cache/dart-sdk/bin
export PATH=${PATH}:~/.pub-cache/bin
# flutter-io 国内镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# android
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PATH=${PATH}:${ANDROID_HOME}/tools
# 3. 生效
$source ~/.bash_profile
# 4. 检查
$flutter doctor
$ flutter doctor
# Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
# Running "flutter pub get" in flutter_tools... 3.9s
# Doctor summary (to see all details, run flutter doctor -v):
# [✓] Flutter (Channel stable, 2.10.5, on macOS 12.3.1 21E258 darwin-x64, locale zh-Hans-CN)
# [!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
# ✗ Android license status unknown.
# Run `flutter doctor --android-licenses` to accept the SDK licenses.
# See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
# [✓] Xcode - develop for iOS and macOS (Xcode 13.4)
# [✓] Chrome - develop for the web
# [✓] Android Studio (version 2021.2)
# [✓] VS Code (version 1.67.2)
# [!] Proxy Configuration
# ! NO_PROXY does not contain ::1
# [✓] Connected device ()
# [✓] HTTP Host Availability
# ! Doctor found issues in 2 categories.
# 5. 同意 Android Licenses
$flutter doctor --android-licenses
- windows 下设置
- dd