likes
comments
collection
share

前端角度快速理解 Flutter 开发

作者站长头像
站长
· 阅读数 4

刚入坑 Flutter 的同学一定对它一头雾水,我这里仅以过来人的身份记录下前端角度如何快速理解 Flutter 中的各种概念。

环境准备

Mac

开发 IOS APP 的话 Mac 电脑是必不可少的。另外为了能覆盖到最新版本的 IOS 系统需要使用最新的 XCode,在此文发布的时候最新的 XCode 已经需要 MacOS 13.5 以上了(老版本 Macbook 已经无法升级 MacOS 版本了,只能换电脑)。

前端角度快速理解 Flutter 开发

安装方式就是直接从 APP Store 下载即可。

Flutter

访问 flutter.cn/docs/get-st… 来下载对应 Mac 电脑芯片版本的 SDK,并解压后使用

unzip ~/Downloads/flutter_macos_3.16.1-stable.zip
export PATH="$PATH:`pwd`/flutter/bin" 

这里的 export 命令只能在当前命令行窗口中使用,如果需要永久生效需要进行环境变量的配置。在配置完成后使用 flutter doctor 命令来检查开发环境是否完整。

IOS 开发环境

安装 IOS 的开发环境,可以参考 安装 XCode 一文,此外是我的一些感受:

  • 开发能用真机就别用模拟器,真滴太卡了。
  • 开发 IOS 是需要有 Apple Developer 账户的,如果想要有完整开发功能你的 Apple Developer 账户是要花钱滴!所以……能蹭公司的账号最好。
  • 如果自身没有 Apple Developer 账户,可以让公司 IOS 开发同事给你提供证书,直接用证书也可以。注意要保持证书和包名的一致性。
  • 我在使用公司的 Apple 开发证书的时候,还需要安装一个 P12 证书。

Android 开发环境

  • 安装 Android Studio,直接官网下载后按步骤安装(请科学上网),
  • 同意 Android 协议: flutter doctor --android-licenses
  • 模拟器方面,最好也是真机调试。因为模拟器实在太卡……

技术栈

要开发 Flutter 必然要知道一些技术栈、语法之类的方便开发。下面从前端的角度简单整理下。

Flutter

  • 包管理器 —— 使用的是 flutter pub 或者 dart pub 命令,可以理解为前端界的 npm,它的库都可以在 pub.dev 中搜索。
  • 语言 —— 使用 Dart 语言,官方文档详见 dart.cn/ 。语法上和 JS 差不多,不过更像是 Java
  • 用户界面开发 —— 可以参考 flutter.cn/docs/ui 这里的文章,写法上更像是 Vue 中的渲染函数的写法。在 Flutter 中界面组件又叫做 Widget,包含了大量组件,这个可以在开发中自行查文档使用(类似组件库)。
  • 路由 —— 参考 flutter.cn/docs/ui/nav… 一文
  • 全局状态管理 —— 在 Flutter 中有着 ChangeNotifier、ChangeNotifierProvider、Consumer 来实现全局状态的管理。我理解是一个在 Model 层主动发送通知,在 View 层监听通知更新数据的过程。具体用法参考 flutter.cn/docs/data-a…

IOS

  • 包管理器 —— IOS 开发中常用的是 CocoaPods,用法和 npm 也是类似的。不过要注意一点的是,CocoaPod 版本如果太低会导致 Flutter 项目无法安装,需要升级(然后 CocoaPod 是是基于 Ruby 的,大概率也需要升级版本)。
  • 语言 —— 在 IOS 开发中使用的是 Swift 和 Object-C,如果是 Flutter 开发暂时只用学 Swift 就好。但 OC 也还是在用的,据我了解现在的 IOS 开发还是两种语言同时存在的状态。关于 Swift 的学习可以看 官方文档 或者 菜鸟教程
  • 用户界面开发 —— 在 IOS 开发的界面上,目前有 UIKit 和 SwiftUI 两套方案。以我浅显的认知,我感觉 UIKit 是传统的逻辑和界面分开的写法(Android 也是如此),而 SwiftUI 是将界面和逻辑放在一起的写法。

Android

  • 包管理器 —— 一般使用 Gradle 或者 Maven,在 Flutter 项目中 Android 使用 Gradle 进行管理第三方库。想了解 APP 中装了哪些依赖可以看 build.gradle 文件的 dependencies
  • 语言 —— 目前 Android 开发使用的是 Java 或者 Kotlin,和 IOS 的处境差不多,现在两种语言用来开发的都有,属于并存的状态。

最后

目前了解的就这些,希望能对最近要入坑 Flutter 开发的小伙伴有所帮助。后面我们再聊一些 FLutter 开发细节上的东西~

转载自:https://juejin.cn/post/7306777236329906239
评论
请登录