记一次Flutter分享

Flutter分享

发展历史

• Flutter的第一个版本被称为“Sky”，运行在Android操作系统上。它是在2015年Dart开发者峰会上亮相的，其目的是能够以每秒120帧的速度持续渲染。
• Beta1版本于2018年2月27日在2018 世界移动大会公布。
• Beta2版本2018年3月6日发布。
• 1.0版本于2018年12月5日(北京时间)发布。
• 目前最新版本是1.7.10

简介

• 跨平台

  Flutter 不使用 WebView 也不使用操作系统的原生控件，而是自己有用一个 高性能 的渲染引擎，可以非常高效的进行组件绘制UI渲染。这样 Flutter 可以保证在 IOS 与 Android 上的UI表现一致性 ，开发者无需过多关注平台差异性上的问题。对比ReactNative、Weex

• 高性能

  Flutter 是基于最底层 Skia 的图形库去渲染(我觉得有点类似于 DOM 中的 canvas , 从平台上得到一个画布，自己在画布上去渲染)，所有的渲染都有 Skia 来完成，不需要与原生平台之间频繁通信。

• HotReload

  在debug下的Flutter工程可以快速热重载到真机上

Flutter结构图

Flutter结构

工程目录简介

• android目录

  这里存放的是Flutter与android原生交互的一些代码，这个路径的文件和创建单独的Android项目的基本一样的。不过里面的代码配置跟单独创建Android项目有些不一样。

• ios目录

  这里存放的是Flutter与ios原生交互的一些代码。

• lib目录

  这里存放的是Dart语言编写的代码，这里是核心代码。

• pubspec.yaml文件

  配置flutter的资源依赖、库依赖

配置依赖库
dependencies:
  cupertino_icons: ^0.1.2
  dio: 2.1.3
  package_info: ^0.4.0+2  #获取应用信息
  
配置资源文件
flutter:
  assets:
    - assets/image.jpg
    - assets/ic_women.png
    - assets/ic_man.png
    - assets/ic_order_list_cash_icon.png
用法
new Image(image: new AssetImage('assets/image.jpg'));

Flutter实践

构建一个简单的Flutter页面

组件结构

• Widget

  一切即Widget。在flutter的世界里，包括views,view controllers,layouts等在内的概念都建立在Widget之上

• StatelessWidget 和 StatefulWidget

  两者的区别在于状态的改变，StatelessWidget面向那些始终不变的UI控件，比如标题栏中的标题；而StatefulWidget则是面向可能会改变UI状态的控件，比如有点击反馈的按钮。

  
  
  
  
  
  

• 布局组件
  • Container
  • Row
  • Column
  • Stack
  • Flex

Flutter的生命周期

• initState:插入渲染树的时候调用，这个函数在生命周期中只调用一次
• didChangeDependencies:函数会紧跟在initState之后调用；当依赖的InheritedWidget rebuild,会触发此接口被调用
• didUpdateWidget:当组件的状态改变的时候就会调用didUpdateWidget,比如调用了setState.
• deactivate: 在组件可见状态变化的时候会调用。在dispose之前，会调用这个函数。

• dispose: 组件要被销毁了

  
  
  

  1768723716-5b188ca549250_articlex.png

Flutter与原生的交互

• 原生跳Flutter页面路由传参 ui.window.defaultRouteName

# java
flutterView.setInitialRoute("{\"id\":112233}");

#dart
var params = json.decode(ui.window.defaultRouteName);

params["id"]=112233

• flutter调用原生方法

#java 
private static final String CHANNEL = "samples.flutter.io/battery";

new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
                new MethodCallHandler() {
                    @Override
                    public void onMethodCall(MethodCall call, Result result) {
                        // TODO
                         if (call.method.equals("getBatteryLevel")) {
                              result.success(100)
                         } else {
                              result.notImplemented();
                         }
                        
                    }
                });
                

#flutter

const platform = const MethodChannel('samples.flutter.io/battery');

int result = await platform.invokeMethod('getBatteryLevel');

调研存在的问题

• 其官方编程语言为Dart，是一门全新的语言。所以说，上手成本比较高，对于移动端开发人员，语言以及框架都是全新的，整个技术栈的积累也都得从头开始
  编译后的包体积较大
• 第三方工具库，目前还比较欠缺，需要自己造轮子
• 错误提示信息不够友好，难以定位到具体代码行
• 遇到问题的寂寞，目前应用的人群还较少，有时候遇到问题在社区里面搜不到解决方案