A ideia aqui é centralizar tudo o que é referente a determinado componente, estilos, construtores, e a componentização mesmo do widget.
Cada componente é dividido em 3 arquivos:
- começando pelo aquivo com o prefixo _style, é responsável pela definição dos parâmetros que estilizam o componente
class AtlasExampleStyle {
final Color? backgroundColor;
final BoxDecoration boxDecoration;
AtlasExampleStyle({this.backgroundColor, required this.boxDecoration});
}
class AtlasExampleSharedStyle {
final Style<AtlasTextStyle, AtlasTextSharedStyle> textStyle;
AtlasExampleSharedStyle({required this.textStyle});
}
- o arquivo _styles contém os estilos pré-definidos
class AtlasExampleStyles {
static Style<AtlasExampleStyle, AtlasExampleSharedStyle> standard() =>
Style<AtlasExampleStyle, AtlasExampleSharedStyle>(
regular: AtlasExampleStyle(
boxDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
),
loading: AtlasExampleStyle(
boxDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
),
disabled: AtlasExampleStyle(
backgroundColor: AtlasTheme.t().color.danger,
boxDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
),
error: AtlasExampleStyle(
backgroundColor: AtlasTheme.t().color.warning,
boxDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
),
shared: AtlasExampleSharedStyle(
textStyle: AtlasTextStyles.bodyStyle,
),
);
}
}
- o com prefixo '_component' que determina como o componente se comporta de acordo com o estado (behaviour)
class AtlasExampleComponent extends StatelessWidget
with Component<AtlasExampleStyle, AtlasExampleSharedStyle> {
final Behaviour behaviour;
final ComponentStyle<AtlasExampleStyle, AtlasExampleSharedStyle> styles;
const AtlasExampleComponent({
Key? key,
required this.behaviour,
required this.styles,
}) : super(key: key);
@override
Widget whenRegular(AtlasExampleStyle styles, AtlasExampleSharedStyle? otherStyles,
BuildContext context, Behaviour childBehaviour) {
return Example();
}
@override
Widget build(BuildContext context) {
return render(behaviour, context, styles);
}
}
- por fim o arquivo raiz "atlas_example.dart" define os construtores chamando determinados estilos para cada componente.
class AtlasExample extends AtlasExampleComponent {
const AtlasExample({
super.key,
required super.behaviour,
required super.text,
required super.onPressed,
required super.styles,
});
AtlasExample.standard({
super.key,
required super.text,
required super.behaviour,
onPressed,
}) : super(styles: AtlasExampleStyles.standard());
}
- Text (body, heading, caption, link)
- TextField
- Checkbox
- RadioButton
- Toggle
- Tag
- Card
- Icon
- Image
- IconButton
- Colors
- Sizes
- Icons