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,
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  ),
);