【Flutter】AnimatedContainer|Containerにアニメーションを実装

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

AnimatedContainerを使えばContainer にアニメーションを実装できます。

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

目次

AnimatedContainerの使い方

//bool selected = false;

child: GestureDetector(
  onTap: (() => setState(() {
        selected = !selected;
      })),
  child: AnimatedContainer(
    height: selected ? 150 : 100,
    width: selected ? 150 : 100,
    color: selected ? Colors.orange : Colors.yellow,
    alignment: selected ? Alignment.bottomRight : Alignment.center,
    duration: Duration(seconds: 1),
    child: FlutterLogo(size: 50),
  ),
),

StatefulWidgetAnimatedContainer で使用するプロパティを定義し、AnimatedContainerduration でアニメーション時間を指定します。

上記コードではAnimatedContainerGestureDetector でラップし、クリックされたらsetStateでプロパティの値を更新しています。(全体のコードは記事下)

Curveでアニメーションにエフェクトをつける

GestureDetector(
  onTap: (() => setState(() {
        selected = !selected;
      })),
  child: AnimatedContainer(
    width: selected ? 150 : 100,
    height: selected ? 150 : 100,
    color: selected ? Colors.orange : Colors.yellow,
    alignment: selected ? Alignment.bottomRight : Alignment.center,
    duration: Duration(seconds: 1),
    child: FlutterLogo(size: 50),
    curve: Curves.bounceIn, // <- ここ
  ),
),

curve の引数にCurves を渡してアニメーションに複雑なエフェクトを追加できます。

サンプルコード

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: GestureDetector(
            onTap: (() => setState(() {
                  selected = !selected;
                })),
            child: AnimatedContainer(
              width: selected ? 150 : 100,
              height: selected ? 150 : 100,
              color: selected ? Colors.orange : Colors.yellow,
              alignment: selected ? Alignment.bottomRight : Alignment.center,
              duration: Duration(seconds: 1),
              child: FlutterLogo(size: 50),
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

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