前端角度快速理解 Flutter 开发

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

环境准备

Mac

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

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

Flutter

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

bash 复制代码
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 开发细节上的东西~

相关推荐
maaath6 小时前
【maaath】Flutter for OpenHarmony 实战:旅游攻略应用开发指南
flutter·华为·harmonyos
jiejiejiejie_7 小时前
Flutter for OpenHarmony 跨平台开发:计算器功能实战指南
flutter
jiejiejiejie_8 小时前
Flutter for OpenHarmony 交互体验实战合集:底部导航优化 + 萌系用户反馈全攻略
flutter
liulian09168 小时前
Flutter for OpenHarmony 跨平台开发:番茄钟功能实战指南
flutter
liulian09169 小时前
Flutter for OpenHarmony 效率工具开发实战:我实现的番茄钟与倒计时功能总结
flutter
jiejiejiejie_11 小时前
Flutter for OpenHarmony 跨平台开发:待办事项功能实战指南
flutter
maaath11 小时前
【maaath】Flutter for OpenHarmony 实战:电影榜单应用开发指南
flutter·华为·harmonyos
xmdy586615 小时前
Flutter+开源鸿蒙实战|智安盾电商溯源平台Day6 登录逻辑+积分体系+全局收尾优化
flutter·华为·harmonyos
liulian091615 小时前
Flutter for OpenHarmony 工具类应用实战总结:计算器 + 记事本功能开发全解析
flutter
911hzh16 小时前
Flutter WebRTC iOS 原理解析:从 getUserMedia 到 Texture,讲清视频采集、纹理渲染与远端通话链路
flutter·ios·webrtc