【Flutter】Widget を条件分岐で出し分ける方法

Flutter で、Widget を条件に応じて、出し分けたい時もあると思います。この時、if 文や switch 文を直接 child で使用して制御しようとすると、エラーになります。自分も最初 if 文を使用して Widget を制御しようしたのですが、エラーになって困りました。
そこで今回は、Widget を条件に応じて制御する方法について紹介します。

if 文や switch 文を使用できない理由
Widget を条件に応じて出し分ける方法
まとめ
おすすめ書籍

if 文や switch 文を使用できない理由

以下のように、child で直接 if 文( switch 文)を使用するとエラーになります。

class _WidgetSamplePage extends State<WidgetSamplePage> {
  bool flag = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Widget if sample"),
      ),
      body: Center(
        child: if (flag) {
          const Text("A"),
        } else {
          const Text("B"),
        }
      ),
    );
  }
}

エラーになる理由は、if 文や switch 文が「文」であるからです。
「文」は、値を返さないので、child で使用することができません。
child では、値を返す「式」を使用する必要があります。

Widget を条件に応じて出し分ける方法

使用可能な「式」は、以下3種類があります。

三項演算子
関数呼び出し
即時関数

三項演算子を使用する方法

child で、以下のように三項演算子を使うと、条件によって Widget の出し分けができます。

class _WidgetSamplePage extends State<WidgetSamplePage> {
  bool flag = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Widget if sample"),
      ),
      body: Center(
        child: flag ? const Text("A") : const Text("B"),
      ),
    );
  }
}

関数を作成して呼び出す方法

以下のように、Widget を返す関数を別に作成して、child で呼び出すことでも、条件による Widget の出し分けが可能です。

class _WidgetSamplePage extends State<WidgetSamplePage> {
  bool flag = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Widget if sample"),
      ),
      body: Center(
        child: determineText(flag),
      ),
    );
  }

  Text determineText(bool flg) {
    if (flg) {
      return const Text("A");
    }
    return const Text("B");
  }
}

即時関数を使用する方法

以下のように、別に関数を作成するのではなく、child に即時関数として埋め込むことも可能です。

class _WidgetSamplePage extends State<WidgetSamplePage> {
  bool flag = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Widget if sample"),
      ),
      body: Center(
        child: (() {
          if (flag) {
            return const Text("A");
          }
          return const Text("B");
        })(),
      ),
    );
  }
}