Note: このレシピではnull-safety導入後のコードを使います。null-safetyがDart言語とFlutterフレームワークにやってきます。現在ベータチャンネルです。より詳しい情報はNull safety in Flutterをご覧ください。
Apps are filled with buttons that execute long-running behaviors.
アプリには、長時間実行される動作を実行するボタンがたくさんあります。
For example, a button might trigger a download, which starts a download process, receives data over time, and then …
implicit animations(暗黙的なアニメーション)コードラボへようこそ。ここでは、特定のプロパティセットのアニメーションを簡単に作成できるFlutterウィジェットの使用方法を学習します。
このコードラボを最大限に活用するには、次の基本的な知識が必要です。
このコードラボは、次の資料をカバーしています。
このコードラボを完了するための推定時間：15〜30分。
Flutterのアニメーションライブラリを使えば、UIでウィジェットのモーションを追加し、視覚効果を作成できます。
アニメーションライブラリの一部は、アニメーションを管理するウィジェットの品揃えです。
これらのウィジェットは、まとめてimplicit animationsまたはimplicitly animated widgetsと呼ばれ、実装するImplicitlyAnimatedWidgetクラスから名前が付けられます。
implicit animationsでは、ターゲット値を設定することでウィジェットプロパティをアニメーション化できます。
そのターゲット値が変更されるたびに、ウィジェットはプロパティを古い値から新しい値にアニメーション化します。 このように、暗黙的なアニメーションは、利便性のために制御を交換します。
つまり、implicit animationsがアニメーション効果を管理するため、開発者が管理用コードを記述する必要がありません。
次の例は、AnimatedOpacityと呼ばれる暗黙的にアニメーション化されたウィジェットを使用して既存のUIにフェードイン効果を追加する方法を示しています。 この例は、アニメーションコードなしで始まります。これは、以下を含むMaterialAppのホーム画面で構成されています。
Containerクラスは、幅、高さ、背景色、パディング、境界線などの特定のプロパティを持つウィジェットを作成するための便利な方法を提供します。
単純なアニメーションでは、多くの場合、これらのプロパティを時間の経過とともに変更する必要があります。
たとえば、背景色を灰色から緑色にアニメーション化して、アイテムがユーザーによって選択されたことを示すことができます。
これらのプロパティをアニメーション化するために、FlutterにはAnimatedContainerウィジェットが用意されています。
コンテナウィジェットと同様に、AnimatedContainerを使用すると、幅、高さ、背景色などを定義できます。
ただし、AnimatedContainerが新しいプロパティで再構築されると、古い値と新しい値の間で自動的にアニメーション化されます。 Flutterでは、これらのタイプのアニメーションは「暗黙のアニメーション」と呼ばれます。
このページでは、AnimatedContainerを使用して、ユーザーがボタンをタップしたときに、サイズ、背景色、および境界線の半径をアニメーション化する方法について次の手順で説明していきます。
まず、StatefulWidgetクラスとStateクラスを作成します。
カスタムStateクラスを使用して、時間の経過とともに変化するプロパティを定義します。
この例では、幅、高さ、色、境界線の半径が含まれています。 各プロパティのデフォルト値を定義することもできます。
これらのプロパティはカスタムStateクラスに属しているため、ユーザーがボタンをタップしたときに更新できます。
class AnimatedContainerApp extends StatefulWidget {
@override
_AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
class _AnimatedContainerAppState extends