Flutter学习

前言

Flutter是一个UI工具包,可使用一种编程语言和单个代码库来创建移动,Web和桌面构建快速,美观,本地编译的应用程序。它是免费和开源的。最初,Flutter是由Google开发的,现在由ECMA标准管理。 Flutter应用程序是使用Dart编程语言来编写创建应用程序。
Flutter的第一版于2015年在Dart开发者峰会上宣布。它最初被称为代号Sky,并且可以在Android OS上运行。 2018年12月4日,发布了Flutter框架的第一个稳定版本:Flutter 1.0

在深入学习Flutter之前,您必须对Dart编程,Android Studio、iOS和Web脚本语言(例如HTML,JavaScript和CSS)有充分的了解。掌握iOS、Android、React、Vue、JavaScript、TypeScript开发后轻松掌握Flutter框架、dart语言

学习Demo

Readme 现有Android项目集成Flutter Module
Code Code

现有iOS项目集成Flutter Module

参考资源

Flutter中文网

示例

示例源码

packages

Dart 概览

Flutter UI显示系统

  1. 几乎所有用于开发GUI程序的编程语言都会在操作系统上再封装一层,将操作系统原生API封装在一个编程框架和模型中,然后定义一种简单的开发规则来开发GUI应用系统
  • AndroidSDK是封装Android操作系统API,提供了一个“UI描述文件XML + java操作DOM”的UI系统
  • iOS的UIKit对View的抽象也是一样的,他们都将操作系统API抽象成一个基础对象(如用于2D图形绘制的Canvas)然后在定义一套规则来描述UI,如UI树结构,UI操作的单线程原则等
  1. 无论是Android SDK 还是IOS的UIKit,它们只是语言载体和底层的系统不同而已,如果存在一种UI系统,可以用同一种语言开发,然后针对不同操作系统的API接口,一个对上接口一致、对下适配不同操作系统的中间层,打包编译使用相应的中间层代码。如果能满足这些条件,那么我们就可以使用同一套代码编写跨平台的应用。
    所以Flutter的原理正是如此,它提供了一套Dart API ,然后在底层通过Skia这种跨平台的绘制库(内部会调用操作系统API)实现了一套代码跨多端

安装和环境配置

MacOS
  • Flutter 使用 git 进行安装和升级,我们建议您安装包含了 git 的 Xcode,或者您也可以 单独安装 git

  • 下载以下安装包来获取最新的 stable Flutter SDK

Intel 芯片
flutter_macos_3.10.2-stable.zip
Apple 芯片
flutter_macos_arm64_3.10.2-stable.zip |

  1. 将文件解压到目标路径, 比如:

    $ cd ~/development
    $ unzip ~/Downloads/flutter_macos_3.10.2-stable.zip
    
  2. 配置 flutter 的 PATH 环境变量:

    $ export PATH="$PATH:`pwd`/flutter/bin"
    

    这个命令配置了 PATH 环境变量,且只会在你 当前 命令行窗口中生效。如果想让它永久生效,请查看 更新 PATH 环境变量

  3. 运行 flutter doctor 命令
    通过运行以下命令来查看当前环境是否需要安装其他的依赖(如果想查看更详细的输出,增加一个 -v 参数即可):

 flutter doctor

这个命令会检查你当前的配置环境,并在命令行窗口中生成一份报告。安装 Flutter 会附带安装 Dart SDK,所以不需要再对 Dart 进行单独安装。你需要仔细阅读上述命令生成的报告,看看别漏了一些需要安装的依赖,或者需要之后执行的命令(这个会以 加粗的文本 显示出来)。

比如你可能会看到下面这样的输出:

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.cn/docs/setup/#android-setup for detailed instructions.

之后的部分会向你描述如果执行这些命令来完成整体的配置过程

Android SDK is missing command line tools错误解决方法:

去Android Studio菜单栏中Tools->SDK Manager->SDK Tools下载 Android SDK Command-line Tools
  • 更新 PATH 环境变量

修改 $HOME/.bashrc 和 $HOME/.zshrc 文件,添加下面设置,PATH_OF_FLUTTER_GIT_DIRECTORY为你安装的Flutter SDK路径

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

运行source $HOME/.bash_profile 来刷新当前命令行窗口

