Chapter 05

ボタンに「状態」を追加しよう

ヘブン
ヘブン
2020.12.21に更新
このチャプターの目次
  1. 状態とは
  2. 1. StatefulWidget 化しよう
  3. 2. 「状態」を追加しよう

このチャプターでは、前のチャプターでコンポーネント化したボタンに「状態」を追加していきます。

状態とは

ここでは「状態」を「コンポーネントを扱うのに都合のいい情報」という意味で使っています。

今回実現したい「押すと透明になるボタン」にとって都合のいい情報とは何でしょうか? 色々と考えられますが、今回は「(ボタンが)押されてる/押されてない」という２パータンとします。

このように真逆の 2 パターンを扱う場合は、真偽値で扱うのが良さそうです。以下のイメージです。

bool _pressing = false; // 「押されてない」状態を定義
_pressing = true; // 「押されてる」状態に更新

それでは、実際にコンポーネント化としたボタンに「状態」を追加していきましょう。

1. StatefulWidget 化しよう

コンポーネント化したボタンは StatelessWidget でした。 StatelessWidget のままでは状態を扱いづらいです。

まずは、ボタンを StatefulWidget 化しましょう。

Android Studio か VSCode をお使いの方であれば、「StatelessWidget を StatefulWidget に変換する」ショートカットが用意されています。

下記のようにCustomButtonクラスの定義の StatelessWidget の箇所にカーソルを当てて、Android Studio なら option + Enter、VSCode なら ⌘ + .(ドット) のショートカットを使って簡単に変換することができます。

2. 「状態」を追加しよう

では、StatefulWidget 化した CustomButton の State に _pressing フィールドを追加しましょう。
以下のようになります。

class _CustomButtonState extends State<CustomButton> {
  bool _pressing = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap,
      child: Container(
        height: 56,
        width: 56,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(28),
        ),
        alignment: Alignment.center,
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
    );
  }
}

サンプルコード

次のチャプターでは、状態を更新するための実装をしていきます。