Flutterで条件によってウィジェットを作成する方法

Flutterで条件分岐を使用してウィジェットを作成する方法をいくつかの例とともに紹介します。

基本的な条件分岐

まず、基本的な条件分岐の例を見てみましょう。if文を使用して、特定の条件に基づいてウィジェットを表示する方法を示します。

import 'package:flutter/material.dart';

class ConditionalWidget extends StatelessWidget {
  final bool showWidget = true; // 条件を設定

  @override
  Widget build(BuildContext context) {
    return showWidget ? Text('ウィジェットが表示されます') : Container();
  }
}

この例では、showWidgetがtrueの場合にテキストウィジェットが表示され、falseの場合は空のコンテナが表示されます。

複数の条件を扱う方法

次に、複数の条件を扱う方法を見てみましょう。else if文を使用して、複数の条件に基づいて異なるウィジェットを表示することができます。

class ConditionalWidget extends StatelessWidget {
  final int condition = 2; // 条件を設定

  @override
  Widget build(BuildContext context) {
    if (condition == 1) {
      return Text('条件1に一致しました');
    } else if (condition == 2) {
      return Text('条件2に一致しました');
    } else {
      return Text('他の条件に一致しました');
    }
  }
}

この例では、conditionの値に基づいて異なるテキストが表示されます。

ウィジェットの遅延生成

Flutterでは、必要な時にだけウィジェットを生成する方法もあります。これにより、リソースの無駄遣いを防ぐことができます。例えば、FutureBuilderやStreamBuilderを使用することで、非同期の条件に基づいてウィジェットを生成することができます。

class FutureWidget extends StatelessWidget {
  Future<bool> _fetchCondition() async {
    await Future.delayed(Duration(seconds: 2)); // 模擬的な遅延
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
      future: _fetchCondition(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('エラーが発生しました');
        } else if (snapshot.hasData && snapshot.data!) {
          return Text('非同期条件が満たされました');
        } else {
          return Text('条件が満たされていません');
        }
      },
    );
  }
}

この例では、_fetchCondition関数が非同期に条件を取得し、その結果に基づいてウィジェットを生成します。

ツリー上の一部のみ条件によって表示・非表示を分岐させる方法

次に、ウィジェットツリーの一部のウィジェットのみを条件に基づいて表示・非表示にする方法を見てみましょう。以下の例では、複数のウィジェットの中から特定の条件に一致するものだけを表示します。

class ConditionalWidgetTree extends StatelessWidget {
  final bool showFirstWidget = true; // 条件を設定

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('これは常に表示されるウィジェットです'),
        showFirstWidget ? Text('条件が満たされたウィジェット1') : Container(),
        !showFirstWidget ? Text('条件が満たされたウィジェット2') : Container(),
        Text('これも常に表示されるウィジェットです'),
      ],
    );
  }
}

まとめ

Flutterで条件に基づいてウィジェットを作成する方法は多岐にわたります。シンプルなif文から複雑な非同期処理まで、様々な方法で条件分岐を実装することができます。これらのテクニックを活用していきましょう。