〜 無料体験可能なプログラミングスクールはコチラ 〜

Flutter

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

ウィジェットをif・switchで制御する

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文で制御するためには、ひとひねり必要になってくるんですね。

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

Widgetのif・switch制御方法

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

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

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

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

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

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

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

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

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

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

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

即時関数を使う

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

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

@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('');
  }
}

最後に

当記事ではWidgetをif・switch文で制御する方法について解説しました。

ユウマ
Dart言語における、式(expression)と文(statement)の違いを意識することが、ハマらずに済む方法です。

-Flutter

© 2021 ユウマのブログ