Класс ThemeData во Flutter определяет конфигурацию общей отображаемой темы для MaterialApp или для дерева виджетов в приложении. Данное свойство MaterialApp можно использовать для настройки внешнего вида всего приложения. Если вы хотите в одном из виджетов (экранов приложения) изменить цвет или иное, то вам достаточно переопределить в верхней части поддерева Theme.
Т.е. иными словами, если у вас всегда будет применяться зеленый цвет во всех AppBar экранов в приложении, то вы можете всего лишь один раз задать в primaryColor: Colors.green и всегда у вас по умолчанию будет отображаться зеленый цвет. Это очень удобно, когда вы вдруг решили изменить цвет всех AppBar-ов, и вам не надо менять в каждом экране, достаточно просто его изменить в ThemeData после MaterialApp
Пример использования:
MaterialApp(
theme: ThemeData(
primaryColor: Colors.green,
accentColor: Colors.white,
textTheme: TextTheme(bodyText2: TextStyle(color: Colors.black)),
),
home: Scaffold(
appBar: AppBar(
title: const Text('ThemeData демонстрация'),
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {},
),
body: Center(
child: Text(
'Кнопка была нажата 0 раз',
),
),
),
)
Конструкторы ThemeData
Давайте разберем некоторые конструкторы ThemeData
Brightness – это перечисляемый тип (enum) имеет следующие свойства: dark – цвет темный, для достижения четкого контраста потребуется при отображении светлый цвет текста (пример const Brightness(0) ), light – цвет светлый и для достижения контраста необходимо, применять черный цвет текста пример const Brightness(0).
VisualDensity – данный свойство определяет отображаемую плотность компонентов. По горизонтали и по вертикали. По умолчанию такая плотность равна нулю, что соответствует тому как вы разместите свои виджеты на экране, то так и будет отображаться. Это не влияет на размеры текста или отступы. Например для кнопки это влияет на интервал вокруг ее дочерних элементов. Для списков (ListView) расстояние между базовой линией и записями в списке.
Значения по умолчанию в ThemeData visualDensity – это VisualDensity.standart, которое имеет значения VisualDensity(horizontal: 0.0, vertical: 0.0)
Свойство baseSizeAdjustment VisualDensity:
baseSizeAdjustment — – базовая корректировка в логических пикселях визуальной плотности компонентов интерфейса у пользователя. Входные значения плотности умножаются на константу, чтобы получить скорректированный размеры базового элемента
Offset get baseSizeAdjustment {
const double interval = 4.0;
return Offset(horizontal, vertical) * interval
}
В MaterialApp рекомендовано увеличивать/ уменьшать шаг пикселей равному четырем
Вы также можете задать отдельно и вертикальные и горизонтальные значения плотности в дочернем виджите
Свойство horizontal (double)– значение горизонтальной плотности
Свойство vertical (double) – значение горизонтальной плотности.
Самое часто используемое свойство это adaptivePlatformDensity – свойство, которое адаптирует экраны приложения под конкретную платформу. Фрагмент реализации свойства из официальной документации:
static VisualDensity get adaptivePlatformDensity {
switch (defaultTargetPlatform) {
case TargetPlatform.android:
case TargetPlatform.iOS:
case TargetPlatform.fuchsia:
break;
case TargetPlatform.linux:
case TargetPlatform.macOS:
case TargetPlatform.windows:
return compact;
}
return const VisualDensity();
}
Для настольных платформ, данное свойство возвращает – compact const. Это значит, при получении такого значения будут равны: horizontal: -2.0, vertical: -2.0, т.е соответствовать плотности -2 по обеим осям
Пример static const VisualDensity compact = VisualDensity(horizontal: -2.0, vertical: -2.0)
Помимо compact, есть comfortable, его значения соответствуют значениям horizontal: -1.0, vertical: -1.0
Также есть:
maximumDensity соответствует минимальной плотности
maximumDensity – соответствует максимальной плотности
standard – то что определено в ThemeData в профиле
Еще некоторые свойства class ThemeData Flutter
Какие еще есть настраиваемые свойства у ThemeData Flutter? Как обычно, полный перечень свойств вы можете увидеть на официальной странице api.flutter.dev, мы здесь укажем лишь часть:
cursorColor – устанавливает цвет курсора в текстовых полях приложения,
dialogBackgroundColor – как видно из самого названия, устанавливает цвет фона в диалоговых окнах вашего приложения,
disabledColor – цвет, используемый для неработающих виджетов, независимо от их состояния, например, отключенный флажок
errorColor – цвет, который возникает после обнаружения ошибки, например в полях ввода TextField
hintColor – цвет, который используется при подсказки, например в полях TextField
splashColor – очень интересное свойство. Попробуйте его на виджете Inkwell, эффект появляется после нажатия на кнопку
И кстати, недавно у нас вышла короткая статья о проблемах в заголовках в http запросах во Flutter, ознакомиться с нашим опытом можно по этой ссылке — Проблема с headers при http-запросах во Flutter