Googleさん公式Youtube「Widget of the Week」で紹介されている、
ウィジェットのサンプル集第7弾は FadeTransition です!
FadeTransition ってなに?
FadeTransitionとは、直訳すると「うっすら遷移する」であり、
簡単にフェードイン&フェードアウトをが実装できるウィジェットです\_(・ω・`)ココ重要!
公式からの説明は以下の通り。
Flutter の比較的強力なアニメーションを使う必要はなく、シンプルなトランジションを単にお求めでしたら、FadeTransition ウィジェットをお試しください。FadeTransition で、より簡単にウィジェットをフェードイン/アウトすることができ、Flutter アプリに直接すぐに落とし込むことができます。
公式Youtubeより引用
公式の動画で概要を把握
まずは1分程度の公式の動画「Widget of the Week」で概要を把握しましょう!
概要をなんとなく把握できたところで、
早速サンプルコードを見ていきましょう(∩’-‘⊂)シュッ
Sample Code
コピペで動くサンプルコードの紹介です!
FadeTrandition
import 'package:flutter/material.dart'; | |
void main() => runApp(const MyApp()); | |
class MyApp extends StatelessWidget { | |
const MyApp({Key? key}) : super(key: key); | |
static const String _title = 'Flutter Code Sample'; | |
@override | |
Widget build(BuildContext context) { | |
return const MaterialApp( | |
title: _title, | |
home: MyStatefulWidget(), | |
); | |
} | |
} | |
class MyStatefulWidget extends StatefulWidget { | |
const MyStatefulWidget({Key? key}) : super(key: key); | |
@override | |
State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); | |
} | |
/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin. | |
class _MyStatefulWidgetState extends State<MyStatefulWidget> | |
with TickerProviderStateMixin { | |
late final AnimationController _controller = AnimationController( | |
duration: const Duration(seconds: 2), | |
vsync: this, | |
)..repeat(reverse: true); | |
late final Animation<double> _animation = CurvedAnimation( | |
parent: _controller, | |
curve: Curves.easeIn, | |
); | |
@override | |
void dispose() { | |
_controller.dispose(); | |
super.dispose(); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar( | |
title: Text('【Flutter#7】FadeTransition'), | |
), | |
body: Center( | |
child: FadeTransition( | |
opacity: _animation, | |
child: FlutterLogo( | |
size: 300, | |
textColor: Colors.blue, | |
style: FlutterLogoStyle.stacked), | |
), | |
) | |
); | |
} | |
} |
・構造をざっくり解説!!
FadeTranditionウィジェット内の
あとがき
お疲れ様でした!
これで簡単なフェイドアウト&フェイドインマスターですね(∩’-‘⊂)シュッ
次回は FloatingActionButton (FAB) の紹介です!
それでは次の記事で会いましょう!