Flutterでフェードイン/フェードアウトする
初めましてblueです。
現在、ITベンチャー企業でWEBキャンペーンシステムの運用並びに要件定義、ECサイトの開発を行なっています。
今回はFlutterでフェードイン/フェードアウトする方法について記事にしてみました!
使用するメソッド
実装コード
AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 500),
child: const FlutterLogo(),
),
opacity:透明度の設定。0.0(非表示)から1.0(完全に表示)までの値。
duration:アニメーションが完了するまでにかかる時間。
_visibleはtrue,falseを渡していて、三項演算子で書いています。
childには、フェードイン/フェードアウトをさせたい内容を記載
全体コード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _visible = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('フェイドイン/フェイドアウト'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 500),
child: const FlutterLogo(),
),
ElevatedButton(
child: const Text('Fade Logo'),
onPressed: (){
setState(() {
_visible = !_visible;
});
}
),
],
),
)
);
}
}
実装画面
良かったらサポートしていただけると嬉しいです!