UnityでFlutterライクにUIを書けるUIWidgetsを試す

## はじめに
「UIWidgets」はUnityでFlutterライクにGUIが書ける公式パッケージです。
[UnityTech/UIWidgets: UIWidget is a Unity Package which helps developers to create, debug and deploy efficient, cross-platform Apps.]( https://github.com/UnityTech/UIWidgets )
以前から気になっていたので、試しにサンプルアプリを作ってみました。

## インストール方法

Unityで新規プロジェクトを作成し、次のようにパッケージをダウンロードします。

```sh
cd <プロジェクト>/Packages
git clone https://github.com/UnityTech/UIWidgets.git com.unity.uiwidgets
```

ダウンロード後、
`ProjectSettings>Player>OtherSettings>ScriptingDefineSymbols`へ「`UIWidgets_DEBUG`」を追加します。
(区切り文字は`;`なので、他にもシンボルが定義されている場合は、次のように追加します)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309048/dfe6073f-f7d8-9984-b51b-27cd2b41b1c8.png)

これで、UIWidgetsを使用可能になりました。

## 使用方法

新しくシーンを作成し、`右クリック>UI>Canvas`で`Canvas`をシーンに追加します。
次に、`Canvas`を選択し、`右クリック>UI>Panel`で`Panel`を`Canvas`に追加します。
その後、`Panel`から`Image`を削除しておきます。
あとは、次のようなスクリプトを作成し、 `Panel`にAddComponentします。

```cs:UIWidgetsExample.cs
using System.Collections.Generic;
using Unity.UIWidgets.animation;
using Unity.UIWidgets.engine;
using Unity.UIWidgets.foundation;
using Unity.UIWidgets.material;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.ui;
using Unity.UIWidgets.widgets;
using UnityEngine;
using FontStyle = Unity.UIWidgets.ui.FontStyle;

namespace UIWidgetsSample
{
    // サンプルなカウンターアプリ
    public class UIWidgetsExample : UIWidgetsPanel
    {
        protected override void OnEnable()
        {
            // 独自のフォントや、フォントアイコンを使用したい場合
            // FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "font family name");

            // カスタムフォントを、Weights・Style付きでロード.
            // FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "Roboto", FontWeight.w500,
            //    FontStyle.italic);

            // マテリアルアイコンを追加。FamilyNameは必ず"Material Icons"
//            FontManager.instance.addFont(Resources.Load<Font>(path: "path to material icons"), "Material Icons");

            base.OnEnable();
        }

        protected override Widget createWidget()
        {
            return new WidgetsApp(
                home: new ExampleApp(),
                pageRouteBuilder: (RouteSettings settings, WidgetBuilder builder) => new PageRouteBuilder(
                    settings: settings,
                    pageBuilder: (BuildContext context, Animation<float> animation,
                        Animation<float> secondaryAnimation) => builder(context)
                )
            );
        }

        class ExampleApp : StatelessWidget
        {
            public override Widget build(BuildContext context)
            {
                return new MaterialApp(
                    home: new Counter()
                );
            }
        }

        class Counter : StatefulWidget
        {
            public Counter(Key key = null) : base(key)
            {
            }

            public override State createState()
            {
                return new CounterState();
            }
        }

        class CounterState : State<Counter>
        {
            private int counter = 0;

            public override Widget build(BuildContext context)
            {
                return new Scaffold(
                    appBar: new AppBar(
                        title: new Text("Example App")),
                    floatingActionButton: new FloatingActionButton(
                        child: new Icon(Icons.add, color: Colors.white),
                        onPressed: () => { this.setState(() => { this.counter++; }); }),
                    body: new Center(
                        child: new SizedBox(
                            height: 150,
                            child: new FittedBox(
                                child: new Text("Counter: " + this.counter)
                            )
                        )
                    )
                );
            }
        }
    }
}
```
ほぼほぼFlutterライクに書けました🎯

## 実行結果
次のように、カウンターアプリが表示されました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Unityで神アプリを作ってた➕<a href="https://t.co/7BZSsfR611">https://t.co/7BZSsfR611</a> <a href="https://t.co/4ptGKbKNyz">pic.twitter.com/4ptGKbKNyz</a></p>&mdash; うぇるち🐶 (@welchi_) <a href="https://twitter.com/welchi_/status/1292024355883425792?ref_src=twsrc%5Etfw">August 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 参考
[UnityTech/UIWidgets: UIWidget is a Unity Package which helps developers to create, debug and deploy efficient, cross-platform Apps.]( https://github.com/UnityTech/UIWidgets )
[Unity - Manual: Platform dependent compilation]( https://docs.unity3d.com/Manual/PlatformDependentCompilation.html )