タグ: AnimatedOpacity

投稿日:

2021/3/15 : Flutter : Fade a widget in and outの訳

 

null safety article

Fade a widget in and out

UI開発者は、多くの場合、画面上の要素を表示および非表示にする必要があります。

ただし、要素を画面の内外にすばやくポップすると、エンドユーザーに違和感を与える可能性があります。

代わりに、不透明度(opacity)アニメーションを使用して要素をフェードインおよびフェードアウトして、スムーズなエクスペリエンスを作成します。

AnimatedOpacityウィジェットは、それが簡単に不透明度(opacity)アニメーションを行うことが可能となります。このレシピでは、次の手順で進めていきます。

1.フェードイン、フェードアウトさせる対象となるボックスを定義します。

2.StatefulWidgetを定義します。

3.フェードイン/アウトを切り替えるボタンを用意します。

4.ボックスをフェードイン/アウトさせます。

1. Create a box to fade in and out

まず、フェードインおよびフェードアウトするものを作成します。この例では、画面に緑色のボックスを描画します。

Container(
  width: 200.0,
  height: 200.0,
  color: Colors.
…
投稿日:

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 : Implicit animations、サンプルなど

Implicit animations

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

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

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

次の一連のリソースは、Flutterのimplicit animationsについて学ぶための多くの方法を提供します。

Documentation

Implicit animations codelab

コードに飛び込んでください！ このコードラボでは、インタラクティブな例と段階的な手順を使用して、暗黙的なアニメーションの使用方法を説明します。

AnimatedContainer sample

Flutter cookbookのコンテンツです。implicitly animated widgetであるAnimatedContainerの使い方を学ぶためのステップバイステップレシピです。

ImplicitlyAnimatedWidget API page

ImplicitlyAnimatedWidgetクラスを継承した全てのクラスについて。

Flutter in Focus videos

Flutter in Focusビデオは、すべてのFlutter開発者が上から下まで知る必要のあるテクニックをカバーする実際のコードを含む5〜10分のチュートリアルを特徴としています。

次のビデオは、implicit animationsに関連するトピックをカバーしています。

The Boring Show

…