【Flutter】AnimatedContainerの使い方


今回は**AnimatedContaienr**の使い方について解説していきます。
## 対象読者
○Flutter初学者
○AnimatedContainerの基本的な使い方を学びたい人

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

## 公式
**公式ドキュメント**

https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html

**公式Youtube**

https://youtu.be/yI-8QHpGIP4

## 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),
          ),
        ),
      ),
    );
  }
}
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/a38cf3cd-bdf1-c15e-257d-256240a10e9e.gif' width='300'>

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

##アニメーションの種類

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

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

### ○bounceIn

```dart
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),
          ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/ebb93db2-50e9-b273-c239-96ef6717b293.gif'width='300'>

### ○easeInCirc

```dart
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),
          ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/9fba2fa0-6771-dc3f-1dbc-4100abe95406.gif'width='300'>

### ○elasticIn

```dart
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),
          ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/ba3f6da4-7779-58f8-7030-f1dcac336bfe.gif'width='300'>

### ○slowMiddle

```dart
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),
          ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/c034b87e-93ee-a9fb-546a-8b7a69c6e48f.gif'width='300'>

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

https://api.flutter.dev/flutter/animation/Curves-class.html

## 作ってみた

```dart
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),
          ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/4868462c-d557-8742-c649-45d5ba817d0e.gif'width='300'>


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