【Flutter】AnimatedOpacity|透明度をアニメーションで徐々に変化

今回はAnimatedOpacity の基本的な使い方を紹介します。

AnimatedOpacity を使えば指定したWidgetの透明度をアニメーションで徐々に変化できます。単にWidgetの透明度を変えるだけならOpacityを使用します。

\ 世界最大級のオンライン学習サービス /

目次

AnimatedOpacityの使い方

AnimatedOpacity(
  child: FlutterLogo(size: 150),
  duration: Duration(seconds: 2),
  opacity: opacityLevel, //setStateで値を変更
),

child で透明度を調整したいWidgetを指定し、duration でアニメーションの時間、opacity で透明度を指定します。

opacityの値はsetState三項演算子などを使って変化させます。

サンプルコード

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  var opacityLevel = 0.1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterZero'),
        ),
        body: Center(
          child: GestureDetector(
            child: AnimatedOpacity(
              child: FlutterLogo(size: 150),
              duration: Duration(seconds: 2),
              opacity: opacityLevel,
            ),
            onTap: () => setState(
              () => opacityLevel = opacityLevel == 0.3 ? 1 : 0.3,
            ),
          ),
        ),
      ),
    );
  }
}

上記コードではAnimatedOpacityGestureDetector でラップし、setState で三項演算子を使いopacityLevel を変化させています。

一緒に読みたい

参考

  • URLをコピーしました!
目次