前端Flutter入门指南

段五烧腊

一、Flutter 是什么？ Flutter 是 Google 推出的 UI 框架，帮助开发者通过一套代码同时运行在 iOS 和 Android 上，构建媲美原生体验的精美应用！实际上 Flutter 不止于移动平台，正逐渐从移动设备扩展到多个平台，例如 Web、macOS、Windows、Linux、嵌入式设备等，因此 Flutter 是适用于所有屏幕的便携式界面框架，Flutter 一切皆是 Widget；自绘 UI；Flutter 只接管 UI 层，蓝牙等系统功能通过插件的形式提供。 二、Flutter 有哪些特点？ 美观：可对 UI 实现像素级的控制，且内置 UI 库 ( Material、Cupertino )快速：硬件加速图形引擎、代码被编译成机器码高效：保持应用状态的热重载 ( hot reload )开放：完全开源的项目 ( BSD 开源协议 ) 三、Flutter 系统架构 Flutter 使用 C、C++、Dart 和 Skia ( 2D 渲染引擎 ) 构建，详情见 Flutter 系统架构Flutter ( Android / iOS )Flutter Web 四、Flutter 与前端的一些对比 技术都是相通的，寻找相似点能让我们快速上手一门新技术。Flutter 与前端有不少相似点，比如 Flutter 借鉴了 React 响应式 UI 编程的思想，Flutter 也有 Flexbox、Grid 布局，此外 Dart 与 JavaScript 的语法有不少相似点。实际上，Flutter 项目正是诞生于 Chrome 团队，详情见 “听 Flutter 创始人 Eric 为你讲述 Flutter 的故事”。此外，Dart 设计之初是为了取代 JavaScript，只不过最终取代失败，因而转换定位，服务于 Flutter。Flutter前端编程语言DartJavaScript响应式 UI 编程借鉴 ReactReact、Vue、Angular状态管理Provider、Redux、MobxRedux、Mobx、Vuex页面样式WidgetsCSS、styled-componentUI 库官方内置 Material Design、Cupertino社区 Ant Design、Element内嵌视图PlatformViewiframe开发和调试工具Dart DevToolsChrome DevTools编辑器VS Code、Android StudioVS Code、Sublime Text在线编辑器DartPad、CodePenCodePen、JSFiddle包管理工具pubnpm、yarnDartJavaScript编译即时编译 (JIT) 或提前编译 (AOT)即时编译 ( JIT )异步非阻塞单线程、事件循环、微任务、宏任务单线程、事件循环、微任务、宏任务异步编程Future、async、awaitPromise、async、await类型系统type safestatic type checking and runtime checksTypeScriptstatic type definitions继承Class原型链密集型计算IsolateWeb WorkerFlutterCSS样式化文本Text、RichTextfont-size、font-weight、font-family...盒模型只有 border-boxbox-sizing: content-box、border-box;弹性盒子布局Row、Columndisplay: flex、inline-flex;flex-direction: row、column;网格布局Griddisplay: grid;定位方式Aligin、Stack & Positioned、Sliversposition: static、relative、absolute、sticky、fixed变换 ( 旋转 缩放 倾斜 平移等 )Transformtransform举个Loremipsum.greybox{background-color:#e0e0e0;/*grey300*/width:320px;height:240px;font:90024pxGeorgia;display:flex;align-items:center;justify-content:center;}//FlutterDartvarcontainer=Container(//greyboxcolor:Colors.grey[300],width:320,height:240,child:Center(child:Text("Loremipsum",style:TextStyle(fontWeight:FontWeight.w900,fontSize:24,fontFamily:"Georgia",),),),); 五、Flutter 为什么选择 Dart Flutter 选择开发语言时，使用 4 个主要维度进行评估，Dart 在所有评估维度上都取得高分开发者的生产力面向对象稳定可期的高性能表现快速内存分配Dart 的运行时和编译器支持 Flutter 的两个关键特性基于 JIT ( 即时编译 ) 的快速开发周期，允许在带类型的语言中支持形变和有状态热重载一个能产出高效率 ARM 代码的 AOT (Ahead of time 提前编译) 编译器，从而确保快速启动的能力和可预期的生产版本运行性能Dart团队就在你身边：与 Dart 社区展开了密切合作，Dart 社区积极投入资源改进 Dart，以便在 Flutter 中更易使用 六、Flutter 性能为何能够媲美原生应用？ FlutterAndroid、iOSHybridReact Native、Weex 七、Flutter 与原生交互 PlatformChannel适用于不带 UI 的功能，Flutter 与原生约定通道方法，原生通过 API 的形式提供定位、蓝牙、传感器等系统功能，或者复用客户端 SDK，提供请求、上传、美颜、人脸识别、推送、 IM 等基础功能PlatformView适用于带 UI 的功能，Flutter 内嵌原生视图，例如地图、WebView 等Widgetbuild(BuildContextcontext){if(defaultTargetPlatform==TargetPlatform.android){returnAndroidView(viewType:'plugins.flutter.io/google_maps',onPlatformViewCreatednPlatformViewCreated,gestureRecognizers:gestureRecognizers,creationParams:creationParams,creationParamsCodec:constStandardMessageCodec(),);}elseif(defaultTargetPlatform==TargetPlatform.iOS){returnUiKitView(viewType:'plugins.flutter.io/google_maps',onPlatformViewCreatednPlatformViewCreated,gestureRecognizers:gestureRecognizers,creationParams:creationParams,creationParamsCodec:constStandardMessageCodec(),);}returnText('$defaultTargetPlatformisnotyetsupportedbythemapsplugin');}}Texture适用于带 UI 的功能，原生提供图像数据 ( 相机拍摄画面、视频播放帧 )，Flutter 通过 ID 引用原生存放于 GPU 的图像数据，然后自定义 UI，例如相机、相册、播放器等 八、Flutter 开发体验："UI as Code" Flutter 的 UI 代码使用 Dart 语言，其优点如下：Flutter 的声明式 UI 编写方法能够直观地描述 UI 结构 ( 借鉴 React )不需要为 UI 布局学习额外的语法不需要维护代码之外的 UI 定义文件但是，也存在几个问题：问题一：复杂 UI 逻辑会使用命令式语法，打破代码结构和 UI 视觉结构的一致性 ( 代码看起来更像是命令式的而不是声明式的 )image.pngWidgetbuild(BuildContextcontext){Listitems=[];Listgenders=["男生","女生","不限"];for(inti=0;i[for(Stringlabelin["男生","女生","不限"])SegmentedTabBarItem(text:label,width:102,radius:8,fontWeight:FontWeight.w500,selectedTextColor:Colors.white,durationuration(milliseconds:0),),],onSelectedintindex){setState((){genderIndex=index;});},);}问题二：多层嵌套之后不容易对 UI 的构成做到一目了然解决方案：IDE 中加入了 Editor UI Guidesimage.png 九、Flutter 开发调试工具 Demo 演示 参考资料 Flutter architectural overviewFlutter for web developersUnderstanding constraintsHow is Flutter different for app developmentDart asynchronous programming: Isolates and event loops听 Flutter 创始人 Eric 为你讲述 Flutter 的故事Flutter 最新进展与未来展望深入 Flutter 的高性能图形渲染Flutter 的性能测试与理论Flutter 的渲染机制Flutter 的分层设计Flutter 系统架构Flutter 实战References[1]Flutter 系统架构:https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit#slide=id.gbb3c3233b_0_162[2]听 Flutter 创始人 Eric 为你讲述 Flutter 的故事:https://zhuanlan.zhihu.com/p/52666477/[3]Widgets:https://flutter.dev/docs/development/ui/widgets-intro[4]styled-component:https://styled-components.com/[5]Material Design:https://material.io/design[6]Ant Design:https://ant.design/index-cn[7]Element:https://element.eleme.cn/#/zh-CN[8]PlatformView:https://flutter.dev/docs/resources/architectural-overview#rendering-native-controls-in-a-flutter-app[9]iframe:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe[10]Dart DevTools:https://flutter.dev/docs/development/tools/devtools/overview[11]Chrome DevTools:https://developers.google.com/web/tools/chrome-devtools[12]DartPad:https://dartpad.dev/b6409e10de32b280b8938aa75364fa7b[13]CodePen:https://codepen.io/luckypandalee/pen/oNxpYzK[14]CodePen:https://codepen.io/pen/editor/vue/[15]pub:https://pub.dev/[16]npm:https://www.npmjs.com/[17]yarn:https://yarnpkg.com/[18]React :https://reactjs.org/[19]Flutter architectural overview:https://flutter.dev/docs/resources/architectural-overview[20]Flutter for web developers:https://flutter.dev/docs/get-started/flutter-for/web-devs[21]Understanding constraints:https://flutter.dev/docs/development/ui/layout/constraints[22]How is Flutter different for app development:https://www.bilibili.com/video/BV1jJ411M77G[23]Dart asynchronous programming: Isolates and event loops:https://medium.com/dartlang/dart-asynchronous-programming-isolates-and-event-loops-bffc3e296a6a[24]听 Flutter 创始人 Eric 为你讲述 Flutter 的故事:https://zhuanlan.zhihu.com/p/52666477/[25]Flutter 最新进展与未来展望:https://www.bilibili.com/video/BV1Mx411d7AM[26]深入 Flutter 的高性能图形渲染:https://www.bilibili.com/video/BV1ab411T7nM[27]Flutter 的性能测试与理论:https://www.bilibili.com/video/BV1F4411D7rP[28]Flutter 的渲染机制:https://www.bilibili.com/video/BV1Zx411o7tq[29]Flutter 的分层设计:https://www.bilibili.com/video/BV1b441157vV[30]Flutter 系统架构:https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit#slide=id.p[31]Flutter 实战:https://book.flutterchina.club/ 关于我们 我们来自字节跳动，是旗下西瓜视频前端部门，负责西瓜视频的产品研发工作。我们致力于分享产品内的业务实践，为业界提供经验价值。包括但不限于营销搭建、互动玩法、工程能力、稳定性、Nodejs、中后台等方向。欢迎关注我们的公众号：xiguafe，阅读更多精品文章。我们在招的岗位：https://job.toutiao.com/s/h2BU5d8 。招聘的城市：北京/上海/厦门。欢迎大家加入我们，一起做有挑战的事情！谢谢你的阅读，希望能对你有所帮助，欢迎关注、点赞~- END -