🐡

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

2022/06/04に公開

Flutter

Dart

tech

FlutterにてWigetを条件によって制御しようとした際、
直接if文で制御することができない。

これだとエラー出る

@override
  Widget build(BuildContext context) {
    return const Center(
      child: 
      if(true){
        Text("a")
      }else{
        Text("b")
      }
    );
  }

なぜなのか

前提としてDart言語は以下2つの要素で構成されている

式(Expression)
文(Statement)

この2つの要素の説明については、式(Expression)と文(Statement)で以下の様に説明されている

文はそれ単独で完結する言語要素です。式はそれ単独では基本的に完結せず、文または式の一部として使用される言語要素です。また、式の最大の特徴として、値を返すという点が挙げられます（文は値を返しません）。例えば、定数式はその値そのものを返します。条件式は真偽値(True/False)を返す式です。条件式の一つとして比較式がありますが、条件式そのものはTrue/Falseを返せばなんでもよいため、単なるBooleanのTrue(定数式)もまた条件式になります。比較式は比較演算子を挟んで左辺と右辺の式を比較し、その結果をTrue/Falseで返すため、条件式になることができます。

ようするに

式 : 値を返す。それ単独で完結しない要素。
文 : 値を返さない。それ単独で完結する要素。

if文は「文」になる為、値を返さない。

Wigetを制御する場合は必ず戻り値が1つ必要となる。
そのため、if文ではWigetを制御することができない。

対策

対策① : 三項演算子を使用する

三項演算子を「式」の為、使用することができる。
複雑なものでなければ、これが最も簡単に使用することができる。

@override
  Widget build(BuildContext context) {
    return const Center(
      child: (true)?Text("a"):Text("b")
    );
  }

対策② : 関数を使用する

Wigetが戻り値の関数も使用することができる。
条件が複雑になる場合はこれを使用する方がいい。

@override
  Widget build(BuildContext context) {
    return Center(
      child: ifText(true),
    );
  }

  Widget ifText(bool value) {
    if (value) {
      return const Text("a");
    } else {
      return const Text("b");
    }
  }

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

Widgetをif文で制御できない

なぜなのか

対策

対策① : 三項演算子を使用する

対策② : 関数を使用する

参考

Discussion