【Flutter】アプリのUIをかっこよくする10のpackageたち
株式会社GENDA モバイル開発部の名取です。
この記事は GENDA Advent Calendar 2025 シリーズ2 Day 11 の記事です。
概要
この記事ではFlutterアプリ開発において、UIを洗練させるために個人的におすすめなpackageを10個厳選して紹介します。
Claude Codeをはじめとするエージェント型のコーディングツールが普及し個人開発を行う方も増えてきたと思います。私もその一人ですが、エンジニアが一人でアプリ開発を行うとどうしてもUIが質素になりがちです。
FlutterにはUIをリッチにする素晴らしいpackageがたくさんあるので私が個人開発で使用しているものを中心にご紹介できればと思います。
1. dotlottie_loader
lottieアニメーションを再生するためのpacakgeです。
公式サイトには数多くの無料で使えるアニメーションが用意されています。lottieアニメーションを自作できなくても、アプリにマッチするアニメーションがあると思うので気になる方は探してみて下さい！
こんな感じで滑らかなアニメーションが要所要所で表示されるだけでアプリ全体のクオリティが上がると思います。
ちなみに、lottieアニメーションを再生するpackageだと下記がメジャーですが、.json よりも .lottie の方が軽量でロードがはやいなどの特徴があるため .lottie 形式のアニメーションを好んで使用しています。
2. table_calender
リッチなカレンダー画面を手軽に実装できるpackageです。
使用場面は限定されますが、カレンダー要素のあるアプリでは非常に効果的なpackageです。
スワイプジェスチャーで日付ごとのリストが伸縮し動きも滑らかです。
カスタマイズ性に富んでおり使い勝手が良いのが特徴的で開発中のアプリでも使っているので今回ご紹介いたしました。
3. google_fonts
Google Fontsを使用するためのpackageです。
このパッケージの最大のメリットはアセット管理不要でいろんな種類のフォントが使えることです。
ttfなどのファイルは不要で下記の1行で好きなフォントを適用できます。
Text('Hello', style: GoogleFonts.lobster())
アプリのバイナリが軽量になるのは勿論、Google Fontsは全てオープンライセンスなので使いやすい点もポイントが高いです。
4. tutorial_coach_mark
リッチなチュートリアルを手軽に実装するためのpackageです。
個人開発などデザイナーなしでアプリ開発をする場合、かっこいいチュートリアル画像の作成がむずかしかったりしますが、このpackageを使うとインタラクティブなチュートリアルが実装できます。
5. animated_text_kit
テキストアニメーションpackageです。
ユーザーの注目を集めたい箇所や、待機時間を楽しくしたい場面で効果的です。
最近だとAIやボットの「入力中...」の演出にも使えると思います。
6. loading_animation_widget
ローディングを手軽にリッチに表現するpackageです。
ローディングがないアプリはないといっても過言ではないと思いますが、Flutter標準のローディングだとどうしても味気ない感じになるのでローディングを少しいじるだけでもアプリがかっこよくなると思います。
7. fl_chart
様々なチャートを見栄えよく表示するためのpackageです。
使用場面は限定的ですが、金融系のアプリやフィットネスアプリ、ダッシュボード画面などでは積極的に使用したいpackageです。
Line, Bar, Pie, Scatter, Radarなど豊富なチャートタイプに加えタッチ操作可能、アニメーション対応などが備わっています。
8. flutter_animate
アニメーションの記述を簡潔に記述するためのpackageです。
標準FlutterのAnimationControllerでできることほぼ一緒ですが記述が段違いにシンプルにできます。
フェードアウト + スケールアニメーション
下記のようなアニメーションを実装する際のコードを比較してみましょう。
flutter_animateなし
class HeartBurstWidget extends StatefulWidget {
const HeartBurstWidget({super.key});
State<HeartBurstWidget> createState() => _HeartBurstWidgetState();
}
class _HeartBurstWidgetState extends State<HeartBurstWidget>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _scaleAnimation;
late Animation<double> _fadeAnimation;
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
_scaleAnimation = Tween<double>(begin: 1.0, end: 1.5).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeOut),
);
_fadeAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeOut),
);
_controller.forward(); // 1回のみ実行
}
void dispose() {
_controller.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Opacity(
opacity: _fadeAnimation.value,
child: Transform.scale(
scale: _scaleAnimation.value,
child: child,
),
);
},
child: const Icon(Icons.favorite, size: 64, color: Colors.red),
);
}
}
flutter_animateあり
const Icon(Icons.favorite, size: 64, color: Colors.red)
.animate()
.scale(
begin: const Offset(1.0, 1.0),
end: const Offset(1.5, 1.5),
duration: 500.ms,
curve: Curves.easeOut,
)
.fadeOut(
begin: 1.0,
duration: 500.ms,
curve: Curves.easeOut,
)
9. heroine
ヒーロートランジションを実現するためのpackageです。Instagramなどでお馴染みのあのUIを手軽に実装できます。
Flutter標準でもヒーロートランジションは可能ですがドラッグして閉じたりなどカスタマイズ性に優れているのが特徴です。
フォトギャラリーやECサイトのようなアプリでは効果的かと思います。
10. flutter_slidable
リストアイテムを左右にスワイプして、削除・編集・共有などのアクションボタンを表示できるpackageです。iOSのメールアプリやLINEのトーク削除のような操作を簡単に実装できます。
スワイプで削除のみであればDismissibleで実現できますが複数アクションボタンの設置や左右で異なるアクションを実装するにはflutter_slidableが有用です。
TODOアプリなどを開発する際はぜひ使用を検討したいpackageです！
まとめ
挙げたらキリがないくらい素晴らしいpackageがたくさんあります。
AIはもちろん、これらのpackageもうまく活用して素晴らしいアプリを作っていきたいですね！
Discussion
まとめてくださりありがとうございます！
使ってみたいのたくさんあって、どれにしようか迷います。