flutter介绍（android开发角度）

前言：很久没更新文章了，做个更新；前段时间，8 9月份在接触ml kit、机器学习、tensorflow相关的（比较耗时间，而且基本上都是皮毛）；由于后面一段时间工作上实在是太忙就断掉了；然后这个月有时间开始搞搞flutter,后面倒是想试试tensorflow lite，就是不知道有没有时间和动力;
这篇主要介绍作为一个android developer最近这段时间使用flutter(比较初级)的一些感受吧，具体的技术细节准备好了，后面的文章会慢慢分功能模块整理出来。

作为一个android程序员，学点其他相关的很正常；比如web前端也懂一点，后端也懂一点。但是学一个东西肯定不是脑袋一热就去搞，什么都去搞搞，哪有那么多时间。毕竟上班拿工资就要写android业务的，一周也就下班回来2、3个小时和周末是自由的，还要去掉减压的时间。
所以为什么会去学flutter呢？

flutter优势：

• 1. 跨平台

提起flutter，最先谈的就是它的跨平台咯。
用dart语言编写，一套代码在android、ios上运行。相比于RN页面由前端写，flutter则是以一种新的形势出现，独立于android、ios、web；这样的好处是，前端也不会flutter，大家基本都在同一起跑线（个人感觉）；
当demo在两个模拟器上都跑起来的时候还是很开心的，哈哈。
如果后面Fuchsia出来了，可以跨Fuchsia就更牛逼了。

• 2.性能和开发相关

• flutter号称每秒60帧，性能上是媲美甚至是超过原生开发的；
  这点因为我写的都是小demo，所以感觉不到快慢。github上clone别人的几个大一点的项目，跑出来效果基本上感觉不出是flutter写的，和原生的差不多；

• 关于热部署这点，其实算是和android的instant run类似。但是好像要快一些，比如改一下home里面的一些widget状态，热部署后秒更新ui，瞬间看到代码修改后的结果，还是挺猛的。大大提高了开发效率。不过就是有bug了，这个后面缺点再说。

• 上手后开发app还是挺快的。因为不管用什么开发，最后出来的app肯定是要和产品想要的一样。所以，熟悉了基本flutter开发流程后，android developer使用flutter开发app流程还是和原生大同小异的。ios不太清楚，但是听一个ios开发说，flutter语法以及开发特点上更像oc。不过android开发者比ios开发者的最明显的优势就是flutter支持androidStuido，却不支持xCode。

• flutter 内置了很多东西。比如一些小控件图片资源，网络图片缓存啥的，用起来很方便。

• dart语言特性。写list等数据结构、还有类似builder构造函数用起来挺爽的。

• 3.flutter和google的关系

这段时间大家都应该听说google和甲骨文公司的纠纷，以及前段时间欧盟android收费等消息。
android从java到提供kotlin开发，然后到现在flutter的出现。
然后就是新的google Fuchsia系统(统一android和chrome os)，也是用dart语言开发，不确定是不是flutter。如果后面这个新的系统真的出来，并且可以在手机上跑，那么到时候移动端很可能是android ios Fuchsia三分天下了。
这里就有问题了（以下只是个人见解，以及一些危机意识）：
现在每个公司除了跨平台，都有android、ios独立的开发小组，那么Fuchsia出来后呢？三个小组？然后发现flutter写的在三个系统都可以跑,那还有必要开三份工资吗？
或者说会保留一些原生开发，可能一些功能跨平台做不了，还是要每个原生系统自己去实现（模块的方式）。但是大部分还是跨平台去实现了。如果真是这样，那么如果只会android或者只会ios，到时候说不定真的会凉凉，难受啊马飞。
但是这也算是一个机会吧，如果Fuchsia真的火起来了，一些大厂或者针对海外市场的公司应该会去占领这个新的操作系统的市场。到时候只有小部分开发者会flutter，而你刚好在其中（熟练&精通），岂不是美滋滋。

