# Themes & Styling
## Введение
Вы можете управлять стилями пользовательского интерфейса вашего приложения с помощью тем. Темы позволяют изменять, например, размер шрифта текста, внешний вид кнопок и общий облик приложения.
Если вы новичок в работе с темами, примеры на сайте Flutter помогут вам начать здесь.
Из коробки Nylo включает предварительно настроенные темы для `светлого режима` и `тёмного режима`.
Тема также будет обновляться, если устройство переключается в 'светлый/тёмный' режим.
## Светлая и тёмная темы
- Светлая тема - `lib/resources/themes/light_theme.dart`
- Тёмная тема - `lib/resources/themes/dark_theme.dart`
Внутри этих файлов вы найдёте предварительно определённые ThemeData и ThemeStyle.
## Создание темы
Если вы хотите иметь несколько тем для вашего приложения, у нас есть простой способ это сделать. Если вы новичок в работе с темами, следуйте инструкции.
Сначала выполните следующую команду в терминале
``` bash
metro make:theme bright_theme
```
Примечание: замените **bright_theme** на название вашей новой темы.
Это создаст новую тему в директории `/resources/themes/` и файл цветов темы в `/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( // новая тема добавлена автоматически
id: 'Bright Theme',
description: "Bright Theme",
theme: brightTheme,
colors: BrightThemeColors(),
),
];
```
Вы можете изменить цвета для вашей новой темы в файле **/resources/themes/styles/bright_theme_colors.dart**.
## Цвета темы
Для управления цветами темы в вашем проекте обратитесь к директории `lib/resources/themes/styles`.
Эта директория содержит цвета стилей для light_theme_colors.dart и dark_theme_colors.dart.
В этом файле у вас должно быть что-то подобное.
``` 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;
}
```
## Использование цветов в виджетах
``` dart
import 'package:flutter_app/config/theme.dart';
...
// получает цвет фона светлой/тёмной темы в зависимости от текущей темы
ThemeColor.get(context).background
// пример использования класса "ThemeColor"
Text(
"Hello World",
style: TextStyle(
color: ThemeColor.get(context).content // Color - content
),
),
// или
Text(
"Hello World",
style: TextStyle(
color: ThemeConfig.light().colors.content // Цвета светлой темы - primary content
),
),
```
## Базовые стили
Базовые стили позволяют настраивать цвета различных виджетов из одного места в коде.
Nylo поставляется с предварительно настроенными базовыми стилями для вашего проекта, расположенными в `lib/resources/themes/styles/color_styles.dart`.
Эти стили предоставляют интерфейс для цветов вашей темы в `light_theme_colors.dart` и `dart_theme_colors.dart`.
Файл `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;
}
```
Вы можете добавить дополнительные стили здесь и затем реализовать цвета в вашей теме.
## Переключение темы
Nylo поддерживает возможность переключения тем на лету.
Например, если вам нужно переключить тему, когда пользователь нажимает кнопку для активации "тёмной темы".
Вы можете реализовать это следующим образом:
``` dart
import 'package:nylo_framework/theme/helper/ny_theme.dart';
...
TextButton(onPressed: () {
// установить тёмную тему
NyTheme.set(context, id: "dark_theme");
setState(() { });
}, child: Text("Dark Theme")
),
// или
TextButton(onPressed: () {
// установить светлую тему
NyTheme.set(context, id: "light_theme");
setState(() { });
}, child: Text("Light Theme")
),
```
## Шрифты
Обновить основной шрифт во всём приложении очень просто в Nylo. Откройте файл `lib/config/design.dart` и измените следующее.
``` dart
final TextStyle appThemeFont = GoogleFonts.lato();
```
Мы включаем библиотеку GoogleFonts в репозиторий, чтобы вы могли начать использовать все шрифты с минимальными усилиями.
Чтобы обновить шрифт на другой, вы можете сделать следующее:
``` dart
// СТАРЫЙ
// final TextStyle appThemeFont = GoogleFonts.lato();
// НОВЫЙ
final TextStyle appThemeFont = GoogleFonts.montserrat();
```
Ознакомьтесь со шрифтами в официальной библиотеке Google Fonts, чтобы узнать больше
Нужно использовать пользовательский шрифт? Ознакомьтесь с этим руководством - https://flutter.dev/docs/cookbook/design/fonts
После добавления шрифта измените переменную, как в примере ниже.
``` dart
final TextStyle appThemeFont = TextStyle(fontFamily: "ZenTokyoZoo"); // ZenTokyoZoo используется как пример пользовательского шрифта
```
## Дизайн
Файл **config/design.dart** используется для управления элементами дизайна вашего приложения.
Переменная `appFont` содержит шрифт вашего приложения.
Переменная `logo` используется для отображения логотипа вашего приложения.
Вы можете изменить **resources/widgets/logo_widget.dart**, чтобы настроить отображение логотипа.
Переменная `loader` используется для отображения индикатора загрузки. Nylo будет использовать эту переменную в некоторых вспомогательных методах как виджет загрузки по умолчанию.
Вы можете изменить **resources/widgets/loader_widget.dart**, чтобы настроить отображение индикатора загрузки.
## Расширения текста
Вот доступные расширения текста, которые вы можете использовать в Nylo.
| Название правила | Использование | Описание |
|---|---|---|
| Display Large | displayLarge() | Применяет текстовую тему **displayLarge** |
| Display Medium | displayMedium() | Применяет текстовую тему **displayMedium** |
| Display Small | displaySmall() | Применяет текстовую тему **displaySmall** |
| Heading Large | headingLarge() | Применяет текстовую тему **headingLarge** |
| Heading Medium | headingMedium() | Применяет текстовую тему **headingMedium** |
| Heading Small | headingSmall() | Применяет текстовую тему **headingSmall** |
| Title Large | titleLarge() | Применяет текстовую тему **titleLarge** |
| Title Medium | titleMedium() | Применяет текстовую тему **titleMedium** |
| Title Small | titleSmall() | Применяет текстовую тему **titleSmall** |
| Body Large | bodyLarge() | Применяет текстовую тему **bodyLarge** |
| Body Medium | bodyMedium() | Применяет текстовую тему **bodyMedium** |
| Body Small | bodySmall() | Применяет текстовую тему **bodySmall** |
| Label Large | labelLarge() | Применяет текстовую тему **labelLarge** |
| Label Medium | labelMedium() | Применяет текстовую тему **labelMedium** |
| Label Small | labelSmall() | Применяет текстовую тему **labelSmall** |
| Font Weight Bold | fontWeightBold | Применяет жирное начертание к текстовому виджету |
| Font Weight Light | fontWeightLight | Применяет лёгкое начертание к текстовому виджету |
| Set Color | setColor(context, (color) => colors.primaryAccent) | Устанавливает другой цвет текста для виджета Text |
| Align Left | alignLeft | Выравнивание текста по левому краю |
| Align Right | alignRight | Выравнивание текста по правому краю |
| Align Center | alignCenter | Выравнивание текста по центру |
| Set Max Lines | setMaxLines(int maxLines) | Установить максимальное количество строк для текстового виджета |
#### 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()
```
#### Жирное начертание
``` dart
Text("Hello World").fontWeightBold()
```
#### Лёгкое начертание
``` dart
Text("Hello World").fontWeightLight()
```
#### Установка цвета
``` dart
Text("Hello World").setColor(context, (color) => colors.content)
// Цвет из ваших colorStyles
```
#### Выравнивание по левому краю
``` dart
Text("Hello World").alignLeft()
```
#### Выравнивание по правому краю
``` dart
Text("Hello World").alignRight()
```
#### Выравнивание по центру
``` dart
Text("Hello World").alignCenter()
```
#### Установка максимального количества строк
``` dart
Text("Hello World").setMaxLines(5)
```