ThemeData implementation

[ReinBentdal]

Was thinking about ways to implement ThemeData into Division.

// TxtStyle.themeData.create(dynamic key)
TxtStyle.themeData.create('button')
  ..borderRadius(all: 10)
  ..elevation(10)
  etc...

  // and maybe
  ..primaryColor(Colors.orange)
  etc...

Widget build(BuildContext context) {
...
Txt(
  'some text',
  style: TxtStyle.themeData.use('button')
    ..rotate(0.5) // posibility to customize default style 
)
...
}

Something like this. And maybe it could respond to theme data set globaly, like brightness: Brightness.dark in some way.

useGlobalTheme for default background color etc.

TxtStyle({AngleFormat angleFormat, bool useGlobalTheme = true}) // or default to false

What do you think? I need feedback to further develop the idea or potentialy discard it. Thanks!

[ReinBentdal]

Another example

enum style = { elevatedButton, text, etc.. }

TxtStyle.themeData.create(style.elevatedButton)
  ..elevation(10)
  etc...

Widget build(BuildContext context) {
...
Txt(
  'some text',
  style: TxtStyle.themeData.use(style.elevatedButton)
)
...
}

There might be some more elegant solutions by using the new Dart 2.6 features: https://www.youtube.com/watch?v=GkEuRVkeLpw

[moraispgsi]

Can you elaborate on what is the current alternative to doing this? I think you should expose the problem first instead of the solution. Then we can really see what can be improved.

[thize]

i liked this, with this i not need to create a global widget with an Style. i just need create a global styles

[ReinBentdal]

The idea is to better integrate the way flutter want you to define global style and to for example toggle dark mode. Essentially it would work kinda like how ThemeData works now.
This is of course possible with the current way of styling, however it is not very intuitive.
This could make it more intuitive to connect your styled widget to globally defined style and to easier implement dark mode for example.

On the other hand, maybe it is just as good to do it the way it is now.

[Jeanlo]

I think it would be cool if you could set styles to light and dark theme on any division class and to multiple keys at once like:

// ThemeStyle.of(Brightness brightness).create(Map<String, CoreStyle> themeStyle)

ThemeStyle.of(Brightness.light).create({
    'button': TxtStyle()..borderRadius(all: 10)..elevation(10)..textColor(Colors.blue),
    'card': ParentStyle()..background.color(Colors.white),
});

ThemeStyle.of(Brightness.dark).create({
    'button': TxtStyle()..borderRadius(all: 10)..elevation(10)..textColor(Colors.lightBlue),
    'card': ParentStyle()..background.color(Colors.black),
});

Also it could be useful to have a global style to all brightness, as a way to doesn't have to repeat TxtStyle()..borderRadius(all: 10)..elevation(10) because it's the same on both light and dark themes, so we can have something like:

// ThemeStyle.createGlobalStyling(Map<string, CoreStyle> themeStyle)

ThemeStyle.createGlobalStyling({
    'button': TxtStyle()..borderRadius(all: 10)..elevation(10)
});

// ThemeStyle.getGlobal(String key)

ThemeStyle.of(Brightness.light).create({
    'button': ThemeStyle.getGlobal('button')..textColor(Colors.blue),
    'card': ParentStyle()..background.color(Colors.white),
});

ThemeStyle.of(Brightness.dark).create({
    'button': ThemeStyle.getGlobal('button')..textColor(Colors.lightBlue),
    'card': ParentStyle()..background.color(Colors.black),
});

[Jeanlo]

About using enum I've been discussing for months with a coworker, because he wants to use enum to get autocomplete but I want to use String for simplicity. I think the best solution is Swift's that let you use . operator to get a value from enum. In Dart we have to do things like mainAxisAlignment: MainAxisAlignment.end whereas in Swift it will be mainAxisAlignment: .end.

Probably that's the kind of elegant solution you could achieve with Dart 2.6's extensions as seen in the video that you mentioned. But I don't know how to implement it because I'm not using Dart 2.6.