styled_widget

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Styled Widget ist ein Flutter-Paket, das die Erstellung von Widget-Bäumen vereinfacht, indem Entwickler Widgets mithilfe von Methodenketten definieren können, inspiriert durch CSS und SwiftUI. Es fördert sauberen, besser lesbaren Code, indem es die fließende Anwendung von Stilen und Layout-Eigenschaften ermöglicht. Das Paket reduziert die Verschachtelung und verbessert die Wartbarkeit, besonders bei komplexen Benutzeroberflächen. Mit Unterstützung für alle wichtigen Plattformen ist es ideal für Teams, die einen deklarativen, ausdrucksstarken Ansatz zur Erstellung von Flutter-Oberflächen verfolgen.

Anwendungsfälle

Saubere, lesbare Benutzeroberflächen erstellen
Reduzierung verschachtelter Widget-Strukturen
Wiederverwendbare UI-Komponenten erstellen
Styling mit Methodenketten vereinfachen
Schnelle Prototypenerstellung von Benutzeroberflächen

Hauptmerkmale

Methoden-Chaining für die Widget-Erstellung
CSS-ähnliche Stil-Syntax
API-Design, inspiriert durch SwiftUI
Plattformübergreifende Kompatibilität
Minimale Boilerplate
Unterstützung für responsive Layouts

Geeignet für

Entwickler, die kompakten UI-Code wollen
Teams, die Code-Lesbarkeit priorisieren
Projekte mit komplexen Widget-Hierarchien
Frontend-orientierter Flutter-Entwicklung
Schnelle UI-Prototypenerstellung

Hinweise

Lernkurve für neue Benutzer
Mögliche Leistungseinbußen bei tiefen Ketten
Eingeschränkte Anpassungsmöglichkeiten im Vergleich zu rohen Widgets
Nicht geeignet für hochdynamische oder zustandsintensive Benutzeroberflächen ohne zusätzliche Muster
Kann mit anderen Styling-Bibliotheken kollidieren

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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