styled_widget

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Styled Widget 是一个 Flutter 包，通过允许开发人员使用方法链定义小部件，简化了小部件树的构建，其灵感来自 CSS 和 SwiftUI。它通过流畅地应用样式和布局属性，促进代码更清晰、更易读。该包减少了嵌套，提高了可维护性，尤其适用于复杂的 UI。支持所有主要平台，非常适合希望采用声明式、表达性强的方法构建 Flutter 界面的团队。

适合场景

构建干净、可读的用户界面
减少嵌套的部件结构
创建可重用的 UI 组件
通过方法链简化样式设置
快速原型设计用户界面

主要特点

用于小部件构造的方法链
CSS 类似样式语法
受 SwiftUI 启发的 API 设计
跨平台兼容性
最小的样板代码
对响应式布局的支持

适合对象

希望代码简洁的开发者
优先考虑代码可读性的团队
具有复杂小部件层次结构的项目
面向前端的 Flutter 开发
快速UI原型设计

使用建议

新用户的上手曲线
深层链路可能带来的性能开销
与原始小部件相比，自定义选项有限
不适合高度动态或状态密集的 UI，除非采用额外的模式
可能与其他样式库冲突

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Simplifying your widget tree structure by defining widgets using methods.

Thanks to the introduction of extension methods in Dart 2.7.0, styled_widget makes it possible to build widget tree`s more readable and efficient.

styled_widget is build as a tool to enhance your Flutter development experience and to seamlessly integrate with your codebase.

Showcase

Design, Code	Design, Code	Design, Code

Basic example

styled_widget has a bottom up approach to building widget`s. This means you start with the inner most element and layer widget`s on top. The following example is structured as follows: Icon -> blue circle -> light blue circle -> card -> background

Icon(OMIcons.home, color: Colors.white)
  .padding(all: 10)
  .decorated(color: Color(0xff7AC1E7), shape: BoxShape.circle)
  .padding(all: 15)
  .decorated(color: Color(0xffE8F2F7), shape: BoxShape.circle)
  .padding(all: 20)
  .card(
    elevation: 10,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  )
  .alignment(Alignment.center)
  .backgroundColor(Color(0xffEBECF1));

Raw Flutter (click to show)

DecoratedBox(
  decoration: BoxDecoration(
    color: Color(0xffEBECF1),
  ),
  child: Align(
    alignment: Alignment.center,
    child: Card(
      elevation: 10,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      child: Padding(
        padding: EdgeInsets.all(20),
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: Color(0xffE8F2F7),
            shape: BoxShape.circle,
          ),
          child: Padding(
            padding: EdgeInsets.all(15),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Color(0xff7AC1E7),
                shape: BoxShape.circle,
              ),
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Icon(
                  OMIcons.home,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  ),
);