2021/3/4 : Flutter : Create a download buttonの訳

Create a download button

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 …

2021/2/9 Implicit animations codelab(コードラボ)の訳

implicit animations(暗黙的なアニメーション)コードラボへようこそ。ここでは、特定のプロパティセットのアニメーションを簡単に作成できるFlutterウィジェットの使用方法を学習します。

このコードラボを最大限に活用するには、次の基本的な知識が必要です。

  • Flutterアプリの作り方。
  • StatefulWidget(ステートフルウィジェット)の使用方法。

このコードラボは、次の資料をカバーしています。

  • AnimatedOpacityを使ったfade-in効果の実装方法
  • AnimatedContainerを使ってサイズ、色、マージンをアニメーション化する方法
  • implicit animationsのまとめと使用法、テクニック

このコードラボを完了するための推定時間:15〜30分。


What are implicit animations?

Flutterのアニメーションライブラリを使えば、UIでウィジェットのモーションを追加し、視覚効果を作成できます。

アニメーションライブラリの一部は、アニメーションを管理するウィジェットの品揃えです。

これらのウィジェットは、まとめてimplicit animationsまたはimplicitly animated widgetsと呼ばれ、実装するImplicitlyAnimatedWidgetクラスから名前が付けられます。

implicit animationsでは、ターゲット値を設定することでウィジェットプロパティをアニメーション化できます。

そのターゲット値が変更されるたびに、ウィジェットはプロパティを古い値から新しい値にアニメーション化します。 このように、暗黙的なアニメーションは、利便性のために制御を交換します。

つまり、implicit animationsがアニメーション効果を管理するため、開発者が管理用コードを記述する必要がありません。


Example: Fade-in text effect

次の例は、AnimatedOpacityと呼ばれる暗黙的にアニメーション化されたウィジェットを使用して既存のUIにフェードイン効果を追加する方法を示しています。 この例は、アニメーションコードなしで始まります。これは、以下を含むMaterialAppのホーム画面で構成されています。

  • フクロウの写真。
  • クリックしても何もしない1つの[詳細を表示]ボタン。
  • 写真のフクロウの説明文。

Fade-in (starter

2020/10/25 Flutter : Animate the properties of a containerの訳

 

Containerクラスは、幅、高さ、背景色、パディング、境界線などの特定のプロパティを持つウィジェットを作成するための便利な方法を提供します。

単純なアニメーションでは、多くの場合、これらのプロパティを時間の経過とともに変更する必要があります。

たとえば、背景色を灰色から緑色にアニメーション化して、アイテムがユーザーによって選択されたことを示すことができます。

これらのプロパティをアニメーション化するために、FlutterにはAnimatedContainerウィジェットが用意されています。

コンテナウィジェットと同様に、AnimatedContainerを使用すると、幅、高さ、背景色などを定義できます。

ただし、AnimatedContainerが新しいプロパティで再構築されると、古い値と新しい値の間で自動的にアニメーション化されます。 Flutterでは、これらのタイプのアニメーションは「暗黙のアニメーション」と呼ばれます。

このページでは、AnimatedContainerを使用して、ユーザーがボタンをタップしたときに、サイズ、背景色、および境界線の半径をアニメーション化する方法について次の手順で説明していきます。

  1. デフォルトのプロパティの値でStatefulWidgetを生成する。
  2. (1)で用いたプロパティを使ってAnimatedContainerウィジェットを生成する
  3. 新しいプロパティの値を用いてアニメーションをスタートさせる。

1. Create a StatefulWidget with default properties

まず、StatefulWidgetクラスとStateクラスを作成します。

カスタムStateクラスを使用して、時間の経過とともに変化するプロパティを定義します。

この例では、幅、高さ、色、境界線の半径が含まれています。 各プロパティのデフォルト値を定義することもできます。

これらのプロパティはカスタムStateクラスに属しているため、ユーザーがボタンをタップしたときに更新できます。

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends