I'm working on a big app tightly with the designer.
I was a part of the style guide and the component design process,
the designer handed off his work and now its my turn to translate some prototypes and styles to real flutter app.
I'm having a really hard time translating the style guide to flutter widgets.
For example, I have a custom chip widget created from scratch, with many style properties.
There are two main different styles for this chip (normal and highlighted),
and the chip is used widely (I believe more than 50 references), excluding other more complex widgets using it.
I tried :
- Creating a style class for each big widget, and created extension on ThemeData.
class MyCustomChip extends StatelessWidget {
Widget build(BuildContext context) {
final style = Theme.of(context).myCustomChip;
/** return the custom chip **/
}
}
class MyCustomChipStyle {
/** many style properties **/
}
extension MyCustomChipThemeData on ThemeData {
MyCustomChipStyle get myCustomChip => ...
}
- Created a static style class, and passed relevant style properties every time the widget used.
class MyCustomChip extends StatelessWidget {
final Color color;
final BorderRadius borderRadius;
/** many more styling properties **/
}
abstract class MyCustomChipValues {
static const BorderRadius kBorder = /** Getting value from a predefined radiuses **/
static const Color kColor = /** Getting value from a predefined palette **/
/** Many more **/
}
class WidgetUsingTheChip extends StatelessWidget {
Widget build(BuildContext context) {
/** those lines will be duplicated alot **/
return MyCustomChip(
color: MyCustomChipValues.kColor,
borderRadius: MyCustomChipValues.kBorder,
/** Many more **/
);
}
}
- Used all the relevant style properties inside the custom widget, and didn't expose them.
abstract class MyCustomChipValues {
static const BorderRadius kBorder = /** Getting value from a predefined radiuses **/
static const Color kColor = /** Getting value from a predefined palette **/
/** Many more **/
}
class MyCustomChip extends StatelessWidget {
Widget build(BuildContext context) {
/** making it virtually impossible to change style depending on state **/
return Container(
color: MyCustomChipValues.kColor,
/** Many more **/
);
}
}
class WidgetUsingTheChip extends StatelessWidget {
Widget build(BuildContext context) {
return MyCustomChip();
}
}
I have defined other style classes :
- Insets (various paddings and margins)
- Colors (our palette, with buttons, chips, input, scaffold, etc..)
- BorderRadiuses
- Shadows
- Animations (duration and curve)
- Guidelines (based on the gutter and the design grid we prototyped with)
- Other classes...
I cant wrap my head on which of the following is more easy to maintain and refactor in the time of need..
Any suggestion on how to manage this whole Style guide -> code will be helpful,
especially on how to manage custom widget styles.
Thanks !
I would recommend using
InheritedWidget
, then you don't have to rely on external packages.For example:
You could create these and add to your
CustomStyle
in whatever way you want, maybe have multiple class depending on the widget, or separate them by colors.Wrap your
MaterialApp
with yourCustomStyle
, pass your data.Then you can access you styling in all your custom widgets:
Any questions just let me know.