🌈Colors e Fonts

custom_colors.dart & fonts.dart

Estes dois arquivos são referentes aos estilos usados na aplicação, se referindo a uma base de cores e fontes para serem utilizadas.

Por quê utilizar arquivos de cores e fontes e não fazer uso direto na tela? Principalmente pensando na manutenção, caso exista a necessidade de alguma mudança geral no app, ela seria realizada apenas nestes arquivos, e não por todo o projeto.

No arquivo de fontes, tem criado alguns objetos estáticos do tipo TextStyle, de fontes maiores até algumas menores. O exemplo de dois desses objetos criados por lá:

static TextStyle headline1 = const TextStyle(
    fontSize: 32,
    fontWeight: FontWeight.w700,
  );

static TextStyle caption = const TextStyle(
    fontWeight: FontWeight.w400,
    fontSize: 12,
  );

No arquivo de cores, mantemos as principais cores utilizadas no projeto, em objetos estáticos do tipo HexColor/Color como por exemplo: a cor primária, a cor secundária, cor de erro, cor de warning, cor de successo, cor de background, entre outras. Este arquivo pode ir sendo alterado de acordo com as necessidades, o importante é sempre adicionar por lá quando se deseja utlizar alguma nova cor.

Exemplo da declaração desses objetos:

static Color primary = HexColor("#3E33E3");
static Color secondary = HexColor("#926DDA");

A maneira que fazemos o uso desses objetos, tanto o de fontes quanto o de cores esta no código abaixo. Neste exemplo, ainda fazemos o uso do copyWith para alterar dentro do estilo a sua cor, mas é possível utilizar sem o uso do copyWith.

Text(
  "Texto aqui",
  style: Fonts.headline5.copyWith(
  color: CustomColors.white,
 ),
),