[Flutter]Containerの表示(show)・非表示(hidden)を切り替える(switch)には？

どうも、ちょげ(@chogetarou)です。

Containerの表示と非表示を切り替える方法を紹介します。

方法

Containerの表示と非表示を切り替えられるようにするには、Visibilityを使います。

まず、ContainerをVisibilityの「child」に指定します。

Visibility(
    child : Container(),
)

Visibilityの引数「visible」に「true」を指定すれば表示、「false」を指定すれば「非表示」となります。

なので、引数「visible」にbool型の変数を指定し、変数の値を切り替えるようにすればContainerの表示・非表示を切り替えられるようになります。

Visibility(
    visible : /*bool型の変数*/,
    child : Container(),
)

以下は、使用例です。

使用例

  bool isShow = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Visibility(
              visible: isShow,
              child: Container(
                color: Colors.yellow,
                height: 200,
                width: 200,
              ),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isShow = !isShow; //切り替え
                });
              },
              child: Text(isShow ? 'Hidden' : 'Show'),
            ),
          ],
        ),
      ),
    );
  }