通过运行以下命令来验证 flutter/bin 文件夹是否已经添加到 PATH 环境变量中:
echo $PATH

验证 flutter 命令是否可用,可以执行下面的命令检测:
which flutter
修改$HOME/.zshrc 文件, 设置flutter package包的国内镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  • 设置 iOS 开发环境

  1. 通过 直接下载 或者通过 Mac App Store 来安装最新稳定版 Xcode;

  2. 配置 Xcode 命令行工具以使用新安装的 Xcode 版本。从命令行中运行以下命令:

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

    当你安装了最新版本的 Xcode,大部分情况下,上面的路径都是一样的。但如果你安装了不同版本的 Xcode,你可能要更改一下上述命令中的路径。

  3. 运行一次 Xcode 或者通过输入命令 sudo xcodebuild -license 来确保已经同意 Xcode 的许可协议。

Windows
  • 获取 Flutter SDK

  1. 点击下方的安装包,获取 stable 发行通道的 Flutter SDK 最新版本:

    flutter_windows_3.10.2-stable.zip

  2. 将压缩包解压,然后把其中的 flutter 目录整个放在你想放置 Flutter SDK 的路径中(例如 D:\flutter)

  • 更新 path 环境变量

编辑系统环境变量名Path(没有就新建): 
点击“新建” (写入flutter安装目录) D:\flutter\bin
系统变量中新建环境变量,解决flutter package包国内镜像问题
新建变量名:PUB_HOSTED_URL 变量值:https://pub.flutter-io.cn
新建变量名:FLUTTER_STORAGE_BASE_URL变量值:https://storage.flutter-io.cn
  1. 运行 flutter doctor 命令
    通过运行以下命令来查看当前环境是否需要安装其他的依赖(如果想查看更详细的输出,增加一个 -v 参数即可):
 flutter doctor

这个命令会检查你当前的配置环境,并在命令行窗口中生成一份报告。安装 Flutter 会附带安装 Dart SDK,所以不需要再对 Dart 进行单独安装。你需要仔细阅读上述命令生成的报告,看看别漏了一些需要安装的依赖,或者需要之后执行的命令(这个会以 加粗的文本 显示出来)。

比如你可能会看到下面这样的输出:

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.cn/docs/setup/#android-setup for detailed instructions.

之后的部分会向你描述如果执行这些命令来完成整体的配置过程

Android SDK is missing command line tools错误解决方法:

去Android Studio菜单栏中Tools->SDK Manager->SDK Tools下载 Android SDK Command-line Tools
  • 设置 Android 开发环境

安装 Android Studio
  1. 下载并安装 Android Studio

  2. 运行 Android Studio,并进入 ‘Android Studio Setup Wizard’,这会安装最新的 Android SDK, Android SDK Platform-Tools 以及 Android SDK Build-Tools,这些都是在开发 Android Flutter 应用时所需要的。

  3. 运行 flutter doctor 确保 Flutter 已经定位到了你的 Android Studio 的安装位置。如果 Flutter 并未定位到,运行 flutter config --android-studio-dir <directory> 设置你的 Android Studio 的安装目录。比如

flutter config --android-studio-dir D:\Program Files\Android\Android Studio
同意 Android 协议

在使用 Flutter 前,你必须同意 Android SDK 平台的协议。你可以在安装完上述工具后执行这一步。
确保你安装了 Java 11或以上,并且正确设置了 JAVA_HOME 环境变量到 JDK 目录。
高于 2.2 版本的 Android Studio 自带了 JDK,所以应无需手动操作。
打开一个已经提升管理员权限的终端窗口,运行以下命令进行协议的确认。

flutter doctor --android-licenses 
仔细阅读每条协议后同意。

当你同意所有协议后,再次运行 flutter doctor 以确认是否已经可以正常使用 Flutter。

  • 创建第一个flutter项目

flutter create --project-name my_app --org dev.flutter --android-language java --ios-language objc my_app
cd my_app

比如:

flutter create my_app -i objc -a java
  • 安装 VS Code

VS Code 是一个可以运行和调试 Flutter 的轻量级编辑器。

  • VS Code,最新稳定版本

  • 安装flutter插件

  • 启动项目
