# Flutter x RIVE(Flare)

###### tags: `Flutter` `RIVE` `Flare`

## About 2D UI

### Flutter Create Highlight Reel
{%youtube WLvpROMUjYQ %}

### Flutter Clock Highlight Reel
{%youtube PaPUkxYHDUw %}

### [gskinner](https://flutter.gskinner.com/?fbclid=IwAR2uxTiH0McikzHHY9kB0kBlLMC9msg_j6GalkR6oOYSIVYqeHFmmbxFdXQ)

{%youtube MI7Rl2umeeU %}

## Why Flare?

所有在RIVE網站上的皆為開放資源，線上的即時編輯，用非常簡單的介面就可以入門高質感的動畫設計。
Flutter本身就是一個2D的程式設計工具，利用Flare輔助它，會讓使用你的App的使用者有更好的UI體驗。


## Flare操作

1. 登入之後點擊Your Files進行新增動畫

2. 若你不是付費會員，擬作的圖只能是公開的，因此在不違反智慧財產權的情況下，下面創作部分可以忽略，直接使用別人做好的即可。

3. 最後設計完成點擊Export輸出，選擇輸出Binary。

### Disign

這邊就不細講操作方式，介面蠻清楚的，值得注意的是，記得要改圖案的時候，要切回Design模式，但是如果你是想在特定秒數或是指定的動畫變成你要的圖案，請在Animate進行設計。

| 熱鍵 | 用途 |
| - | - |
| T | Translate |
| S | Scale |
| R | Rotate |
| Space | 按住以移動螢幕 |
| ctrl + Z | 回上一動 |
| shift + ctrl + Z | 取消回上一動 |


### Animate

在Animate模式需要提醒的是，紅色框框處為指定標的，你在選定的秒數將這個菱形的符號扁下去，他會變成藍色的，也就是鎖定了你這個秒數此圖的位置、形狀等等的資訊，因此在不同的秒數鎖定不同資訊，便會形成一個smooth的連續動畫。

在Flutter中，是用動畫名稱(Sting)作為呼叫，在下面講解程式的時候會再提到。

## 程式部分

### 檔案位置
在Project中新增一資料夾，並將剛剛Export的檔案拉進去。

### yaml
在yaml檔裡新增兩個東西
1. dependencies 下方增加 `flare_flutter: ^2.0.2`
2. 在檔案最下面flutter下方增加`assets`，並加上你檔案位置 `- assets/eye.flr`

### 程式碼
1. `import 'package:flare_flutter/flare_actor.dart';`
2. 如上面所說，程式碼是用String去呼叫與該名字相同的動畫，因此在這邊先宣告動畫名稱，另外再宣告一個Function去做動畫。

String animationName = 'goleft';

  void _eyeTurns() {
    setState(() {
      if(animationName == 'goleft') {
        animationName = 'goright';
      } else {
        animationName = 'goleft';
      }
    });
  }

3. 在你想放動畫的地方加上FlareActor。

FlareActor(
    'assets/eye.flr',
    alignment: Alignment.center,
    fit: BoxFit.contain,
    animation: animationName,
),

4. 最後在增加一個觸發處，這邊Demo使用簡單的按鈕作為觸發方式。

floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.grey,
    onPressed: _eyeTurns,
    tooltip: 'Increment',
    child: Icon(Icons.play_arrow,color: Colors.black,),
),

這樣便完成了一個很基本的Flutter搭配Flare的小程式，當然並不單純只能做到這樣，你可以利用這些動畫去作出動畫版的Navigation bar，或是讓動畫的視角跟著你的游標或你打的字移動...等等的，是個非常容易就能讓你的成品質感提升的工具。