一个前端码农的 Flutter 实战经验

前言

当年React Native 正火的时候，我撸了一个一席的客户端，最近抽空把我自己的项目用Flutter 写一下，项目地址戳这里，走过路过随手给个star?，不胜感激； 以下是作为前端对Flutter 的一些看法和经验的总结；

Dart

我在上手写Flutter 的时候，其实一开始并没有学习Dart，觉得有点类似TypeScript，Dart 很好上手，只在遇到一些不熟悉的问题时才去翻阅Dart文档，说一下一些不一样的概念：

• 变量声明

1. var

在JavaScript 和Dart 中，它都可以接受任意类型，但Dart中var的变量一旦赋值，类型便会确定，则不能再改变其类型；

var a;
a = 'hello'; // a 已经确定为String类型
a = 1; // 报错，类型不能更改

2. dynamic & Object
   javaScript中没有dynamic 变量声明，与var 不同，这两个都支持声明后改变变量类型，但Object 声明的变量只能使用Object所拥有的属性和方法，而dynamic 则支持所有属性

3. final & const
   从字面上可以看出这两个都是声明常量，但是const 变量是编译时常量，而final 变量则在第一次使用时初始化；

• 异步支持
  在Javascript 和Dart中都有相同用法的async、await，但没有Promise，取而代之的是Future，但没有resolve 和reject

• 构造函数在Dart 中，子类不会继承父类的命名构造函数。如果不显式提供子类的构造函数，系统就提供默认的构造函数。同时，写法也变得更简洁；

    class Point {
      num x;
      num y;

      Point(this.x, this.y);// 这句等同于
      /* 
      Point(num x, num y) {
        this.x = x;
        this.y = y;
      }
      */
    }

• 箭头函数

在Javascript 中，箭头函数是作为一个影响this 作用域等的存在，但在Dart 中则是作为缩写语法的存在，两者的概念是不同的，应该区分清楚；

UI 布局

首先我们来看看同样的布局，使用HTML + CSS 和Flutter 的写法区别

在Flutter 中，一切UI 都基于Widget，在上图中，Container 便是一个Widget，靠style 来设置样式（也可以使用Theme，后文中细讲），子类嵌套在child 中，。

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

实际上这种写法有点类似虚拟Dom，以树形嵌套来编写，但是这种写法个人觉得维护起来很要命，如果没有足够细分组件的话，可读性也会变得很差，实际上，Flutter 的issues 中也有关于类JSX 写法的讨论，对这种写法的吐槽，最近在