搜索插件、代码仓与 APP 分类

插件详情v2.1.0

flutter_conditional_rendering

一个增强条件渲染的 Flutter 包,支持 if-else 和 switch 条件。

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 模式的前端开发人员

使用建议

  • 可能会略微增加包大小
  • 需要理解 Dart 的表达式语法
  • 不适合非常复杂的状态管理
  • 仅限简单条件类型
  • 最好与状态管理解决方案配合使用
  • 避免在深度嵌套的 widget 结构中过度使用

原始 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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。