【Flutter】Widget of the Week #7 FadeTransition

【Flutter】Widget of the Week #7 FadeTransition

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ウィジェット内のchildにアニメーションさせたいウィジェットを配置し、
opacityプロパティに①と②で設定したアニメーションを配置します。

あとがき

お疲れ様でした!
これで簡単なフェイドアウト&フェイドインマスターですね(∩’-‘⊂)シュッ

次回は FloatingActionButton (FAB) の紹介です!
それでは次の記事で会いましょう!

Flutterカテゴリの最新記事

Buy Me A Coffee