The future of styling widgets (new package)

[ReinBentdal]

I have made a new package called styled_widget which uses the new dart extension feature added in dart version 2.6.0. This is just an early concept.

GitHub: https://github.com/ReinBentdal/styled_widget
Pub: https://pub.dev/packages/styled_widget (Pub clearly didnt like dart version 2.6.0)

What do you think? Is there a future in styling widgets this way? If you like the concept or dont, let me know! Of course contributions are very welcome.

[moraispgsi]

The problem I see with this approach is that you cannot hoist/abstract the styling like you would in CSS. Maybe explore the decorator pattern for it, who knows.

[ReinBentdal]

Yes its not possible to create style like in Division. I assume the flutter team wants us to use ThemeData to style general widgets. This only works for some general widgets like Card, AppBar, Button, etc, but maybe that is enough.

This could be a way to decouple style

final Styled textStyle = Styled.text()
  .backgroundColor(Colors.blue)

final Styled iconStyle = Styled.icon()
  .iconSize(24)
  .alignment(Alignment.center)

final Styled widgetStyle = Styled.widget()
  .bordeRadius(all: 10)

Widget build(BuildContext context) {
...
Text('some text').style(textStyle),
Icon(Icons.icon).style(iconStyle),
Container().style(widgetStyle)
...
}

[moraispgsi]

@ReinBentdal This looks like the way it is supposed to be. It is inviting for any React.js enthusiast.

[moraispgsi]

@ReinBentdal I would like to help you out in this direction, it looks promising. I don't have much time on my hands but I can help. Just lead the way.

[ReinBentdal]

This is probably the easiest way to decouple style in my opinion

final styledWidget = (Widget child) => Styled.widget(child)
  .backgroundColor(Colors.blue)
  .constraints(width: 100, height: 100)
  .borderRadius(all: 10)
  .elevation(10)
  .alignment(Alignment.center);

This makes to coding part much easier as well

extension Styled on Widget {
  static Widget widget([Widget child]) => ...
}