Использование тем Flutter для кроссплатформенной целевой страницы (Интернет, Android, iOS)
Эта статья является продолжением Делаем кроссплатформенную целевую страницу Flutter адаптивной. В предыдущем посте мы узнали, как сделать кросс-платформенную (Web, Android и iOS) целевую страницу адаптивной для различных форм-факторов. В этом посте мы увидим, как мы можем быстро изменить внешний вид или тему целевой страницы, просто изменив небольшой фрагмент кода.
Посмотрите сопутствующее видео:
Часть-3. (Пользовательские шрифты-Web)
Часть-3а. (Пользовательские шрифты — родная демонстрация)
Цель: Наша цель — создать темы для кроссплатформенной целевой страницы Flutter (веб-приложения и нативные приложения).
Тема № 1: Синяя тема Использует пользовательский шрифт Инди Цветок и синий цвет для раздела заголовка. Кнопка «Подписаться» демонстрирует локальную тематику виджета.
Тема № 2: Фиолетовая тема Использует фиолетовый цвет для раздела заголовка. Шрифт или стиль текста по умолчанию не указаны. Кнопка «Подписаться» демонстрирует локальную тематику виджета.
Тема № 3: Зеленая тема Использует зеленый цвет для раздела заголовка. Не указан шрифт по умолчанию. Навигационные ссылки в шапке выделены курсивом. Кнопка «Подписаться» демонстрирует локальную тематику виджета.
Введение
Эта статья является третьей в Разработка кроссплатформенного прототипа Flutter для целевой страницы серии. В этой статье я покажу вам, как создавать и использовать Флаттер Темы для целевой страницы.
Два способа реализации тем во Flutter:
Глобальная тема: этот тип темы влияет на все приложение. Глобальные темы реализованы с помощью ThemeData
Локальные темы: это отвечает за внесение изменений в одну часть приложения, а не в любую другую часть приложения. Локальные темы реализованы с помощью Theme виджет и передача конкретных ThemeData экземпляр к нему.
Давайте начнем с определения глобальной темы, скажем AppThemeBlue для нашей целевой страницы. Позже я покажу вам, как тема конкретного виджета (скажем, SubscribeButton) может быть изменена с помощью Theme виджет.
В этой статье рассматриваются три аспекта темы Flutter:
- Часть №1: Как создавать и использовать темы Global App
- Часть 2: Как создавать и использовать локальные темы для виджета
- Часть № 3: Как использовать пользовательские шрифты в темах
Часть №1: Как создавать и использовать темы Global App
Я создал служебный класс MyAppThemes чтобы отслеживать все мои настройки, связанные с темами. Все методы этого класса static. Я буду использовать три цвета темы: синий (по умолчанию), зеленый и фиолетовый, чтобы продемонстрировать разные темы. Я создал еще один служебный класс MyColors чтобы все цвета были в одном месте. Это дает мне возможность изменять оттенки любого конкретного цвета на желаемый в одном месте, а не искать каждое вхождение во всей кодовой базе.
Определение глобальной темы приложения : Нам нужно настроить ThemeDataатрибуты для достижения желаемого внешнего вида приложения. Я использовал разные оттенки синего для primaryColor, secondaryHeaderColor а также accentColor. Я буду ссылаться на тот или иной из этих цветов из виджетов моего приложения позже из базы кода.Примечание: Я использую предопределенные цвета в MyColors класс, который я назвал именем цвета с префиксом типа blue1, blue2 и т. д. для всех цветов, которые я использовал в своем веб-приложении.
Вот как будет выглядеть базовая тема в синем цвете (все цвета используются как разные оттенки синего).Примечание: В этой статье я буду реализовывать только более легкую тему. Вы можете прочитать больше о brightness атрибут здесь.
static ThemeData AppThemeBlue(BuildContext context) {
return ThemeData(
brightness: Brightness.light,
primaryColor: MyColors.blue1,
secondaryHeaderColor: MyColors.blue2,
accentColor: MyColors.blue3,
);
}
Давайте определим Зеленую и Фиолетовую темы, как показано ниже. Все, что нам нужно сделать, это выбрать наши любимые оттенки этих цветов для primaryColor, secondaryHeaderColor а также accentColor атрибуты.
Реализация зеленой темы:
static ThemeData AppThemeGreen(BuildContext context) {
return ThemeData(
// Define the default brightness and colors for the overall app.
brightness: Brightness.light,
primaryColor: MyColors.green1,
secondaryHeaderColor: MyColors.green2,
accentColor: MyColors.green3,
);
}
Реализация фиолетовой темы:
static ThemeData AppThemePurple(BuildContext context) {
return ThemeData(
// Define the default brightness and colors for the overall app.
brightness: Brightness.light,
primaryColor: MyColors.purple1,
secondaryHeaderColor: MyColors.purple2,
accentColor: MyColors.purple3,
);
}
ТекстТемы: Давайте определим текстовую тему по умолчанию, как показано ниже. мы будем использовать это textTheme для наших синих и фиолетовых тем.
// Define the default TextTheme for headline, title and body text
static TextTheme getDefaultTextTheme(BuildContext context) {
return TextTheme(
headline: TextStyle(fontSize: 36.0, fontWeight: FontWeight.bold),
title: TextStyle(
fontSize: 20.0,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold),
body1: TextStyle(
fontSize: 26.0,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.normal),
);
}
Расширение родительских тем: Расширение родительской темы означает возможность изменить несколько атрибутов родительской темы, сохраняя при этом другие атрибуты. В этом примере мы обновим textTheme. Наша GreenTheme будет использовать этот пример. Скажем, мы хотим сделать наш текст заголовка курсивом. Обратите внимание на выделенный курсивом текст в разделе заголовка на изображениях выше.
//Example of extending the parent theme. Overwrites textTheme with given attributes
static TextTheme getItalicTitleTextTheme(BuildContext context) {
return Theme.of(context).textTheme.copyWith(
title: TextStyle(
fontSize: 20.0,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold),
);
}
Интеграция TextTheme в ThemeData: Темы Blue и Purple будут использовать textTheme по умолчанию:
static ThemeData AppThemeBlue(BuildContext context) {
return ThemeData(
...
textTheme: getDefaultTextTheme(context),
);
}
static ThemeData AppThemePurple(BuildContext context) {
return ThemeData(
...
textTheme: getDefaultTextTheme(context),
);
}
Зеленая тема будет использовать расширенный textTheme getItalicTitleTextTheme():
static ThemeData AppThemeGreen(BuildContext context) {
return ThemeData(
...
textTheme: getItalicTitleTextTheme(context),
);
}
Использование пользовательских тем в main.dart:
Вы можете настроить тему, изменив theme атрибут MaterialApp как показано ниже:
//entrance into app
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
...
//This is where you can call a new theme !
theme: MyAppThemes.AppThemeGreen(context),
...
);
}
}
Вы заметите одинаковую текстовую тему для синей и фиолетовой темы. Для GreenTheme вы увидите курсивные навигационные ссылки в разделе заголовка. Ниже приведены снимки экрана для всех тем на данном этапе. Обратите внимание, что все кнопки имеют одинаковую тему в соответствии с их основным цветом темы.
_ Тема №1 BlueTheme: _ Использование синего цвета для всех кнопок.
Тема №2 Фиолетовая тема: Использование фиолетового цвета для всех кнопок.
Тема №3 Зеленая тема: Использование зеленого цвета для всех кнопок. Навигационные ссылки в шапке выделены курсивом.
Часть 2: Как создавать и использовать локальные темы для виджета
Теперь мы хотим, чтобы конкретная кнопка с надписью «Подписаться» была окрашена в оранжевый цвет. Как бы мы это сделали? Вот где местные темы пригодятся. Давайте посмотрим, как мы можем определить локальную тему. В EmailBox class, кнопка подписки добавляется, как показано ниже:
...
Expanded(
flex: 2,
child: SubscribeButton(),
)
...
Мы можем использовать Theme виджет для обертывания SubscribeButton() виджет. Пройти местную тему ThemeData в качестве data атрибут Theme виджет и добавить SubscribeButton() виджет как дочерний. В местных ThemeDataвы можете перезаписать primaryColor, secondaryHeaderColor а также accentColor. В этом примере я использую оранжевые оттенки. Преимущество этого подхода заключается в том, что виджеты не зависят от темы. Например, фирменный логотип — это то, что вы можете оставить как есть, даже если вы захотите изменить внешний вид всего своего приложения.
Expanded(
flex: 2,
child:
//Example of applying local themes to a certain widget in app
Theme(
data: ThemeData(
primaryColor: MyColors.orange1,
secondaryHeaderColor: MyColors.orange2,
accentColor: MyColors.orange3,
),
child: SubscribeButton(),
))
Вот как будет выглядеть SubscribeButton для всех тем:
Часть № 3: Как использовать пользовательские шрифты в темах
Давайте перейдем к использованию пользовательских шрифтов на вашей целевой странице. Во-первых, вы можете загрузить (или получить у своего дизайнера) пользовательский шрифт по вашему выбору с вашей любимой платформы. Я использую веб-сайт Google Fonts для загрузки пользовательского шрифта для этого примера. я хочу использовать Инди Цветочный Шрифт только для моей BlueTheme. Настройка пользовательских шрифтов во Flutter Web немного отличается от настройки приложений Flutter Native.
Пользовательские шрифты для Интернета:
Давайте сначала изучим Flutter Web:
- я скачал
IndieFlower.ttfиз Веб-сайт шрифтов Google. - Копировать
IndieFlower.ttfфайл вweb/assetsкаталог. - Создавать
FontManifest.jsonфайл внутриweb/assetsкаталог со следующим содержимым:
[
{
"family": "Indie Flower",
"fonts": [
{
"asset": "IndieFlower.ttf"
}
]
}
]
- Обновите BlueTheme, чтобы включить
fontFamilyкак «Инди-цветок»:
static ThemeData AppThemeBlue(BuildContext context) {
return ThemeData(
...
// I used custom font for the default font family.
fontFamily: 'Indie Flower',
...
);
Это в значительной степени к этому! Вот скриншот веб-версии:
Пользовательские шрифты в Native (Android, iOS):
Давайте сделаем так, чтобы пользовательские шрифты работали для нативной целевой страницы. Нам нужно будет внести два изменения:
- Не забудьте обновить нативную версию зависимостей флаттера, как описано в другой моей статье о запуск целевой страницы флаттера кросс-платформенной в Интернете и нативной.
- Скопируйте файл шрифтов «IndieFlower.ttf» внутри каталога шрифтов как
fonts/IndieFlower.ttfкаталог. - Обновите конфигурацию, связанную со шрифтами, в
pubspec.yaml:
fonts:
- family: Indie Flower
fonts:
- asset: fonts/IndieFlower.ttf
Скриншот окончательной целевой страницы на платформе Android:
Скриншот окончательной целевой страницы на платформе iOS:
Продолжай трепетать!
Репозитории исходного кода:
Ссылки/Кредиты:
Удачной готовки с Flutter 
Понравилась статья? Не нашли интересующую вас тему? Пожалуйста, оставьте комментарии или напишите мне о темах, которые вы хотели бы, чтобы я написал 
