Skip to main content

F001-Flutter必备基础和环境安装

·1050 words·5 mins
Flutter Flutter入门到精通课程
Table of Contents

一、介绍说明
#

Flutter工程师必备技能
#

o 熟练掌握macOS、Windows、Linux操作系统
o 熟练掌握VsCode、Xcode、Android Studio等开发工具
o 熟练掌握Flutter, Dart, 熟练掌握各种Widget组件,且能独立开发Flutter应用
o 熟练掌握iOS Swift, Android Kotlin平台和开发语言
o 熟练掌握Flutter的布局、动画、路由、状态管理、网络请求、国际化、图片加载、本地存储、权限申请、第三方组件等

文档资料
#

Flutter框架结构
#

Flutter框架结构

二、环境搭建(常规方式)
#

1. 配置镜像
#

在中国网络环境下安装配置Flutter

2. 安装Flutter
#

官方安装配置教程

最新稳定版Flutter SDK下载地址

https://flutter.cn/docs/release/archive?tab=macos

我的macOS下安装目录:

/Users/xiaopin/dev/flutter

将下载的flutter_macos_arm64_3.19.6-stable.zip解压到dev安装目录下,如果解压名字是flutter_macos_arm64_3.19.6-stable,就改成flutter

3. 环境变量配置
#

找到并打开文件/Users/xiaopin/.zshrc, 添加以下行:

export PATH=/Users/xiaopin/dev/flutter/bin:$PATH
export PATH="$PATH":"$HOME/.pub-cache/bin"
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

4.相关工具安装
#

Xcode:苹果开发相关环境

Android Studio:Android开发相关环境

DevEco Studio:鸿蒙开发相关环境:

Chrome:Web开发环境

5.查看Flutter安装情况
#

命令行输入

flutter doctor

xiaopin@PPM2-MacBook-Air ~ % flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.19.6, on macOS 14.3.1 23D60 darwin-arm64, locale zh-Hans-CN) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.1) [✓] VS Code (version 1.89.0) [✓] Connected device (3 available) [✓] Network resources

• No issues found!

根据提示,将打叉的对应工具都安装完毕!

6.开发工具
#

  • Corsor(强烈推荐)
  • Visual Studio Code 最新版本(官方推荐)
  • Android Studio 最新版本

三、环境搭建(FVM方式)
#

1.介绍说明
#

FVM (Flutter Version Management) 是一个开源工具,旨在简化和管理 Flutter 的不同版本,允许开发者在一个项目中使用特定版本的 Flutter,而无需更改全局安装的 Flutter 版本。

官方网站:https://fvm.app/documentation/getting-started

多版本管理

• 支持在不同项目中使用不同的 Flutter 版本。

• 允许轻松切换 Flutter 版本,而无需手动安装或卸载。

项目级版本控制

• 每个项目可以指定一个特定的 Flutter 版本,其他项目不会受到影响。

• 避免因 Flutter 版本更新而导致的兼容性问题。

共享版本

• 同一设备上多个项目可以共享相同的 Flutter 版本,减少磁盘空间浪费。

易于 CI/CD 集成

• 提供简单的工具和命令行支持,适合在 CI/CD 管道中指定 Flutter 版本。

FVM 是管理 Flutter 多版本的强大工具,适用于团队协作和复杂项目场景,能显著提升开发效率,避免版本兼容性问题。如果你的项目需要频繁切换 Flutter 版本,或者团队中有多个项目运行在不同的版本上,FVM 是一个值得采用的工具。

2.安装和使用
#

2.1Homebrew安装FVM
#

#安装命令
brew tap leoafarias/fvm
brew install fvm

#卸载命令
brew uninstall fvm
brew untap leoafarias/fvm

查看版本

fvm --version

2.2.配置环境变量
#

# 设置 FVM 缓存路径  
export FVM_CACHE_PATH="$HOME/fvm_cache"  
# 启用 Git 缓存  
export FVM_USE_GIT_CACHE=true  
# 设置 Git 缓存路径  
export FVM_GIT_CACHE_PATH="$HOME/fvm_git_cache"  
# 自定义 Flutter 仓库地址  
export FVM_FLUTTER_URL="https://github.com/flutter/flutter.git"  
# 启用特权访问  
export FVM_PRIVILEGED_ACCESS=true  

FVM_GIT_CACHE_PATH

•用于存储 Flutter Git 仓库的本地引用。

•主要作用是加速 Flutter SDK 的版本切换和下载过程。

