パッケージを使った簡単&プロ級アニメーション!
比喩で言うと: 料理で言うレトルト食品。自分で一から作るより、既製品を使った方が早くて美味しい! 🍱
目次
主要なアニメーションパッケージ
| Lottie | プロ級アニメーション、JSON形式 |
| Rive | インタラクティブ、ゲーム風 |
| shimmer | ローディング効果(キラキラ) |
| animated_text_kit | テキストアニメーション |
| flutter_spinkit | ローディングスピナー |
Lottie と shimmerは一番使えるらしい!
Lottie – プロ級アニメーション!
Lottieは、Adobe After Effects で作ったアニメーションをそのまま使えるパッケージ!
https://lottiefiles.com/
https://lottie.airbnb.tech/#/supported-features
特徴:
✅ プロが作ったアニメーション
✅ 無料で大量にある
✅ ファイルサイズが小さい
✅ 超簡単に使える
比喩: YouTubeのようなもの。プロの動画を自分のアプリで再生できる! 🎥
🎨 Lottie のインストール
pubspec.yaml
dependencies:
flutter:
sdk: flutter
lottie: ^3.0.0🎨 Lottie の使い方
ステップ1: アニメーションを探す
LottieFiles で無料アニメーションを探す:
https://lottiefiles.com
人気カテゴリ:
ローディング(スピナー、進行状況)
成功/失敗(チェックマーク、×マーク)
空の状態(データなし)
祝福(紙吹雪、花火)
エモーション(笑顔、悲しい顔)
ステップ2: ダウンロード
好きなアニメーションを見つける
「Download」ボタン
「Lottie JSON」 を選択
assets/lottie/ フォルダに保存
ステップ3: pubspec.yaml に追加
flutter:
assets:
- assets/lottie/loading.json
- assets/lottie/success.json
- assets/lottie/empty.jsonステップ4: コードで使う
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class LottieDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Lottie Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ========================================
// Lottie アニメーション
// ========================================
Lottie.asset(
'assets/lottie/loading.json',
width: 200,
height: 200,
fit: BoxFit.fill,
),
SizedBox(height: 20),
Text('読み込み中...'),
],
),
),
);
}
}たったこれだけ! 😊
実践例1: ローディング画面
class LoadingScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ローディングアニメーション
Lottie.asset(
'assets/lottie/loading.json',
width: 150,
height: 150,
),
SizedBox(height: 16),
Text(
'生徒データを読み込み中...',
style: TextStyle(fontSize: 16, color: Colors.grey),
),
],
),
),
);
}
}実践例2: 成功/失敗アニメーション
class PaymentResultScreen extends StatefulWidget {
final bool isSuccess;
const PaymentResultScreen({required this.isSuccess});
@override
_PaymentResultScreenState createState() => _PaymentResultScreenState();
}
class _PaymentResultScreenState extends State<PaymentResultScreen>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('支払い結果')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ========================================
// 成功 or 失敗アニメーション
// ========================================
Lottie.asset(
widget.isSuccess
? 'assets/lottie/success.json' // チェックマーク
: 'assets/lottie/error.json', // ×マーク
width: 200,
height: 200,
controller: _controller,
onLoaded: (composition) {
// ロード完了後、一度だけ再生
_controller.duration = composition.duration;
_controller.forward();
},
),
SizedBox(height: 24),
Text(
widget.isSuccess ? '支払い完了!' : '支払い失敗',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: widget.isSuccess ? Colors.green : Colors.red,
),
),
SizedBox(height: 40),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('戻る'),
),
],
),
),
);
}
}実践例3: 空の状態(データなし)
class EmptyStateWidget extends StatelessWidget {
final String message;
const EmptyStateWidget({
this.message = 'データがありません',
});
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 空の状態アニメーション
Lottie.asset(
'assets/lottie/empty_box.json',
width: 250,
height: 250,
),
SizedBox(height: 16),
Text(
message,
style: TextStyle(fontSize: 18, color: Colors.grey[600]),
),
SizedBox(height: 24),
ElevatedButton.icon(
icon: Icon(Icons.add),
label: Text('追加する'),
onPressed: () {
// 追加画面へ
},
),
],
),
);
}
}
// 使い方
students.isEmpty
? EmptyStateWidget(message: '生徒がいません')
: ListView.builder(...)Lottie の細かい制御
class ControlledLottie extends StatefulWidget {
@override
_ControlledLottieState createState() => _ControlledLottieState();
}
class _ControlledLottieState extends State<ControlledLottie>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Lottie.asset(
'assets/lottie/animation.json',
controller: _controller,
onLoaded: (composition) {
_controller.duration = composition.duration;
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 再生
IconButton(
icon: Icon(Icons.play_arrow),
onPressed: () => _controller.forward(),
),
// 一時停止
IconButton(
icon: Icon(Icons.pause),
onPressed: () => _controller.stop(),
),
// リセット
IconButton(
icon: Icon(Icons.refresh),
onPressed: () => _controller.reset(),
),
// 繰り返し
IconButton(
icon: Icon(Icons.repeat),
onPressed: () => _controller.repeat(),
),
],
),
],
);
}
}🌐 ネットワークから直接読み込む
// URL から直接読み込み
Lottie.network(
'https://assets2.lottiefiles.com/packages/lf20_xxxxxxxx.json',
width: 200,
height: 200,
)注意: ネットワークから読み込むと遅い。できれば assets に保存する!
shimmer – ローディング効果
shimmerは、キラキラ光るローディング効果を簡単に作れるパッケージ!
https://pub.dev/packages/shimmer
ピカピカ光って目立つ! ✨
よく見る場所:
- YouTube
- ほぼ全てのアプリ
shimmer のインストール
dependencies:
shimmer: ^3.0.0shimmer の使い方
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
class ShimmerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Shimmer Demo')),
body: ListView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return Shimmer.fromColors(
baseColor: Colors.grey[300]!, // 基本色
highlightColor: Colors.grey[100]!, // ハイライト色
child: ListTile(
leading: CircleAvatar(
radius: 25,
backgroundColor: Colors.white,
),
title: Container(
height: 16,
width: 200,
color: Colors.white,
),
subtitle: Container(
height: 14,
width: 150,
color: Colors.white,
margin: EdgeInsets.only(top: 8),
),
),
);
},
),
);
}
}効果: リストがキラキラ光る! ✨ → 白
その他便利なパッケージ
flutter_spinkit – ローディングスピナー
dependencies:
flutter_spinkit: ^5.2.0import 'package:flutter_spinkit/flutter_spinkit.dart';
// 色々なスピナー
SpinKitRotatingCircle(color: Colors.blue, size: 50.0)
SpinKitFadingCircle(color: Colors.blue, size: 50.0)
SpinKitWave(color: Colors.blue, size: 50.0)
SpinKitPulse(color: Colors.blue, size: 50.0)
SpinKitDoubleBounce(color: Colors.blue, size: 50.0)
SpinKitRing(color: Colors.blue, size: 50.0)30種類以上のスピナー! 簡単に使える!
animated_text_kit – テキストアニメーション
dependencies:
animated_text_kit: ^4.2.2import 'package:animated_text_kit/animated_text_kit.dart';
// タイプライター効果
AnimatedTextKit(
animatedTexts: [
TypewriterAnimatedText(
'Hello World',
textStyle: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
speed: Duration(milliseconds: 100),
),
],
)
// フェードイン
AnimatedTextKit(
animatedTexts: [
FadeAnimatedText(
'Welcome!',
textStyle: TextStyle(fontSize: 32),
),
],
)
// 回転
AnimatedTextKit(
animatedTexts: [
RotateAnimatedText('AWESOME'),
RotateAnimatedText('OPTIMISTIC'),
RotateAnimatedText('DIFFERENT'),
],
)それぞれが独立して移動・拡大! まるでパズルのピースが組み替わるような動き! 🧩
パッケージ比較表
| パッケージ | 用途 | 難易度 | ファイルサイズ |
|---|---|---|---|
| Lottie | プロ級アニメーション | ⭐⭐ | 小 |
| shimmer | ローディング効果 | ⭐ | 極小 |
| flutter_spinkit | スピナー | ⭐ | 小 |
| animated_text_kit | テキスト | ⭐ | 小 |
| Rive | インタラクティブ | ⭐⭐⭐ | 中 |
コツ
アニメーションは適度に
// ❌ やりすぎ
- ローディング: Lottie
- 成功: Lottie
- 失敗: Lottie
- 空の状態: Lottie
- ボタン: アニメーション
- リスト: shimmer
→ アプリが重くなる!
// ✅ 適度
- ローディング: shimmer (軽い!)
- 成功/失敗: Lottie (目立つ場面だけ)
- 空の状態: シンプルなアイコン
- ボタン: 標準のアニメーションファイルサイズに注意
// Lottie ファイルサイズ
小さい: < 50KB ✅ OK
中くらい: 50-200KB ⚠️ 注意
大きい: > 200KB ❌ 避けるLottieFiles で “Lightweight” を選ぶ!
dispose を忘れずに
// AnimationController を使う場合
late AnimationController _controller;
@override
void dispose() {
_controller.dispose(); // 必須!
super.dispose();
}まとめ: アニメーションパッケージ
おすすめパッケージ:
Lottie ⭐⭐⭐⭐⭐
- プロ級アニメーション
- LottieFiles で無料ダウンロード
- 成功/失敗/空の状態に最適
shimmer ⭐⭐⭐⭐⭐
- ローディング効果
- 超軽量
- スケルトンスクリーンに最適
flutter_spinkit ⭐⭐⭐⭐
- ローディングスピナー
- 30種類以上
- 簡単
使い分け
| データ読み込み中 | shimmer |
| 処理中(待機) | flutter_spinkit |
| 成功/失敗 | Lottie |
| 空の状態 | Lottie |
| テキスト演出 | animated_text_kit |
一言まとめ:
アニメーションパッケージでプロ級の見た目が簡単に!
Lottieでプロのアニメーション、shimmerでローディング効果。
LottieFiles から無料ダウンロード。
適度に使って、ユーザー体験向上!
ファイルサイズに注意!
