Zenn
💭

【Flutter】『fab_circular_menu』でアプリUIを１ランク上げよう↗️

2023/02/08に公開
Flutter
#
fabcircularmenu
tech

パッケージ『fab_circular_menu』を使うとイカしたUIになる！？

パッケージ『fab_circular_menu』を利用してアプリ内UIを少しいい感じにしてみました！
下の画像は私がリリースしている某サッカー漫画のクイズアプリ📱のUI画像になります。

下記からインストールしてみて触ってみてくださると嬉しいです。
（アプリのユーザーからもカッコいい💖とのお言葉を結構もらっています✨）
📱iOS：https://apps.apple.com/jp/app/blue-lock-quiz/id1635039927
📱Android：https://play.google.com/store/apps/details?id=com.shun.bl_quiz2

パッケージ『fab_circular_menu』の導入

カラーピッカーのUIを実装する為、
下記コードをVScodeのターミナルへコピペしてエンターキーを押下する

$ flutter pub add fab_circular_menu

https://pub.dev/packages/fab_circular_menu

『fab_circular_menu』の使用方法

floatingActionButtonに、FabCircularMenuwidgetを指定する

floatingActionButton: FabCircularMenu(
          children: <Widget>[
            IconButton(icon: Icon(Icons.home), onPressed: () {
              print('Home');
            }),
            IconButton(icon: Icon(Icons.favorite), onPressed: () {
              print('Favorite');
            })
          ]
        )

Discussion