Widgets

styled_widget works with any widget by default. But it also comes with some new ones as well as giving special treatment to some common widgets.

Styled

The extension of Widget which styled_widget is based on is called Styled. If you don't want to specify a specific child, like Text, then you should use Styled.

Styled.widget(child: Widget);

You can use it to for example define a style that does not have a specific child.

Widget card(Widget child) => Styled.widget(child: child)
  .padding(all: 20)
  .decorated(
    color: Colors.white,
    borderRadius: BorderRadius.circular(5),
  )
  .elevation(10);

Then you can use it

Widget build(BuildContext context) {
  return card(child: Text('some text'));
}

You could also do this

Widget card ({Widget child}) => child
  .padding(all: 20)
  .decorated(
    color: Colors.white,
    borderRadius: BorderRadius.circular(5),
  )
  .elevation(10);

But if the child is null in this case, flutter will throw an error.

As you can see in the example, backgroundColor and borderRadius is combined into the decorated method. If you write it like this:

Widget card ({Widget child}) => child
  .padding(all: 20)
  .backgroundColor(Colors.white)
  .borderRadius(all: 5)
  .elevation(10);

then the backgroundColor and borderRadius will each generate their own widget and the borderRadius will not be visible since the background color of the widget where the border radius is applied is transparent.

Text (and TextSpan)

styled_widget gives even more methods to the Text widget like bold and fontSize to make it even easier to style, however this is not recommended due to unnecessary expensive to build. This is because each method has to rebuild the Text widget with the updated style.

Text('some text')
  .bold()
  .fontSize(24)

Icon

The same goes for Icon.

Icon(Icons.some_icon)
  .iconColor(Colors.amber)
  .iconSize(18)