# Themes & Styling

## Introdução Você pode gerenciar os estilos de UI da sua aplicação usando temas. Temas permitem alterar, por exemplo, o tamanho da fonte do texto, como os botões aparecem e a aparência geral da nossa aplicação. Se você é novo em temas, os exemplos no site do Flutter ajudarão você a começar aqui. Por padrão, Nylo inclui temas pré-configurados para `Modo claro` e `Modo escuro`. O tema também será atualizado se o dispositivo entrar no modo 'claro/escuro'.

## Temas Claro e Escuro - Tema claro - `lib/resources/themes/light_theme.dart` - Tema escuro - `lib/resources/themes/dark_theme.dart` Dentro desses arquivos, você encontrará o ThemeData e o ThemeStyle pré-definidos.

## Criando um tema Se você deseja ter múltiplos temas para seu app, temos uma maneira fácil para você fazer isso. Se você é novo em temas, acompanhe. Primeiro, execute o comando abaixo no terminal ``` bash metro make:theme bright_theme ``` Nota: substitua **bright_theme** pelo nome do seu novo tema. Isso cria um novo tema no seu diretório `/resources/themes/` e também um arquivo de cores do tema em `/resources/themes/styles/`. ``` dart // App Themes final List> appThemes = [ BaseThemeConfig( id: getEnv('LIGHT_THEME_ID'), description: "Light theme", theme: lightTheme, colors: LightThemeColors(), ), BaseThemeConfig( id: getEnv('DARK_THEME_ID'), description: "Dark theme", theme: darkTheme, colors: DarkThemeColors(), ), BaseThemeConfig( // new theme automatically added id: 'Bright Theme', description: "Bright Theme", theme: brightTheme, colors: BrightThemeColors(), ), ]; ``` Você pode modificar as cores do seu novo tema no arquivo **/resources/themes/styles/bright_theme_colors.dart**.

## Cores do Tema Para gerenciar as cores do tema no seu projeto, verifique o diretório `lib/resources/themes/styles`. Este diretório contém as cores de estilo para light_theme_colors.dart e dark_theme_colors.dart. Neste arquivo, você deve ter algo semelhante ao abaixo. ``` dart // e.g Light Theme colors class LightThemeColors implements ColorStyles { // general @override Color get background => const Color(0xFFFFFFFF); @override Color get content => const Color(0xFF000000); @override Color get primaryAccent => const Color(0xFF0045a0); @override Color get surfaceBackground => Colors.white; @override Color get surfaceContent => Colors.black; // app bar @override Color get appBarBackground => Colors.blue; @override Color get appBarPrimaryContent => Colors.white; // buttons @override Color get buttonBackground => Colors.blue; @override Color get buttonContent => Colors.white; @override Color get buttonSecondaryBackground => const Color(0xff151925); @override Color get buttonSecondaryContent => Colors.white.withAlpha((255.0 * 0.9).round()); // bottom tab bar @override Color get bottomTabBarBackground => Colors.white; // bottom tab bar - icons @override Color get bottomTabBarIconSelected => Colors.blue; @override Color get bottomTabBarIconUnselected => Colors.black54; // bottom tab bar - label @override Color get bottomTabBarLabelUnselected => Colors.black45; @override Color get bottomTabBarLabelSelected => Colors.black; // toast notification @override Color get toastNotificationBackground => Colors.white; } ```

## Usando cores em widgets ``` dart import 'package:flutter_app/config/theme.dart'; ... // gets the light/dark background colour depending on the theme ThemeColor.get(context).background // e.g. of using the "ThemeColor" class Text( "Hello World", style: TextStyle( color: ThemeColor.get(context).content // Color - content ), ), // or Text( "Hello World", style: TextStyle( color: ThemeConfig.light().colors.content // Light theme colors - primary content ), ), ```

## Estilos Base Estilos base permitem que você personalize várias cores de widgets a partir de uma área do seu código. Nylo vem com estilos base pré-configurados para o seu projeto localizados em `lib/resources/themes/styles/color_styles.dart`. Esses estilos fornecem uma interface para as cores do seu tema em `light_theme_colors.dart` e `dart_theme_colors.dart`.
Arquivo `lib/resources/themes/styles/color_styles.dart` ``` dart abstract class ColorStyles { // general @override Color get background; @override Color get content; @override Color get primaryAccent; @override Color get surfaceBackground; @override Color get surfaceContent; // app bar @override Color get appBarBackground; @override Color get appBarPrimaryContent; @override Color get buttonBackground; @override Color get buttonContent; @override Color get buttonSecondaryBackground; @override Color get buttonSecondaryContent; // bottom tab bar @override Color get bottomTabBarBackground; // bottom tab bar - icons @override Color get bottomTabBarIconSelected; @override Color get bottomTabBarIconUnselected; // bottom tab bar - label @override Color get bottomTabBarLabelUnselected; @override Color get bottomTabBarLabelSelected; // toast notification Color get toastNotificationBackground; } ``` Você pode adicionar estilos adicionais aqui e então implementar as cores no seu tema.

## Alternando tema Nylo suporta a capacidade de alternar temas em tempo real. Por exemplo, se você precisa alternar o tema quando um usuário toca em um botão para ativar o "tema escuro". Você pode fazer isso da seguinte forma: ``` dart import 'package:nylo_framework/theme/helper/ny_theme.dart'; ... TextButton(onPressed: () { // set theme to use the "dark theme" NyTheme.set(context, id: "dark_theme"); setState(() { }); }, child: Text("Dark Theme") ), // or TextButton(onPressed: () { // set theme to use the "light theme" NyTheme.set(context, id: "light_theme"); setState(() { }); }, child: Text("Light Theme") ), ```

