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.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.  
    //緑色のボックスと他のウィジェットがここに来ます。

  }
}

3. Display a button that toggles the visibility

緑色のボックスを表示するかどうかを決定するためのデータ(_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