•默认路径:~/.fvm/git_cache/。

FVM_CACHE_PATH

•用于存储已下载的 Flutter SDK 文件(即解压后的完整 Flutter SDK)。

•这是实际使用 Flutter SDK 的路径。

•默认路径:~/.fvm/versions/。

将这两个存放到自己指定的目录中,比如我的开发环境一般都存放在/User/xiaopin/dev/ 中, 只要配置这两个就好了。

# FVM存储路径配置
export FVM_GIT_CACHE_PATH="/Users/xiaopin/flutter/fvm/gitcache/"
export FVM_CACHE_PATH="/Users/xiaopin/flutter/fvm/"

export PATH=/Users/xiaopin/flutter/fvm/default/bin:$PATH
export PATH="$PATH":"$HOME/.pub-cache/bin"

2.3.安装指定版本flutter
#

fvm install 3.24.0

2.4.在项目中指定Flutter版本
#

在项目根目录下,使用以下命令将特定的 Flutter 版本关联到该项目:

fvm use 3.24.0

这会生成一个 .fvm 文件夹和一个 fvm_config.json 文件,用于保存项目的 Flutter 版本配置。

2.5.运行Flutter命令
#

fvm flutter run
fvm flutter doctor

2.6.升级Flutter版本
#

fvm install <new_version>
fvm use <new_version>

2.7.卸载旧Flutter版本
#

fvm remove 3.24.0

2.8. 查看已安装版本
#

fvm list
3.10.0 (global)
3.13.0 (active)
2.5.3

global:全局版本,默认在所有项目中使用。

active:当前项目的版本。

2.9. 查看可安装版本
#

fvm releases
stable
3.13.1
3.13.0
...
beta
3.14.0-1.0.pre
3.13.0-0.3.pre
...

2.10. 清理FVM所有缓存和SDK
#

FVM中的destroy命令是一个强大的工具,用于完全删除FVM缓存,包括所有缓存的Flutter SDK版本。此命令对于清理空间或重置FVM设置很有用。

fvm destroy

3. 设置默认全局Flutter版本
#

fvm global 3.24.5

4. 项目单独指定Flutter版本
#

fvm use 3.24.0

5. FVM 配置文件
#

在项目中,FVM 会生成两个关键文件:

  • .fvm/fvm_config.json
{
  "flutterSdkVersion": "3.13.0"
}
  • .gitignore

通常会忽略 .fvm/ 文件夹以避免版本冲突。

6. FVM 的适用场景
#

1.团队协作

​ 确保团队成员使用相同的 Flutter 版本,避免因版本差异引发问题。

  1. 维护旧项目

​ 在新项目中使用最新版本的 Flutter,同时为旧项目保留其兼容的版本。

  1. 测试与调试

​ 快速切换 Flutter 版本以测试兼容性或复现问题。

四、常用命令
#

Flutter官方命令行文档:https://flutter.cn/docs/reference/flutter-cli

flutter help -v
#

Flutter SDK
  bash-completion   Output command line shell completion setup scripts.
  channel           List or switch Flutter channels.
  config            Configure Flutter settings.
  doctor            Show information about the installed tooling.
  downgrade         Downgrade Flutter to the last active version for the current channel.
  precache          Populate the Flutter tool's cache of binary artifacts.
  upgrade           Upgrade your copy of Flutter.

Project
  analyze           Analyze the project's Dart code.
  assemble          Assemble and build Flutter resources.
  build             Build an executable app or install bundle.
  clean             Delete the build/ and .dart_tool/ directories.
  create            Create a new Flutter project.
  drive             Run integration tests for the project on an attached device or emulator.
  gen-l10n          Generate localizations for the current project.
  pub               Commands for managing Flutter packages.
  run               Run your Flutter app on an attached device.
  test              Run Flutter unit tests for the current project.

Tools & Devices
  attach            Attach to a running app.
  custom-devices    List, reset, add and delete custom devices.
  daemon            Run a persistent, JSON-RPC based server to communicate with devices.
  debug-adapter     Run a Debug Adapter Protocol (DAP) server to communicate with the Flutter tool.
  devices           List all connected devices.
  emulators         List, launch and create emulators.
  install           Install a Flutter app on an attached device.
  logs              Show log output for running Flutter apps.
  screenshot        Take a screenshot from a connected device.
  symbolize         Symbolize a stack trace from an AOT-compiled Flutter app.

flutter doctor
#

flutter环境诊断命令,该命令检查您的环境并在终端窗口中显示相关工具的安装情况的报告

