Core concept

The styled_widget tree you build is closely related to the actual widget tree built behind the scenes. styled_widget`s main goal is to make widget building much easier and more readable.

Lets start with an example:

styled_widget

Text('some text')
  .padding(all: 10)
  .backgroundColor(Colors.amber)
  .alignment(Alignment.center);

native flutter

Align(
  alignment: Alignment.center,
  child: DecoratedBox(
    decoration: BoxDecoration(
      color: Colors.amber,
    ),
    child: Padding(
      padding: EdgeInsets.all(10),
      child: Text('some text'),
    ),
  ),
);

styled_widget starts from the bottom of the widget tree and adds parents by the use of methods. There is nothing you have to do to your already defined widgets to get styled_widget to works. The methods will be available to any widgets by default!

It is important to note that the order you apply the style matters. For example:

YourWidget()
  .padding(all: 10)
  .backgroundColor(Colors.red);

and

YourWidget()
  .backgroundColor(Colors.red)
  .padding(all: 10);

will look very different. The first one will have the background color applied after the padding while the second example will apply the background color before the padding. This is just like when you build your widget trees in "native" flutter.

You may also think this will work:

YourWidget()
  .backgroundColor(Colors.blue)
  .borderRadius(all: 5);

By working i mean you will see the border radius, but you don`t, and the reason is simple. (almost) every method applied will generate a new widget. This means under the hood this will look like:

DecoratedBox(
  decoration: BoxDecoration(
    color: Colors.blue,
  ),
  child: DecoratedBox(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(5),
    ),
    child: YourWidget(),
  )
);

The border radius is not applied to the same widget as the background color and the effect will not be visible. You therefore have to use the decorated method.

YourWidget()
  .decorated(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(5),
  );