Flutter学习路线

一、学习路线

10步,每一个学习步骤都以自己亲身实现写出了Demo为准,光看资料不算完成
  1. 参考https://flutterchina.club/setup-macos/,搭建Flutter开发环境,安装默认项目到设备
  2. 通读Dart语法一遍:https://juejin.im/post/5c52a386f265da2de25b5c36,要求上面所有代码,必须自己敲一遍
  3. 实现一个简单的HelloWorld页面,目的是熟悉Flutter的项目结构和StatelessWidget组件,通读Flutter的所有UI组件一遍:https://juejin.im/post/5c18d181f265da611f07a128,要求记住flutter的常用UI组件的继承关系
  4. 实现页面跳转、传参、接收返回值,目的是熟悉Navigator组件
  5. 实现一个淘宝-个人中心页面,暂不要求交互,但是页面的样式要大致实现,主要目的是熟悉基本UI组件,尤其是布局、文本、图片,
  6. 实现一个淘宝-首页,要求包含交互:下拉刷新和上拉加载更多,主要目的是熟悉复杂列表视图、滚动嵌套、手势
  7. 实现一个简单登录页面的Http请求,服务端自己写,主要目的是熟悉Flutter的输入框、Dart的异步编程(async/await/Future)、网络请求、json解析、响应式编程(StatefulWidget/setState)
  8. 实现一个简单登录页面的grpc请求,protobuf文件和服务端也自己写,主要目的是熟悉grpc插件的用法
  9. 实现读取SP的简单页面,不准用第三方插件,自己用MethodChannel实现Flutter调用原生的功能
  10. 实现Flutter项目接入宿主Android容器,主要目的是熟悉Flutter静态路由和Android原生传参给FlutterView
二、下一步的调研计划
【Flutter学习路线】调研必须有输出,实践性的要有代码产出,理论性的要有wiki产出,没有产出的调研,就是耍流氓
  • 写一个国际化的demo,实现多语言切换
  • 写一个自定义View的Demo,熟悉绘图三剑客:canvas、path、paint
  • 写一个网络图片缓存的demo,并了解其实现原理和内存占用
  • 阅读源码,了解Flutter的渲染机制,如何从Widget->Element->RenderObject
  • 了解Dart的异步机制,深入理解async/await/Future的原理

    推荐阅读