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

Flutter

Flutter で、Widget を条件に応じて、出し分けたい時もあると思います。この時、if 文や switch 文を直接 child で使用して制御しようとすると、エラーになります。自分も最初 if 文を使用して Widget を制御しようしたのですが、エラーになって困りました。
そこで今回は、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");
        })(),
      ),
    );
  }
}

まとめ

Widget を条件によって出し分ける方法を紹介しました!

  • if や switch は、「文」であるため、child で使用できない
  • Widget を条件に応じて出し分ける方法は、以下3種類
    • 三項演算子を使用する
    • 別に関数を作成して呼び出す
    • 即時関数を使用する

以上で、【Flutter】Widget を条件分岐で出し分ける方法 は終わりです。

おすすめ書籍

コメント

タイトルとURLをコピーしました