【Flutter】ボタンの表示制御｜状態管理と空文字判定を使った実装例

スマートフォン向けのアプリ開発では、特定の条件によって画面の一部を表示したり隠したりする処理がよく使われます。
中でも、浮動型の操作ボタン（画面の右下などに配置されることが多い丸いボタン）の表示・非表示は、利用者の操作性に関わる重要な要素です。

この記事では、Flutterでの「ある条件をもとに操作ボタンの表示を切り替える方法」について、具体的な実装例を交えて詳しく解説します。

条件式で操作ボタンの表示を切り替える

まずは次のような条件式をご覧ください。

showFloatingActionButton: (
  (state.data?.isLiked ?? false) &&
  (state.data?.id?.isNotEmpty ?? false)
),

この記述は、「操作ボタンを表示するかどうか」を判断する式です。
Flutterでは状態管理と呼ばれる考え方が基本にありますが、この式もアプリの状態をもとに表示内容を決めています。

判定の中身を読み解く

• state.data?.isLiked ?? false
  これは、対象となるデータが「いいね！」状態であるかどうかを調べています。
  データが存在しなかったり、項目が未設定でもエラーにならないように、「存在しない場合は偽（false）」という指定がされています。
• state.data?.id?.isNotEmpty ?? false
  こちらは、対象の識別子（たとえば「abc123」などの文字列）が存在し、かつ空でないかを確認しています。
  こちらもデータが欠けている場合を想定し、安全に偽を返すようにしています。
• &&（かつ）
  2つの条件がどちらも真のときにのみ、ボタンを表示するという指定です。

つまり、「いいね！」されていて、対象の識別子が空でない。という2つの条件がそろったときだけ、画面上に操作ボタンが表示される、という仕組みです。

実装例

以下に、実際の設計の一部をわかりやすく整理したコードを紹介します。

Widget build(BuildContext context) {
  final bool showButton = (data?.isLiked ?? false) && (data?.id?.isNotEmpty ?? false);

  return Scaffold(
    body: /* 中略 */,
    floatingActionButton: showButton
      ? FloatingActionButton(
          onPressed: () {
            // 操作の処理
          },
          child: Icon(Icons.thumb_up),
        )
      : null,
  );
}

この例では、showButton という真偽値を使って、ボタンの表示を制御しています。
空文字かどうかの判定とお気に入り状態の確認という二つの条件を組み合わせることで、利用者の画面に必要なときだけボタンが現れるようになっています。

よくある誤りと注意点

Flutter初心者にありがちなのが、次のような実装です。

if (data.isLiked && data.id.isNotEmpty)

一見すると正しそうに見えますが、data が null（未設定）だった場合、エラーが発生します。
これを防ぐためには、?. や ?? といった安全確認の記述を取り入れることが大切です。

また、isNotEmptyは文字列だけでなく配列や辞書などにも使える便利な判定方法です。
使い方を知っておくと、他の条件分岐にも応用できます。

まとめ

以下のような記述は、日々の開発で頻繁に登場します。

Flutterでアプリを構築する際には、利用者にとって本当に必要な場面だけを丁寧に表示することで、操作のしやすさと視認性を向上させることができます。

表示の切り替えは些細なようでいて、利用者体験に大きな影響を与える重要な要素です。
ぜひ今回の内容を、皆さんの実装に活かしてください。

• Original:https://minory.org/flutter-button-show-hide.html
• Source:minory
• Author:管理者

Amazonベストセラー