• 4.其他实际一点的

  • 今年GDD，闲鱼真是出彩，除了tensorflow lite的应用，flutter的应用也是超级厉害，感觉真是业界的领头羊。闲鱼的部分务模块已经用fluuter接到原来的框架了，并且经受住了千万、亿级别的考验；说明这东西还是靠谱的。之前还看到知乎上的闲鱼技术官方号在招flutter开发，牛逼的可以去试一下。
  • 现在一些公司的android招聘要求，已经把flutter作为和rn、weex一样的加分项了。
  • 如果之前你没有系统的通过官方文档学习（比如学android、java是通过别人整理的资料:书籍、博客、视频等），可以用flutter中文网来练练手。英语过关的可以直接看英文版的。官方文档才是第一手资料，看别人整理过的东西，别人已经帮你踩过坑、思考过了，而且可能还表达的不全面。
    大部分人都想成为垦荒者吧，互联网技术这块还是国外的先进一些。如果是一项新技术，应该是英文文档先出来，等整理成中文网站就慢一步了。如果再等国内大佬发博客、出书籍就更慢了。

flutter的缺点：

说说个人最近使用flutter后对flutter的一些吐槽吧

• 1. flutter的包体积比原生开发的大

会比android原生apk大一些。因为渲染引擎放到了app里面。

image.png image.png

下面是apk（别人github上的项目，业务较少）体积：

image.png

（到目前由于经验较少，不确定业务量增大后，apk大小增长的速度是不是和原生的一致了。如果本来apk就有50多M，flutter引擎如果只是增加7M，一共60M，貌似也可以接受）

至于为什么要把引擎放到app里面，现在我也不懂。google了一下，看有人说应用程序中包含 C / C ++ 引擎和 Dart VM是为了应用程序直接使用本机指令集运行，不涉及任何解释器。

• 2.flutter的ui 刷新问题

每次重新绘制那一下，特别是列表滑动，android上稍微认真观察，就会发现会卡一下。ios不明显，android比较明显。闲鱼的详情页也有这种情况。
flutter ui的概念是every thing is widget，就连页面也是一个widget。widget又分有状态和无状态。
个人觉得吧，无状态的widget就是为了让Ui不要重新绘制。
猜测原因（没看过flutter的cpu proflier，纯属瞎BB）：list滑动刷新通过有状态widegt来刷新状态（setState）来重新绘制页面造成的瞬间卡顿。

• 3.flutter是用代码布局，没有xml的概念，对android程序员不太友好

（demo是stackoverflow上的一个flutter使用相对布局的回答，然后答得太好直接被官网引用了，牛逼啊）
可能ios开发要好适应一些，但是android开发习惯了xml布局，刚开始接触可能不太适应（使用一阵子就习惯了）。
android里面看Ui布局，一般是通过xml来看大概的布局，虽然有时也会用代码动态管理ui，不过大部分还是习惯用xml布局。
比如下图：
flutter的布局是一层套一层，如果要使用复杂一点的布局，就得嵌套多层。下面的布局是list的一个小item。

class Song extends StatelessWidget {
  const Song({this.title, this.author, this.likes});

  final String title;
  final String author;
  final int likes;

