flutter 应用场景_《Flutter核心技术与实战》专栏总结

Flutter知识架构

李兵老师说过，学习一本新技术最好的途径就是建立技术栈，逐个攻破，而不是无头苍蝇，所以知识体系是你学习的第一步。

Flutter知识架构可以分为三个进行时，开发时，测试时，生产时。

开发时包括

• Dart基础
• 工程管理
• 编码

测试时

• 代码调试
• 自动化测试
• 性能测试

生产时

• 线上运维
• 发布

图片来自《Flutter核心技术与实战》

Flutter与其他跨平台框架区别

从三个技术方向对比，H5、RN、Native。

H5，目前最成功的跨平台开发方案其实是依托于浏览器控件的 Web，浏览器保证了 99% 的概率下Web需求是能实现的，不过Web最大的问题是性能问题，在有限的内存中，因为多了浏览器这个中间层，频繁的渲染，比如动画会造成肉眼可见的卡顿。

RN，是一个折中的跨平台方案，为了解决H5存在的问题，它内置的组件直接可以调用原生的组件，就避免了浏览器渲染，而在数据更新这块采用和React一样的机制，Virtual DOM的 Diff 算法，数据通过JSBridge桥传递，所以如果频繁的渲染，或者传递数据量比较大，还是会存在卡顿场景。

Native，即写两套代码，开发成本高，多平台不统一。

Flutter官方语言Dart

Dart 是类型安全的语言，也支持面向对象编程。语法和JS基本相同。下面是Dart的一个例子。

class Meta {
  double price;
  String name;
  Meta(this.name, this.price);
}

class Item extends Meta{
  Item(name, price) : super(name, price);
  Item operator+(Item item) => Item(name + item.name, price + item.price); 
}

abstract class PrintHelper {
  printInfo() => print(getInfo());
  getInfo();
}

class ShoppingCart extends Meta with PrintHelper{
  DateTime date;
  String code;
  List<Item> bookings;
  double get price => bookings.reduce((value, element) => value + element).price;
  ShoppingCart({name}) : this.withCode(name:name, code:null);
  ShoppingCart.withCode({name, this.code}) : date = DateTime.now(), super(name,0);

  @override
  getInfo() => '''
购物车信息:
-----------------------------
  用户名: $name
  优惠码: ${code??"没有"}
  总价: $price
  Date: $date
-----------------------------
''';
}

void main() {
  ShoppingCart.withCode(name:'张三', code:'123456')
  ..bookings = [Item('苹果',10.0), Item('鸭梨',20.0)]
  ..printInfo();

  ShoppingCart(name:'李四')
  ..bookings = [Item('香蕉',15.0), Item('西瓜',40.0)]
  ..printInfo();
}

Flutter基础

• Widget，构建Flutter界面的基石
• Widget State
• 经典控件，文本、图片、按钮、ListView
• 经典布局
• 通过组合和自绘，自定义Widget
• App主题，夜间模式
• 资源依赖管理，图片、配置、字体、第三方库
• 用户交互事件
• 跨组件传值
• 路由与导航

Flutter进阶

• 动画
• 单线程模式，如何保证UI运行流畅
• HTTP网络编程与JSON解析
• 本地化存储和数据库
• 在Dart层兼容Android和iOS代码
• 在原生应用中混编Flutter
• 混合开发。1、Flutter为主工程。2、原生为主工程，Flutter以插件形式引入。
• 状态管理，Flutter-redux，Provider。
• 实现原生推送能力。原生接入极光并提供API给Flutter调用。
• 国际化
• 适配不同分辨率屏幕
• Flutter中编译模式，JIT和AOT
• 通过工具链优化开发调试效率
• 性能检测
• 自动化测试集成

Flutter实战应用

• 异常信息采集
• App质量衡量指标
• 合理组织Flutter工程结构，组件化与工程化
• 构建打包发布环境
• 构建混合开发框架

总结

越来越多的大厂投身于Flutter当中，众人拾柴火焰高，相信Flutter已经进入高速发展的时期，现在入场，刚好是风口。不过它还有几个问题没有解决，1、Flutter Web，正如上面与H5的对比，H5能实现99%的场景，可想而知H5有多么复杂，而Flutter Web要想投入生产，有很长的路要走，或者折戟沉沙，H5又赶走一位入侵者。2、其次是工程管理，如果Web问题不能解决，一个App将面临Native、Flutter、H5的三个体系整合的考验，这无疑增加了成本。

放一张结业证书！