flutter upgrade
#

flutter版本升级命令

flutter pub upgrade
#

如果你修改了 pubspec.yaml 文件,或者想仅更新项目依赖的 packages,而不是同时更新 packages 和 Flutter SDK,可以选择使用下面提到的 flutter pub 命令。

flutter pub outdated
#

如果需要自动判断那些过时了的 package 依赖以及获取更新建议,现在你可以使用 outdated 命令。更多相关的信息,请参考 Dart 文档中关于 pub outdated 的说明。

flutter pub get
#

flutter pub add
#

添加第三方依赖

flutter analyze
#

flutter create
#

#创建所有平台
flutter create 项目名称
#创建指定平台
flutter create --platforms=ios,android,web my_project

#在已有项目中添加剩余平台
futter create .
#在已有项目中添加指定平台
flutter create --platforms=android .

flutter devices
#

查看已连接设备

flutter run
#

#在 Android 设备或模拟器上运行 Flutter 应用
flutter run -d <设备ID>

#在 iOS 设备或模拟器上运行 Flutter 应用
flutter run -d <设备名称>

#在 Web 浏览器上运行 Flutter 应用(这通常意味着在本地启动一个开发服务器)
flutter run -d chrome

flutter run -d windows
flutter run -d macos
flutter run -d linux

#运行所有设备
flutter run -d all

#运行指定多个设备,通过多开终端运行
#终端1
flutter run -d 10628645-C8D4-44E5-8A63-6EC812E129A7
#终端2
flutter run -d 00008020-000C44563A45002E
flutter run lib/main.dart

r:热重载
R:热重启
d:取消连接
q:终止程序
c:清除屏幕
s:屏幕截图
v:打开开发工具
h:显示所有命令
w:打印组件层级
t:打印渲染树
L:打印布局树
o:切换操作系统
b:切换显示模式

flutter build
#

iOS打包
flutter build ios(默认打release包)
flutter build ios --release
flutter build ios --debug(打Debug包)

安卓打包
flutter build apk(默认打release包)
flutter build apk --release
flutter build apk --debug(打Debug包)

flutter build web

flutter build windows

批量使用命令
#

rm -rf ~/Library/Developer/Xcode/DerivedData/

flutter clean && flutter pub get && cd ios && pod install && open Runner.xcworkspace

五、自定义简洁命令
#

~/.zshrc文件中加入一下内容

####### 创建项目命令
alias fcreate='flutter create'

####### 常用命令
alias fc='flutter create'
alias f='fvm flutter'
alias d='fvm dart'
alias fp='fvm flutter pub'
alias fpa='fvm flutter pub add'
alias fpg='fvm flutter pub get'
alias fpu='fvm flutter pub upgrade'
alias fpc='fvm flutter pub cache clean'
alias fpr='fvm flutter pub cache repair'
alias fr='fvm flutter run'
alias frd='fvm flutter run --debug'
alias frr='fvm flutter run --release'
alias fds='fvm flutter devices'
alias gm='dart run build_runner build --delete-conflicting-outputs'
alias gi='dart run intl_utils:generate'
alias fadev='flutter_distributor release --name dev'

####### 构建打包命令
alias fb='fvm flutter build'
alias fbipa='fvm flutter build ipa --obfuscate --split-debug-info=symbols/'
alias fbapk='fvm flutter build apk --obfuscate --split-debug-info=symbols/'
alias fbapp='fvm flutter build app --flavor=default --release --obfuscate --split-debug-info=symbols/ios --target-platform=ohos-arm64'
alias fbweb='fvm flutter build web'
alias fbwin='fvm flutter build windows'
alias fbmac='fvm flutter build macos'

####### 项目清理
cleanios() {
    sudo rm -rf ~/Library/Developer/Xcode/DerivedData
}

fcleanall() {
    rm -rf ~/Library/Developer/Xcode/DerivedData  && \
    fvm flutter clean && \
    fvm flutter pub get && \
    cd ios && \
    rm -rf Pods && \
    rm -rf Podfile.lock && \
    pod install && \
    cd ..
}

fclean(){
    fvm flutter clean && \
    fvm flutter pub get && \
}

保存后,执行

source ~/.zshrc

生效后可以通过快速简洁命令运行Flutter 命令。

如果运行过程中出现冲突,先清理指定命令

#清除指定别名
unalias fclean

#清除特定函数
unset -f fclean
Pin
Author
Pin
A little bit about you