## Fontes Atualizar sua fonte principal em todo o app é fácil no Nylo. Abra o arquivo `lib/config/design.dart` e atualize o abaixo. ``` dart final TextStyle appThemeFont = GoogleFonts.lato(); ``` Incluímos a biblioteca GoogleFonts no repositório, então você pode começar a usar todas as fontes com pouco esforço. Para atualizar a fonte para outra, você pode fazer o seguinte: ``` dart // OLD // final TextStyle appThemeFont = GoogleFonts.lato(); // NEW final TextStyle appThemeFont = GoogleFonts.montserrat(); ``` Confira as fontes na biblioteca oficial do Google Fonts para entender mais Precisa usar uma fonte personalizada? Confira este guia - https://flutter.dev/docs/cookbook/design/fonts Uma vez que você adicionou sua fonte, altere a variável como no exemplo abaixo. ``` dart final TextStyle appThemeFont = TextStyle(fontFamily: "ZenTokyoZoo"); // ZenTokyoZoo used as an example for the custom font ```

## Design O arquivo **config/design.dart** é usado para gerenciar os elementos de design do seu app. A variável `appFont` contém a fonte do seu app. A variável `logo` é usada para exibir o Logo do seu app. Você pode modificar **resources/widgets/logo_widget.dart** para personalizar como deseja exibir seu Logo. A variável `loader` é usada para exibir um loader. Nylo usará esta variável em alguns métodos auxiliares como o widget loader padrão. Você pode modificar **resources/widgets/loader_widget.dart** para personalizar como deseja exibir seu Loader.

## Extensões de Texto Aqui estão as extensões de texto disponíveis que você pode usar no Nylo. | Nome da Regra | Uso | Info | |---|---|---| | Display Large | displayLarge() | Aplica o textTheme **displayLarge** | | Display Medium | displayMedium() | Aplica o textTheme **displayMedium** | | Display Small | displaySmall() | Aplica o textTheme **displaySmall** | | Heading Large | headingLarge() | Aplica o textTheme **headingLarge** | | Heading Medium | headingMedium() | Aplica o textTheme **headingMedium** | | Heading Small | headingSmall() | Aplica o textTheme **headingSmall** | | Title Large | titleLarge() | Aplica o textTheme **titleLarge** | | Title Medium | titleMedium() | Aplica o textTheme **titleMedium** | | Title Small | titleSmall() | Aplica o textTheme **titleSmall** | | Body Large | bodyLarge() | Aplica o textTheme **bodyLarge** | | Body Medium | bodyMedium() | Aplica o textTheme **bodyMedium** | | Body Small | bodySmall() | Aplica o textTheme **bodySmall** | | Label Large | labelLarge() | Aplica o textTheme **labelLarge** | | Label Medium | labelMedium() | Aplica o textTheme **labelMedium** | | Label Small | labelSmall() | Aplica o textTheme **labelSmall** | | Font Weight Bold | fontWeightBold | Aplica peso da fonte negrito a um widget Text | | Font Weight Light | fontWeightLight | Aplica peso da fonte leve a um widget Text | | Set Color | setColor(context, (color) => colors.primaryAccent) | Define uma cor de texto diferente no widget Text | | Align Left | alignLeft | Alinha a fonte à esquerda | | Align Right | alignRight | Alinha a fonte à direita | | Align Center | alignCenter | Alinha a fonte ao centro | | Set Max Lines | setMaxLines(int maxLines) | Define o máximo de linhas para o widget text |

#### Display large ``` dart Text("Hello World").displayLarge() ```

#### Display medium ``` dart Text("Hello World").displayMedium() ```

#### Display small ``` dart Text("Hello World").displaySmall() ```

#### Heading large ``` dart Text("Hello World").headingLarge() ```

#### Heading medium ``` dart Text("Hello World").headingMedium() ```

#### Heading small ``` dart Text("Hello World").headingSmall() ```

#### Title large ``` dart Text("Hello World").titleLarge() ```

#### Title medium ``` dart Text("Hello World").titleMedium() ```

#### Title small ``` dart Text("Hello World").titleSmall() ```

#### Body large ``` dart Text("Hello World").bodyLarge() ```

#### Body medium ``` dart Text("Hello World").bodyMedium() ```

#### Body small ``` dart Text("Hello World").bodySmall() ```

#### Label large ``` dart Text("Hello World").labelLarge() ```

#### Label medium ``` dart Text("Hello World").labelMedium() ```

#### Label small ``` dart Text("Hello World").labelSmall() ```

#### Font weight bold ``` dart Text("Hello World").fontWeightBold() ```

#### Font weight light ``` dart Text("Hello World").fontWeightLight() ```

#### Set color ``` dart Text("Hello World").setColor(context, (color) => colors.content) // Color from your colorStyles ```

#### Alinhar à esquerda ``` dart Text("Hello World").alignLeft() ```

#### Alinhar à direita ``` dart Text("Hello World").alignRight() ```

#### Alinhar ao centro ``` dart Text("Hello World").alignCenter() ```

#### Definir máximo de linhas ``` dart Text("Hello World").setMaxLines(5) ```