👻

FlutterでWidgetを隠したり表示したりをコントロールする

に公開
Android
Flutter
iOS
tech

Webだと display: noneを使って要素を条件に応じて隠したりしますが、Flutterで同じことをするにはどうすればいいのかを調べたメモ。

環境

  • macOS Big Sur Version 11.3.1
  • Flutter 2.2.0
  • Dart 2.13.0

Widgetの可視性をコントロールする

Visibilityウィジェットを使う。visibleというプロパティがあり、boolを値として設定します。

true -> 表示
false -> 非表示

サンプルコード

簡単なサンプルコードを書いてみた。やってることはボタンを押すとテキストの表示/非表示が切り替わる簡単なものです。

import 'dart:math';

import 'package:flutter/material.dart';

class VisibilitySample extends StatefulWidget {
  const VisibilitySample({Key? key}) : super(key: key);

  @override
  _VisibilitySampleState createState() => _VisibilitySampleState();
}

class _VisibilitySampleState extends State<VisibilitySample> {
  bool isVisible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Visibility(
                visible: isVisible,
                child: const Text('Visibilityテスト'),
               ),
              TextButton(
                  onPressed: () {
                    setState(toggleShowText);
                  },
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.white
                  ),
                  child: Text('クリックミー'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void toggleShowText(){
    isVisible = !isVisible;
  }
}

コードの解説

表示の状態を保持するためにisVisibilityとして変数定義しておきます。（デフォルトはfalseで非表示）

  bool isVisible = false;

さらに条件に応じて表示の切り替えたいウィジェットをVisibilityで囲う。ここではTextを囲っています。

    Visibility(
      visible: isVisible, // デフォルトはfalseなので非表示になる
      child: const Text('Visibilityテスト'),
    ),

TextButtonを用意し、押したときにトグルで表示/非表示を切り替えるようにします。

TextButton(
    onPressed: () {
      setState(toggleShowText);
    },
    style: TextButton.styleFrom(
      backgroundColor: Colors.white
    ),
    child: Text('クリックミー'),
),
~省略~
void toggleShowText(){
  isVisible = !isVisible;
}

実際に動作させてみた動画がこちら。

Image from Gyazo

参考

Discussion