【Flutter】nikuというライブラリを利用できるか調査して気づいた4個のこと

2022 6/07

2022.03.03 2022.06.07

こんにちは、株式会社Pentagonでアプリ開発をしている石渡港です。

今回はnikuというライブラリを利用できるか調査して、気づいた4個のことについてまとめました。

その結果、弊社としては利用し難いライブラリであることがわかりました。

【この記事を読むメリット】

nikuについてざっくり理解できる

【こんな方に参考にしていただきたい】

nikuが気になっているFlutterエンジニア

【調査の動機】

RSS上でnikuというライブラリを見て面白いと思い興味本位で調べました。

【調査結果】

一般的なWidgetを利用しているアプリであればコーディングしやすそうです。
弊社でよく使うhooks_riverpodのConsumerをカスタム化できませんでした。
Androidで利用できる範囲が狭いと思います。

【結論】

今回は、nikuとは、利用環境、一般的なWidgetの利用例、nikuカスタム化で気をつけたいことの4つにまとめました。

nikuとは

https://v2.niku.saltyaom.com/

なるべくネストを減らしてUIを表現するライブラリで、ドットカスケードを利用してUIを表現します。

Flutterで利用する基本的なWidgetはnikuカスタムで用意されています。

利用環境

AndroidはAPI31以降推奨

利用バージョン

niku 2.0.0

一般的なWidgetの利用例

通常の書き方

Text(
     'test',
     style: TextStyle(
     fontSize: 16,
     color: Colors.red,
     fontWeight: FontWeight.bold,
     ),
),

nikuの書き方

n.Text('test')
..fontSize = 16
..color = Colors.red
..bold,

例に出したのはTextです。通常の書き方の場合は8行必要ですが、nikuの書き方の場合は4行で済みます。

また、必要なプロパティはすべて用意されているため、TextStyleの部分を省略して記述できます。

nikuカスタム化で気をつけたいこと

今回、hooks_riverpodで利用するWidgetをカスタム化してniku形式で利用しようと、下記のソースコードを作成しました。

class NikuConsumer extends Consumer
    with NikuBuildMacro, UseQueryMacro<NikuConsumer> {
  NikuConsumer(this.customBuilder) : super(builder: customBuilder);
  final ConsumerBuilder customBuilder;
}

作成途中ですが問題が発生しており、ConsumerとNikuBuildMacroのbuilderが競合し、カスタム化することが難しいのがわかりました。そのため、builder というプロパティがあると利用できないです。

まとめ

nikuではネストを減らして、ドットカスケードで簡単にUIを作成できます。

nikuを使うときの注意点としては以下の2つです。

Androidのビルドバージョンに気をつける必要がある
nikuカスタムの利用時にbuilder があるクラスが利用できない

今後、簡単なUIやロジックのアプリを作る際にnikuを利用してみたいと思います。