FlutterでBolb + アニメーションが簡単でおしゃれな件

前書き

こんにちは。バーチャルエンジニアの源上エイラです。
今回はFlutterでBlob(アメーバのようなもわもわしてるやつ)を簡単に表示できるライブブラリを見つけたので紹介させていただきます。

それでは以下本文です。

Blobs

今回使用するライブラリは以下になります。

blobs | Flutter Package

以下のように「pubspec.yml」にパッケージを追加して、

dependencies:
 flutter:
   sdk: flutter
 blobs: ^1.2.0

公式サイトのExampleをそのまま貼り付けて起動してみます。

画面中央下の「Randomize」と表示されているボタンをタップすると
ランダムにBlobの形状が変化します。

しかしこのままだと自分好みのBlobの形状で表示させることができません。
そこでGenerate blobsというサイトを使って、自分好みの形状、色を見つけたいと思います。

Blobs - Generate beautiful blob shapes for web and flutter apps

以下のように自分好みの形状、色に調整することができ、
すごいことにFlutter用のコードまで生成することができます。

生成されたコードをもとに、少し手を加えた結果がこちら↓

いい感じのトップ画面ができました。
しかしこのままでは少し寂しいので、Blobの上にアニメーションを置いてもっとおしゃれにしてみようと思います。

Lottie

今回はアニメーションを簡単にFlutterに表示できるライブラリの
Lottieを使用してみます。

lottie | Flutter Package

サイトに載っているExampleのコードをそのまま持ってきて、
Blobの上に被せてみます。

Youtue以外の動画の埋め込み方法が分からなかったので、記事内でアニメーションが動く様をお見せできないのが悔やまれますが、めちゃくちゃおしゃれになりました。

簡単にアニメーションを導入できるLottieはこの先重宝しそうです。
他の無料で使えるアニメーションは以下のサイトに掲載されていますので、
そちらもご参照ください。


https://lottiefiles.com/

それではまた。

源上エイラ(妹)