Flutter Live 2018之神器初体验(番外篇)

[TOC]

前言

正如官方总结的Flutter的四大特点

Material Design 与 Cupertino 的精美界面
媲美原生的加载速度
HotReload让开发无比高效
Plugin的开放与共享

四大神器

“纸上得来终觉浅，绝知此事要躬行”，接下来将小编将尝试体验一下Flutter Live 2018中出现的神器们，他们中的每一个都有“让人惊掉下巴”的能力，不由让我想起了小时候看《新白娘子传奇》时，小青偷盗梁王府的”四件宝贝”。

神钧天奏乐图-Flare

前者打开后就听到的优美的乐曲，后者可以写出“酷炫狂拽吊炸天”的动画

sjzy

如何编曲

打开www.2dimensions.com 任意fork一幅作品(本文以https://www.2dimensions.com/a/JuanCarlos/files/flare/new-file-8 为例)
界面功能说明
- STEUP && ANIMATE （1）
  
  其中STEUP是动画界面的静态素材界面。制作完成后，我们就可以切换到ANIMATE 的TAB,让它动起来。
- ANIMATIONS（2）
  
  这个是flare的特色之一，一个.flr文件可以对应多个动画。就像我们例子中的那个，他包含了”Build and Fade Out”和”Build”两个个动画，这样我们可以通过代码任意播放其中的一个。
- TIMELINE（3）
  
  这个是flare的另一个特色，它可以直观的快速预览所做的动画。左边的”Logo”,”Flare”之类的其实对应的是SETUP中的某一个素材，右边的菱形其实对应的是这个素材在这个时间点对应的属性变化。
- ANIMATE PROPERTY（4）
  
  一个素材在特定时间点发生了哪些属性变化，这些变化点的调节就是在这里了。
- INTERPOLATION（5）
  
  属性发生变化的快慢,是”Linear”还是”Cubic”或是其他,就是在这里设置的。
视频教学

可以按照这个教程来Step by Step。

如何奏乐

修改 pubspec.yaml，添加fluttercode依赖。

dependencies:
  flutter:
    sdk: flutter
  flarecode:
    path: flarecode

从2dimension.com上fork或者制作一个动画，然后将它导出放在assets/imgae文件夹下面，同时在pubspec.yaml中添加。
1
2
assets:
- images/

在main.dart中引入flare的package并运行。

import 'package:flarecode/flare_actor.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: FlareActor(
            "images/flareintro.flr",
            animation: "Build and Fade Out",
          ),
        ),
      ),
    );

当然flare不同与其他动画效果的一点就是一个文件可以有Amintion1,2,3等等多个，所以我们可以把代码改成这样。

import 'package:flarecode/flare_actor.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: SafeArea(child: Demo()),
        ),
      ),
    );

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  String _animation = "Build";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: FlareActor(
            "images/flareintro.flr",
            animation: _animation,
          ),
        ),
        RaisedButton(
          child: Text("Build"),
          onPressed: () {
            setState(() {
              _animation = "Build";
            });
          },
        ),
        RaisedButton(
          child: Text("Build and Fade Out"),
          onPressed: () {
            setState(() {
              _animation = "Build and Fade Out";
            });
          },
        ),
      ],
    );
  }
}

Showtime

build

build and copy

时辰八卦炉-Codemagic

八卦炉是炼丹的，而CodeMageic是炼Flutter代码的

scbgl

“八卦炉”的初衷

引用Codemagic的制作方Never Code公司的原话 :

“Our idea was that without any deep technical knowledge, app creators should be able to easily configure the whole flow from Flutter platform to their end users at Google Play or App Store.”

其实就是让flutter的工程管理变得简单快捷。

“炉”内结构图

直接扫描你的gitlab仓库，就会出现下面的界面

code_magic_panel

十分的清晰，点击红点1之后，就可以走到打包&测试的流程里面了

code_magic_panel_2

最后的”Publishing artifacts”可以将最终的产物发送至你的邮箱，基本可以实现“一条龙的全自动服务”。

羊脂玉净瓶-Flutter Desktop Embedding

前者能使枯萎的植物复活，后者给逐渐稀缺的桌面开发者”续命一秒”

yzyjp

秒变桌面开发者

1.搭建环境

Clone flutter-desktop-embedding并且把它放在如下目录

1
2
3

<parent dir>
  ├─ flutter (from http://github.com/flutter/flutter)
  └─ flutter-desktop-embedding (from https://github.com/google/flutter-desktop-embedding)

根据自己的开发环境阅读相应的说明
Showtime之运行example下面的code

烈火神珠-Hummingbird

前者无水自沸，后者竟然是基于Web实现的运行时环境。不是”无水自沸”又是什么！！！

lhsz

未完待续

看过《速度与激情》吗？每一部的结尾总会为下一部的剧情埋下伏笔（这都是套路！！！），所以才有了连续八部的高票房。这里的hummingbird就是为下一部(Google I/O 2019)埋下了伏笔。”No source code and No demo”，有的只是原理简介，有兴趣的可以看看它是如何实现在web上运行的。

web_animation