【Flutter】Widgetをif・switch文で制御する方法

2021年2月26日2022年11月14日

Flutterのウィジェットを制御（表示・非表示 / 値の変更など）したいと考えた時、ifやswitch文を使って条件分岐させようとすると、エラーが起きて上手く実装することができません。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('DEMO'),
    ),
    body: Center(
      child:
      if(isShow) { // エラーが起こる
        Text('HOGE'),
      } else {
        Text(''),
      }
    ),
  );
}

実現したいこと

FlutterのWidgetをif・switch文で制御するためには、ひとひねり必要になってくるんですね。

具体的には３パターンあって、その内容は下記の通りです。

Widgetのif・switch制御方法

即時関数を使う
三項演算子を使う
関数を別途作って利用する

当記事では、上記の実装方法を分かりやすく解説していきたいと思います。

なぜ、Flutterのウィジェットはif・switch文で制御することができないのか？

Flutterで使う「Dart言語」には、式（expression）と文（statement）があります。

式は値を返しますが、文は値が返りません。

if・switchはあくまでも「文」で値を返さないため、条件によってウィジェットを動的に切り替えることができないのです。

そこで、ウィジェトをif・switchで制御したい場合は、関数や三項演算子を使って「式」として１つの値を返してあげる必要が出てくる。という訳です。

Widgetをif・switch文で動的に制御するための３パターン

冒頭でも解説した通り、ウィジェットをif・switchで動的に制御したい場合は、下記の３パターンのやり方で実装する必要があります。

即時関数を使う
三項演算子を使う
関数を別途作って利用する

それぞれの実装パターンを、順に見ていきましょう。

即時関数を使う

即時関数を使う方法です。

即時関数の中にif・switchを記述することで、１つの値（ウィジェット）を返してあげることができます。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('DEMO'),
    ),
    body: Center(
      child: (() { // 即時関数を使う
        if (isShow) {
          return Text('HOGE');
        } else {
          return Text('');
        }
      })(),
    ),
  );
}

三項演算子を使う

三項演算子を使う方法です。

三項演算子を使うと、即時関数を使うよりも簡潔に記述することができます。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('DEMO'),
    ),
    body: Center(
      child: isShow ? Text('HOGE') : Text(''), // 三項演算子を使う
    ),
  );
}

関数を別途作って利用する

関数を別途作って利用する方法です。

関数を別途作ることで使い回しができる他、無駄なネストを防ぐこともできます。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('DEMO'),
    ),
    body: Center(
      child: showText(), // 関数を利用
    ),
  );
}

Text showText() { // Textウィジェットを返す関数
  if (isShow) {
    return Text('HOGE');
  } else {
    return Text('');
  }
}