Flutterで美しいUIを作成する

FlutterにはUIを強化するために特に使えるさまざまなパッケージがあります。このブログでは、素敵なUIを作るために私がよく使っているパッケージをいくつか紹介します。

ローディングアニメーションパッケージ

1: loading_animation_widget: ローディングアニメーションウィジェットは、従来のサーキュラープログレスバーの代わりに使用できるアニメーションローダーを提供します。

loading animation widget

2: shimmer: 特にAndroidユーザーに人気のローダーにshimmerがあります。shimmerパッケージは、シンプルにシマー効果を実装できる方法を提供します。

shimmer

3: loader_overlay: もしローディング中にUIの操作をブロックしたいのなら、このパッケージがピッタリです!

loader overlay

ドロワーウィジェット

1: Fluttergemsのドロワーリスト: Flutterで利用可能な多くのドロワーパッケージをまとめたリストが含まれています。

ボディ部分のUIウィジェット

1: getx: getは主にステート管理に使われますが、トースター、スナックバー、ダイアログボックス、アラートダイアログ、ボトムモーダルシートなどの基本ウィジェットも提供しています。これらのウィジェットを1つのウィジェットにラップして、ほとんどの場合、コードを1行か2行追加するだけで使えるようにしています。

2: carousel_slider: アニメーション遷移で画像リストをショーケースしたいなら、このパッケージがピッタリです!特にウェブのバックグラウンドから来た人にはとても似ています。

carousel

3: Font AwesomeGoogle Fonts: 各フォントを個別に追加するのに疲れたり、カスタムフォントを使うのに似たプロセスが必要なら、Font AwesomeやGoogle Fontsパッケージが直接TextStyleウィジェットで使用できる多数のフォントを無料で提供しています!

4: fluent_ui: 現在FlutterではWindowsアプリも作成できるようになったので、Fluent UIはAndroid用のMaterial UIやiOS用のCupertino UIと同様に、Windows特有のUIウィジェットを提供しており、Windowsに限らず使用することができます!

fluent ui

ボトムナビゲーションバーパッケージ

1: animated_bottom_navigation_bar: 私がこれまで出会ったベストのボトムナビゲーションバーの一つで、アニメーションナビゲーションと多くのカスタマイズオプションを提供します。

animated bottom navbar

2: persistent_bottom_nav_bar: よく使われるボトムナビゲーションバーで、シンプルなデザインと使いやすさ、カスタマイズ性を提供します。

persistent navbar

これらのパッケージは役立つものではありますが、使用する価値はユースケースに依存し、それはコア機能によって異なります。

以下に追加のリソースをいくつか紹介します: