Containerクラスは、幅、高さ、背景色、パディング、境界線などの特定のプロパティを持つウィジェットを作成するための便利な方法を提供します。
単純なアニメーションでは、多くの場合、これらのプロパティを時間の経過とともに変更する必要があります。
たとえば、背景色を灰色から緑色にアニメーション化して、アイテムがユーザーによって選択されたことを示すことができます。
これらのプロパティをアニメーション化するために、FlutterにはAnimatedContainerウィジェットが用意されています。
コンテナウィジェットと同様に、AnimatedContainerを使用すると、幅、高さ、背景色などを定義できます。
ただし、AnimatedContainerが新しいプロパティで再構築されると、古い値と新しい値の間で自動的にアニメーション化されます。 Flutterでは、これらのタイプのアニメーションは「暗黙のアニメーション」と呼ばれます。
このページでは、AnimatedContainerを使用して、ユーザーがボタンをタップしたときに、サイズ、背景色、および境界線の半径をアニメーション化する方法について次の手順で説明していきます。
- デフォルトのプロパティの値でStatefulWidgetを生成する。
- (1)で用いたプロパティを使ってAnimatedContainerウィジェットを生成する
- 新しいプロパティの値を用いてアニメーションをスタートさせる。
まず、StatefulWidgetクラスとStateクラスを作成します。
カスタムStateクラスを使用して、時間の経過とともに変化するプロパティを定義します。
この例では、幅、高さ、色、境界線の半径が含まれています。 各プロパティのデフォルト値を定義することもできます。
これらのプロパティはカスタムStateクラスに属しているため、ユーザーがボタンをタップしたときに更新できます。
class AnimatedContainerApp extends StatefulWidget {
@override
_AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
class _AnimatedContainerAppState extends
…