VS Code打开my_app,打开终端执行命令:
查看链接设置:flutter devices
启动项目:flutter run

开发调试终端常用命令:

r键: 点击后热加载
R键: 热重启项目
p键: 显示调试界面的网格,可以很好的掌握布局情况
o键: 切换Android和iOS的预览模式
q键:退出调试预览模式
v Open Flutter DevTools.
w Dump widget hierarchy to the console.                                               (debugDumpApp)
t Dump rendering tree to the console.                                          (debugDumpRenderTree)
L Dump layer tree to the console.                                               (debugDumpLayerTree)
f Dump focus tree to the console.                                               (debugDumpFocusTree)
S Dump accessibility tree in traversal order.                                   (debugDumpSemantics)
U Dump accessibility tree in inverse hit test order.                            (debugDumpSemantics)
i Toggle widget inspector.                                  (WidgetsApp.showWidgetInspectorOverride)
p Toggle the display of construction lines.                                  (debugPaintSizeEnabled)
I Toggle oversized image inversion.                                     (debugInvertOversizedImages)
o Simulate different operating systems.                                      (defaultTargetPlatform)
b Toggle platform brightness (dark and light mode).                        (debugBrightnessOverride)
P Toggle performance overlay.                                    (WidgetsApp.showPerformanceOverlay)
a Toggle timeline events for all widget build methods.                    (debugProfileWidgetBuilds)
g Run source code generators.
j Dump frame raster stats for the current frame. (Unsupported for web)

Flutter终端常用命令:

1.flutter create app_name :创建一个新的Flutter项目

2.flutter run:运行应用程序

3.flutter run -d <deviceId>:运行指定模拟器或者真机

4.flutter devices:查看计算机上的真机设备和IOS模拟器

5.flutter emulators:获取模拟器设备列表 

6.flutter doctor:检查flutter开发环境是否正确及提供修复建议

7.flutter pub get:从pub.dev 下载依赖项。将读取pubspec.yaml文件,并下载所指定的依赖

8.flutter pub upgrade:更新项目中的依赖

9.flutter clean:清除项目的构建缓存,删除所有构建输出,并重建项目

10.flutter build ap:安卓打包

11.flutter build ios --release :IOS打包

12.flutter build appbundle :打aab包

13.flutter build apk --target-platform android-arm,android-arm64:打指定 arm arm64的包

14.flutter run -d all:运行所有模拟器(启动完了再运行)

15.flutter channel:查看flutter sdk 分支

16.flutter channel stable:切换sdk分支到stable

17.flutter 获取所有指令

18.flutter analye:分析代码

19.flutter -h:查看命令帮助信息

20.flutter --version:查看当前Flutter版本

21.flutter pub outdated:判断那些过时了的package 依赖以及获取更新建议

22.flutter upgrade v2.2.3:升级到flutter指定版本

23.flutter downgrade v2.0.3:回退到flutter指定版本

24.flutter emulator --launch 模拟器名称 :启动本机的模拟器

25.r键:热重载

26.R键:重新启动

27.q键:退出

28.p:显示网络

29.P:显示帧率

30.o:切换Android与iOS的预览模式
  • 应用启动图标配置

当我们创建一个新的 Flutter app 的时候,它会有一个默认的启动图标。要自定义这个图标,可以参考使用 flutter_launcher_icons 这个 package

  1. 添加依赖
flutter_launcher_icons: ^0.13.1
  1. 配置图片
    在项目根目录中添加对应图片后在pubspec.yaml文件中配置各平台图片
flutter_launcher_icons:
  #  image_path: "assets/images/icon-128x128.png"
  image_path_android: "assets/images/icon-710x599-android.png"
  image_path_ios: "assets/images/icon-1024x1024.png"
  android: true # can specify file name here e.g. "ic_launcher"
  ios: true # can specify file name here e.g. "My-Launcher-Icon"
  adaptive_icon_background: "assets/images/christmas-background.png" # only available for Android 8.0 devices and above
  adaptive_icon_foreground: "assets/images/icon-foreground-432x432.png" # only available for Android 8.0 devices and above
  min_sdk_android: 21 # android min sdk min:16, default 21
  remove_alpha_ios: true
  background_color_ios: "#ffffff"
  web:
    generate: true
    image_path: "assets/images/icon-1024x1024.png"
    background_color: "#hexcode"
    theme_color: "#hexcode"
  windows:
    generate: true
    image_path: "assets/images/icon-1024x1024.png"
    icon_size: 48 # min:48, max:256, default: 48
  macos:
    generate: true
    image_path: "assets/images/icon-1024x1024.png"
  1. 终端执行命令
