パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v2.1.0

flutter_conditional_rendering

条件付きレンダリングを強化し、if-elseおよびswitch条件をサポートするFlutterパッケージです。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
9670
いいね数
114
Pub ポイント
160

パッケージをインストール

flutter pub add flutter_conditional_rendering

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Flutterパッケージで、if-elseやswitch文を用いたウィジェット機能の拡張により、UI開発における条件付きレンダリングを簡素化します。実行時値に基づいてウィジェットを条件付きで表示する場合に、よりクリーンで読みやすいコードを書くことを可能にします。既存のFlutterプロジェクトにスムーズに統合でき、Android、iOS、Web、macOS、Windows、Linuxなどすべての主要プラットフォームをサポートしています。論理駆動型の可視性制御が必要な動的なUIに最適です。

用途

  • 状態に基づくダイナミックUI要素
  • フォーム内の条件付きウィジェット表示
  • スイッチベースのレイアウト変更
  • ユーザー役割ベースのインターフェースレンダリング
  • 簡略化されたネストされた三項演算子
  • プラットフォーム固有のロジックを備えた応答性のあるデザイン

主な機能

  • ウィジェットツリーで if-else 構文をサポートしています
  • switch-case 条件レンダリングを提供
  • 複雑な条件におけるブーラープレートを削減する
  • すべてのFlutterプラットフォームで動作します
  • pub add コマンドによる最小構成
  • きれいな、読みやすい条件論理

適している対象

  • よりクリーンな条件付きUIコードを求める開発者
  • 頻繁な状態依存レンダリングを備えたプロジェクト
  • 保守性の高いウィジェット論理を重視するチーム
  • プラットフォーム固有のUIの変更を必要とするアプリ
  • 宣言型UIパターンを使用するフロントエンド開発者

注意事項

  • バンドルサイズがわずかに増加する可能性があります
  • Dart の式構文の理解が必要です
  • 非常に複雑な状態管理には適していません
  • 単純な条件タイプに限定
  • 状態管理ソリューションと併用するのが最適です
  • 深くネストされたウィジェット構造では過度な使用を避けてください

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

flutter_conditional_rendering

A flutter package which enhances conditional rendering, supports if-else and switch conditions.

Why

In flutter if you want to do conditional rendering, you may do this:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        if (someCondition == true)
          Text('The condition is true!'),
      ],
    );
  }
}

But what if you want to use a tertiary (if-else) condition?

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        someCondition == true ?
          Text('The condition is true!'):
          Text('The condition is false!'),
      ],
    );
  }
}

It is okay for a single Text widget, but the readability quickly become very bad when the child widget is multi-layered.

Usage

If-Else condition:
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Conditional.single(
          context: context,
          conditionBuilder: (BuildContext context) => someCondition == true,
          widgetBuilder: (BuildContext context) => Text('The condition is true!'),
          fallbackBuilder: (BuildContext context) => Text('The condition is false!'),
        ),
      ],
    );
  }
}
Switch condition:
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ConditionalSwitch.single<String>(
          context: context,
          valueBuilder: (BuildContext context) => 'A',
          caseBuilders: {
            'A': (BuildContext context) => Text('The value is A!'),
            'B': (BuildContext context) => Text('The value is B!'),
          },
          fallbackBuilder: (BuildContext context) => Text('None of the cases matched!'),
        ),
      ],
    );
  }
}

Want a list of widgets?

If you want to conditionally render a list of widgets (List<Widget>) instead of a single one. Use Conditional.list() and ConditionalSwitch.list()!

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue. If you fixed a bug or implemented a feature, please send a pull request.

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。