Skip to content
Frenco edited this page Feb 24, 2020 · 8 revisions

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)
  .backgroundColor(Colors.white)
  .borderRadius(all: 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)
  .backgroundColor(Colors.white)
  .borderRadius(all: 5)
  .elevation(10);

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

Text (and TextSpan)

styled_widget gives even more methods to the Text widget like bold and fontSize to make it even easier to style

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

Icon

The same goes for Icon.

Icon(Icons.some_icon)
  .iconColor(Colors.amber)
  .iconSize(18)
Clone this wiki locally