null safety article
Contents
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.green,
);
2. Define a StatefulWidget
アニメーション化する緑色のボックスができたので、ボックスの表示/非表示(透明/不透明)の状態を保持するため、StatefulWidgetを使います。
StatefulWidgetはStateオブジェクトを作成するクラスです。Stateオブジェクトは、アプリに関するいくつかのデータを保持し、そのデータを更新する方法を提供します。
データを更新するときに、Flutterにそれらの変更でUIを再構築するように依頼することもできます。
この場合、ボタンが表示されているかどうかを表すブール値を状態として保持します。
StatefulWidgetのサブクラスを定義するには、二つのクラスが必要です。
StatefulWidgetクラスとStateクラスです。
Pro tip:stfulスニペットを使ってコードを素早く生成することが可能です。
// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
//StatefulWidgetの仕事はデータを保持し、Stateクラスを作ることです。
//今回はtitleを保持し、_MyHomePageStateを作ります。
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
//Stateクラスは二つの役割を持ちます。
//「状態データを保持すること」と「その状態データを使ってUIをビルドすること」です。
class _MyHomePageState extends State<MyHomePage> {
// Whether the green box should be visible.
//↓緑色のボックスが見えるか、透明にするか、を表す状態。
bool _visible = true;
@override Widget build(BuildContext context) {
// The green box goes here with some other Widgets.
//緑色のボックスと他のウィジェットがここに来ます。
}
}
緑色のボックスを表示するかどうかを決定するためのデータ(_visible)を用意したので、そのデータを更新する方法が必要です。この例では、ボックスが表示されている場合は非表示にします。ボックスが非表示になっている場合は、表示します。
これを処理するには、ボタンを表示します。ユーザーがボタンを押すと、ブール値がtrueからfalseに、またはfalseからtrueに反転します
setState()メソッドを使ってこの反転を行います。
setState()メソッドはStateクラスのメソッドです。
setState()メソッドを呼び出すと、Flutterフレームワークに対して、ウィジェットをリビルドするように指示できます。
ユーザー入力の操作の詳細については、クックブックの「ジェスチャー」セクションを参照してください。
FloatingActionButton(
onPressed: () {
// Call setState. This tells Flutter to rebuild the
// UI with the changes.
setState(() {
_visible = !_visible;
});
},
tooltip: 'Toggle Opacity',
child: Icon(Icons.flip),
);
4. Fade the box in and out
画面に緑色のボックスと、ボックスの表示/非表示を切り替えるボタンを作りました。
どうやってボックスのフェードイン/フェードアウトを実現しましょうか?
AnimatedOpacityウィジェットを使います。
AnimatedOpacityウィジェットは三つの引数を必要とします。
●opacity : 0.0(見えない状態)から1.0(完全に見える状態)までの値
●duration : アニメーションが完了するまでにかかる時間。
●child : アニメーション化するウィジェット。この場合、緑色のボックス。
AnimatedOpacity(
// If the widget is visible, animate to 0.0 (invisible).
//緑色のボックスが見えている時はアニメーション化して値を0.0に進める。(見えなくする)
// If the widget is hidden, animate to 1.0 (fully visible).
//緑色のボックスが見えない時は、アニメーション化して値を1.0に進める(見えるようにする)
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box must be a child of the AnimatedOpacity widget.
//緑色のボックスはAnimatedOpacityのchildプロパティに設定します。
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
);
Interactive example
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const appTitle = 'Opacity Demo';
return const MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
required this.title,
}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
// Whether the green box should be visible
bool _visible = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AnimatedOpacity(
// If the widget is visible, animate to 0.0 (invisible).
// If the widget is hidden, animate to 1.0 (fully visible).
opacity: _visible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 500),
// The green box must be a child of the AnimatedOpacity widget.
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Call setState. This tells Flutter to rebuild the
// UI with the changes.
setState(() {
_visible = !_visible;
});
},
tooltip: 'Toggle Opacity',
child: const Icon(Icons.flip),
),
);
}
}
参考
https://flutter.dev/docs/cookbook/animation/opacity-animation