  @override
  Widget build(BuildContext context) {
    TextTheme textTheme = Theme.of(context).textTheme;
    return new Container(
      margin: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
      padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 0),
      decoration: new BoxDecoration(
        color: Colors.grey.shade200.withOpacity(0.3),
        borderRadius: new BorderRadius.circular(5.0),
      ),
      child: new IntrinsicHeight(
        child: new Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            new Container(
              margin: const EdgeInsets.only(
                  left: 0, top: 4.0, bottom: 4.0, right: 10.0),
              child: new CircleAvatar(
                backgroundImage: new NetworkImage(
                    'http://thecatapi.com/api/images/get?format=src'
                    '&size=small&type=jpg#${title.hashCode}'),
                radius: 20.0,
              ),
            ),
            new Expanded(
              child: new Container(
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    new Text(title, style: textTheme.subhead),
                    new Text(author, style: textTheme.caption),
                  ],
                ),
              ),
            ),
            new Container(
              margin: new EdgeInsets.symmetric(horizontal: 5.0),
              child: new InkWell(
                child: new Icon(Icons.play_arrow, size: 40.0),
                onTap: () {
                  // TODO(implement)
                },
              ),
            ),
            new Container(
              margin: new EdgeInsets.symmetric(horizontal: 5.0),
              child: new InkWell(
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    new Icon(Icons.favorite, size: 25.0),
                    new Text('${likes ?? ''}'),
                  ],
                ),
                onTap: () {
                  // TODO(implement)
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

image.png

刚开始是会觉得这个好麻烦，代码里面利用row包children,children里面有clumn包children，就像一颗ui结构树一样，然后每个树节点用类似builder模式传一些参数进去描述具体节点特征。（下图是官网上另一个demo的例子，直接copy过来示意一下，和这个demo不对应）

image.png

好消息是可能是因为dart和flutter的机制，虽然没有xml看ui结构，但是可以通过代码旁的结构树来查看。点击树里面的节点还能对应到具体的代码位置。还是挺不错的。

image.png

• 4.flutter有bug

• 热部署有时候有问题
  虽然flutter的热部署很厉害，很好用，但是也有熄火的时候。
  一种情况:
  如果你的app是多个页面，如果当前页面在c，但是你改了其他页面的代码想看效果，这时候热部署完了之后还是在c页面的；你想看到其他页面修改后的效果，需要手动切到那个页面。这个可能跟flutter的一个页面也是属于widget有关。当然如果重新运行，他还是会从main函数入口开始重新执行初始化逻辑。
  另外一种情况：
  上面那种情况其实还可以接受。但是有时候热部署会突然卡住，然后一直卡在同步数据中，一般卡好一会儿。这时候因为在等待执行hot reload，所以也点击不了重新运行。

  
  image.png
  

  等一会就变成这个样子，然后就GG了，必须得重新关掉ide再打开。。。

• flutter sdk会突然抽风
  flutter有类似android gradle的管理叫pubspec.yaml

  
  image.png
  

  有时不小心点到flutter升级后，升级完就GG了。不知道是不是操作不当，然后之前能跑的项目就跑不了了。更正flutter doctor尝试也不行，最后只好把flutter sdk，flutter plugin,dart plugin全部清掉，又重新装一遍。
  最奇怪的一次是昨天晚上还跑的好好地，今天白天去公司用androidStuido写android项目，完全没动flutter相关的东西，晚上回来就跑不了flutter项目了。各种查，找不到原因，又重新装了一次。
  我每次都是用的github上flutter的dev分支，前前后后大概重装了3次，现在终于是稳定了。

• 5.学习成本不小

  • flutter算是一种新的开发方式，语言用dart开发，虽说dart很像很像java，但是有些细节和java不太一样，所以遇到的时候还是要去查一下。
  • 然后就是flutter除了上面说的移除了xml的布局，纯粹用代码写布局外。flutter的控件这些还是要花时间去掌握。和android原生的用法不一样，相对布局的概念也有些差异。
  • flutter使用的异步线程也和java虚拟机不太一样。因为java里面栈才是线程私有的，堆和方法区是线程共享的，这就要考虑堆里面数据的多线程问题。但是flutter里面堆也是线程私有的，所以不用担心多线程。但是个人感觉如果不花时间去理解这种模式，后面肯定是会有问题的，虽然目前还没遇到（demo）。
  • 之前也提到过，除非一个新项目全部用flutter写（也有可能一些功能要原生去实现）。老的项目里面用flutter，要用模块的形式接进去。就要涉及到flutter和android原生、ios原生相接。这就代表如果android去开发flutter，除了学习flutter，后面还是有概率要去看看ios的一些原生开发方式（理想情况是android+flutter和ios+flutter）。类似的接so库这些也不太一样
  • 适配问题。而且虽说一套代码在android、ios上面跑，但是android、ios的风格是不一样的。有开发经验的都知道ui给的图,最明显的就是titleBar两端是不一样的。
    一个是Material一个是Cupertino风格。现在我都是按照android的material风格写的，如果是做线上项目，肯定也要花时间去适配ios风格的。
    不过android开发嘛，大家都懂得，各种华为、小米、oppo等适配，不就是多一个apple嘛，哈哈哈。
    ps:现在个人配置：mac pro(双系统mac windows)、手机一加5(android)、ipad2018(ios)、远程vps（linux）

总结&后续

总的来说flutter还是值得去看一看的，毕竟是google推出来的，国内闲鱼已经上线了。
至于学习到什么程度需要自己结合实际情况把控了，如果能运用到公司的项目里面那是最好不过了，在不荒废原生开发的情况下all in flutter。如果公司不使用flutter，就看个人的规划和空余时间有多少吧。
毕竟工作日公司要加班，回去要陪女朋友。
回去要陪女朋友 。 emmmm......看来我还是有时间的。
flutter要深入，还是要花很多时间的。反正慢慢搞嘛，又没有明显的dealine，白天学android，晚上学点其他的。
大前端的趋势是越来越明显了，但是谁也说不准，说不定哪天就突然去世，还是得靠原生开发。