【Flutter：AnimatedOpacityウィジェット】opacity変更時にいい感じのアニメーションをつけてくれるAnimatedOpacityウィジェット

こんにちは。ゆうきです。
現在製作中のチャットアプリで、画像がフェードインしてくるアニメーションを実装したくて、調べていたところ、AnimatedOpacityといういい感じのWidgetを見つけたので、その使い方を残しておこうと思います。

まずはどんな感じかサンプルをどうぞ

AnimatedOpacityとは
AnimatedOpacityの使い方

AnimatedOpacityとは

AnimatedOpacityとはその名の通り、子WidgetのOpacity(透明度)を変化させる際にアニメーションをつける為のWidgetです。
アニメーションの時間を設定しておくだけで、setStateでopacityが書き換えられた際に指定した秒数でいい感じにアニメーションをつけてくれます。

CSSでいうところのtransitionのようなものと考えるとわかりやすいかと思います。

AnimatedOpacityの使い方

それではAnimatedOpacityウィジェットの使い方を解説していきます。
使い方はすごくシンプルで、AnimatedOpacityウィジェットに以下３つのプロパティを指定するだけです。

opacityプロパティ：アニメーションで最終的に設定されるopacityの値
durationプロパティ：アニメーションを行う時間
childプロパティ：アニメーションを適用するWidget

具体的にはこんな感じ

AnimatedOpacity(
  // 事前に定義していた変数を指定
  opacity: _opacity,
  // アニメーションの時間を指定
  duration: const Duration(milliseconds: 500),
  // アニメーションを適用するWidgetをchildに入れる
  child: Text(
    'このWidgetがアニメーションするよ',
    style: Theme.of(context).textTheme.headline6,
  ),
),

手元で動かせるようにmain.dartのサンプルコードも書いたので、自分で書くのが面倒な方は下のサンプルコードコピペでお手元で試してみてください。

それではまた〜

// サンプルコード
// 右下のボタンクリックでアニメーションするよ
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SamplePage(title: 'AnimatedOpacity Demo'),
    );
  }
}

class SamplePage extends StatefulWidget {
  const SamplePage({super.key, required this.title});
  final String title;

  @override
  State<SamplePage> createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  // opacityの値を格納する
  double _opacity = 1.0;

  void _changeOpacity() {
    // opacityの値を1.0と0で入れ替える
    setState(() {
      _opacity = _opacity == 1.0 ? 0 : 1.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Change Opacity.',
            ),
            AnimatedOpacity(
              opacity: _opacity,
              duration: const Duration(milliseconds: 500),
              child: Text(
                'このWidgetがアニメーションするよ',
                style: Theme.of(context).textTheme.headline6,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _changeOpacity,
        child: const Icon(Icons.change_circle),
      ),
    );
  }
}

AnimatedOpacityとは

AnimatedOpacityの使い方

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル