Skip to content
Simplifying widget style in Flutter.
Dart
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
example
lib
.gitignore
.metadata
CHANGELOG.md
LICENSE
README.md
pubspec.lock
pubspec.yaml

README.md

Styled_widget

Simplifying your widget tree structure by using a method based widget tree, inspired by SwiftUI.

If you like the package, consider giving the package a ⭐️ on GitHub or a 👍 on pub!

Built with styled_widget

App designer, Code

Introduction

Basic Example

@override
Widget build(BuildContext context) => FlutterLogo()
  .padding(all: 20)
  .backgroundColor(Colors.blue)
  .constraints(width: 100, height: 100)
  .borderRadius(all: 10)
  .elevation(10)
  .alignment(Alignment.center);
Native Flutter equivilent
Align(
  alignment: Alignment.center,
  child: DecoratedBox(
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Color(0x55000000),
          offset: Offset(0, 10),
          blurRadius: 10,
        ),
      ],
    ),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: ConstrainedBox(
        constraints: BoxConstraints.tightFor(width: 100, height: 100),
        child: DecoratedBox(
          decoration: BoxDecoration(color: Colors.blue),
          child: Padding(
            padding: EdgeInsets.all(10),
            child: FlutterLogo(),
          ),
        ),
      ),
    ),
  ),
),

Result

Example

Text('some text')
  .textColor(Colors.white)
  .bold()
  .alignment(Alignment.center) // aligns text
  .constraints(width: 100, height: 100)
  .ripple()
  .backgroundColor(Colors.blue)
  .borderRadius(all: 10)
  .elevation(10)
  .alignment(Alignment.center), // aligns widget
Icon(Icons.portable_wifi_off)
  .iconColor(Colors.yellow)
  .iconSize(24)
  .padding(all: 30)
  .backgroundColor(Colors.amber),
Native Flutter equivilent
Align(
  alignment: Alignment.center,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.blue,
      ),
      child: ConstrainedBox(
        constraints: BoxConstraints.tightFor(width: 100, height: 100),
        child: Align(
          alignment: Alignment.center,
          child: Text(
            'some text',
            style: TextStyle(
                fontWeight: FontWeight.bold, color: Colors.white),
          ),
        ),
      ),
    ),
  ),
),
DecoratedBox(
  decoration: BoxDecoration(color: Colors.amber),
  child: Padding(
    padding: EdgeInsets.all(30),
    child: Icon(
      Icons.portable_wifi_off,
      size: 24,
      color: Colors.yellow,
    ),
  ),
),

Result

Core Concepts

Widget Tree

Implicit Animations

More Examples

Contributing

You can’t perform that action at this time.