ThemeData во Flutter

Класс 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

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