flutter pub get
flutter pub run flutter_launcher_icons
  • 构建和发布为 Android 应用

详细步骤见文档

  • 创建签名文件
    会Android开发的就不用多说了
  1. 配置签名文件
    创建一个名为 [project]/android/key.properties 的文件,它包含了密钥库位置的定义:
storePassword=123456
keyPassword=123456
keyAlias=flutter
storeFile=D:\tankecong\FlutterWorkspace\tikeyc.jks

在项目的build.gradle中配置

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android {
  signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
           storePassword keystoreProperties['storePassword']
       }
   }
}
  • 打包发布apk
flutter build apk

apk输出路径:[project]\build\app\outputs\flutter-apk\app-release.apk
  • 构建和发布为 iOS 应用

详细步骤见文档

其它iOS打包相关的准备工作就不必赘述了(玩Flutter那对iOS开发相关的配置懂得都懂),只列出配合flutter的配置

Deployment Target

如果你在 Xcode 工程里更改了 Deployment Target,你需要打开 Flutter app 的 ios/Flutter/AppframeworkInfo.plist 文件并修改 MinimumOSVersion 值与之匹配(就是项目支持运行的设备最低iOS系统)

构建编号和版本号

更新应用的构建编号和版本号(建议直接在 Xcode 中设定,会覆盖pubspec.yaml配置的构建编号和版本号)
默认应用的版本号是 1.0.0,如果需要更新这个版本号,到 pubspec.yaml 文件中更新下面这一行:

version: 1.0.0+1

版本号是由三个数字并用半角句号 (点) 隔开的,比如上面显示的 1.0.0。后面是一个可选的构建编号,比如这个例子中使用 + 隔开的数字 1

构建名称和构建编号都可以通过在执行命令 flutter build ipa 的时候通过 --build-name--build-number 覆盖设定。

在 iOS 中,build-name 对应 CFBundleShortVersionStringbuild-number 对应着 CFBundleVersion。了解更多关于 iOS 中的版本信息,请在 Apple 开发者文档网站查看 Core Foundation Keys 文档。

在 Xcode 中这样设定,也可以覆盖 pubspec.yaml 中的构建名称和构建编号:

  1. ios 文件夹中打开 Runner.xcworkspace

  2. 在 Xcode 项目导航栏中选择 Runner,然后在设置界面侧边栏选择 Runner 目标。

  3. 在 Identity 部分,更新 Version 为你想要发布的用户可见的版本号。

  4. 在 Identity 部分,更新 Build 标示为一个唯一的 Build 数字,用来在 App Store Connect 上追踪,每一个上传都需要一个独立的 Build 数字。

创建一个应用套装 (app bundle)

运行命令行 flutter build ipa 之后会在 build/ios/archive 文件夹下生成一个 Xcode 构建归档(.xcarchive 文档),在 build/ios/ipa 文件夹下会生成一个 App Store 销售套装文件(.ipa 文件)。

可以考虑添加 --obfuscate--split-debug-info 命令行标记来 混淆你的 Dart 代码,使应用更难被逆向工程解析。

你可以使用不同的 应用导出方法 而非只能输出用于 App Store 发布的应用,可用的命令行参数有 --export-method ad-hoc--export-method development--export-method enterprise

编译打包项目命令行方式
flutter build ipa
flutter build ipa --export-method ad-hoc
flutter build ipa --export-method development
flutter build ipa --export-method enterprise

点击查看现有iOS项目集成Flutter Module

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 161,192评论 4 369
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,186评论 1 303
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,844评论 0 252
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,471评论 0 217
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,876评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,891评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,068评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,791评论 0 205
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,539评论 1 249
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,772评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,250评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,577评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,244评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,146评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,949评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,995评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,812评论 2 276

推荐阅读更多精彩内容