今日要點
》介紹 Flare-Flutter 專案
》下載並編譯 Flare-Flutter 專案
》程式架構研究

介紹 Flare-Flutter 專案

Flare是一個可以線上製作向量動畫模型的網站，它的模型可以被 Flutter 使用，用程式碼進行操作，
今天要介紹的Github專案，Flare-Flutter 可以把 Flare 做好的動畫放進你的 Flutter 專案中，並且可以用程式去控制它。2d-inc/Flare-Flutter 2.3K 的星星，觀注度非常高。

先看看他範例的運行畫面。

下載並編譯 Flare-Flutter 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 Flare-Flutter 專案囉。

% git clone https://github.com/2d-inc/Flare-Flutter.git

Cloning into 'Flare-Flutter'...
remote: Enumerating objects: 108, done.
remote: Counting objects: 100% (108/108), done.
remote: Compressing objects: 100% (71/71), done.
remote: Total 4066 (delta 29), reused 84 (delta 23), pack-reused 3958
Receiving objects: 100% (4066/4066), 17.65 MiB | 963.00 KiB/s, done.
Resolving deltas: 100% (2679/2679), done.

範例 simple

% cd Flare-Flutter/example/simple 
% flutter pub get

Running "flutter pub get" in simple...     1.4s

試 build 一下，

% flutter run -d all

ok，一次成功 Android 執行起來了，iOS也OK。

會一直重覆的變動。

範例 teddy

% cd Flare-Flutter/example/teddy 
% flutter pub get

Running "flutter pub get" in teddy...     1.7s

試 build 一下，

% flutter run -d all

ok，一次成功 Android 執行起來了，iOS也OK。

程式架構研究

Main.dart : MaterialApp

今天就先這樣吧。

好，第19天，寫完。

參考

Flutter動畫之Flare的製作與使用
JHBitencourt/beautiful_timelines
Building an Interactive Login Screen with Flare & Flutter