【Flutter】AnimatedOpacityの使い方｜透明度をアニメーションで変更

2023年1月4日2023年1月13日

こんにちは、フラメルです。

今回は任意のウィジェットの透明度をアニメーションで徐々に変更できるAnimatedOpacityの使い方を紹介します。

アニメーションで透明度を徐々に変更する方法

アニメーションで透明度を変更したいウィジェットをAnimatedOpacityでラップし、opacityで透明度(double型)、durationでアニメーションの時間を指定します。

opacityで指定した透明度が変わるとアニメーションが開始されます。記事下のサンプルコードを参考にしてみてください。

AnimatedOpacity(
  opacity: opacityLevel,
  duration: Duration(seconds: 2),
  child: FlutterLogo(size: 150),
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double opacityLevel = 1.0;

  void _changeOpacity() {
    setState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedOpacity(
                opacity: opacityLevel,
                duration: Duration(seconds: 2),
                child: FlutterLogo(size: 150),
              ),
              ElevatedButton(
                onPressed: _changeOpacity,
                child: Text('Fade Logo'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

以上です。

【Flutter】AnimatedOpacityの使い方｜透明度をアニメーションで変更

アニメーションで透明度を徐々に変更する方法

サンプルコード

合わせて読みたい