【Flutter】AnimatedContainerの使い方

今回はAnimatedContaienrの使い方について解説していきます。

対象読者

○Flutter初学者
○AnimatedContainerの基本的な使い方を学びたい人

上記の方におすすめです。
では、解説していきます。

公式

公式ドキュメント

公式Youtube

AnimatedContainerとは

AnimatedContainerは名前の通り、アニメーションをつけることができるContainerです。アニメーションの長さ（duration）を指定するだけで簡単にアニメーションがあるContainerを作成することができます。

例えば、色を変更したい場合は、

main.dart

class _AnimatedContainerPage extends State<AnimatedContainerPage> {
  bool _backgroundColor = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _backgroundColor = !_backgroundColor;
            });
          },
          child: AnimatedContainer(
            width: 100,
            height: 100,
          // _backgroundColorがtrueの時は背景色を赤色に、falseの場合は青色
            color: _backgroundColor == true ? Colors.red : Colors.blue,
          // アニメーションの時間。今回は1秒。
            duration: const Duration(seconds: 1),
            child: const FlutterLogo(size: 75),
          ),
        ),
      ),
    );
  }
}

上記の例では、Container自体をタップした時に、宣言しておいた_backgroundColorのbool値を変化させ、背景色を変更しています。普通のContainerを指定した場合は、瞬時に色が切り替わりますが、AnimatedContainerでアニメーションの長さ(duration)を指定することによって、なめらかに色を変更することができるようになります。

アニメーションの種類

AnimatedContainerは基本的なContainerにアニメーションの長さ（duration）が追加されたのに加え、アニメーションの種類も選択することができます。デフォルトではlinear(等速で変化)が指定されています。

ここではいくつかアニメーションの種類を紹介します。

○bounceIn

AnimatedContainer(
            width: _backgroundColor == true ? 200 : 100,
            height: _backgroundColor == true ? 200 : 100,
            color: _backgroundColor == true ? Colors.red : Colors.blue,
          // bounceInを指定
            curve: Curves.bounceIn,
            duration: const Duration(seconds: 1),
            child: const FlutterLogo(size: 75),
          ),

○easeInCirc

AnimatedContainer(
            width: _backgroundColor == true ? 200 : 100,
            height: _backgroundColor == true ? 200 : 100,
            color: _backgroundColor == true ? Colors.red : Colors.blue,
            curve: Curves.easeInCirc,
            duration: const Duration(seconds: 1),
            child: const FlutterLogo(size: 75),
          ),

○elasticIn

AnimatedContainer(
            width: _backgroundColor == true ? 200 : 100,
            height: _backgroundColor == true ? 200 : 100,
            color: _backgroundColor == true ? Colors.red : Colors.blue,
            curve: Curves.elasticIn,
            duration: const Duration(seconds: 1),
            child: const FlutterLogo(size: 75),
          ),

○slowMiddle

AnimatedContainer(
            width: _backgroundColor == true ? 200 : 100,
            height: _backgroundColor == true ? 200 : 100,
            color: _backgroundColor == true ? Colors.red : Colors.blue,
            curve: Curves.slowMiddle,
            duration: const Duration(seconds: 1),
            child: const FlutterLogo(size: 75),
          ),

他にもたくさんのアニメーションのがあるみたいです。

作ってみた

AnimatedContainer(
            width: _changeContainer == true ? 200 : 10,
            height: _changeContainer == true ? 200 : 10,
            decoration: BoxDecoration(
              shape: _changeContainer == true
                  ? BoxShape.circle
                  : BoxShape.rectangle,
              border: Border.all(color: Colors.red, width: 10),
              color: _changeContainer == true ? Colors.red : Colors.black,
            ),
            curve: Curves.linear,
            duration: const Duration(seconds: 1),
          ),

感想

簡単なアニメーションであればこれで十分ですね。他のアニメーションに関するウィジットも学んで、おしゃれなイケイケなUIを作ってみたいです。