Рубрики
Flutter

Использование Flutter Color для заливки фона

Есть два способа использования Flutter Color, чтобы залить фон виджета во Флаттере. Я пока не знаю, есть ли способы лучше этих, можете дополнить статью в комментариях.

Container, как сказано в документации Flutter, старается заполнить все свободное пространство. А также, контейнер может принять свйоство decoration, которое может быть BoxDecoration, которое может иметь color — здесь он представляет как раз цвет фона.

Способ первый: используйте встроенный класс Color.class:

Container(
 color: Colors.green,
)

Способ второй: decoration с BoxDecoration:

Container(
      decoration: new BoxDecoration(color: Colors.grey),
    );
  

Класс Flutter Color

Константы Color и ColorSwatch представляют цветовую палитру Material design.

Вместо использования абсолютного цвета из этих палитр, рассмотрите возможность использования темы Theme.of. для получения локальной структуры ThemeData, которая предоставляет цвета, выбранные для текущей темы, например ThemeData.primaryColor и ThemeData.accentColor.

Большинство образцов имеют цвета от 100 до 900 с шагом в сто, плюс цвет 50. Чем меньше число, тем бледнее цвет. Чем больше число, тем темнее цвет. Образцы акцентов (например, redAccent) имеют только значения 100, 200, 400 и 700.

Кроме того, имеется ряд черных и белых цветов с общими opacity. Например, black50 — это чистый черный цвет с непрозрачностью 50%.

Пример зеленого:

Color selection = Colors.green[400];

Полный перечень Flutter Colors посмотрите в документации здесь.

Черные и белые цвета во Флаттере

Эти цвета идентифицируются по их прозрачности. Низкие уровни прозрачности (например, Colors.white12 и Colors.white10) очень трудно увидеть и следует избегать в целом. Они предназначены для очень тонких эффектов.

Конструктор Flutter Color

Постройте цвет из цифр (точнее бит).

Биты интерпретируются следующим образом:

  • Биты 24-31 являются Альфа-значением (прозрачностью).
  • Биты 16-23-это красное значение.
  • Биты 8-15-это зеленое значение.
  • Биты 0-7-это синее значение.

Другими словами, если AA является Альфа-значением в шестнадцатеричной системе, RR красное значение в hex, GG зеленое значение в hex, и BB синее значение в hex, цвет может быть выражен как цвет константный (0xAARRGGBB).

Например, чтобы получить полностью непрозрачный оранжевый, вы должны использовать const Color(0xFFFF9000) (FF для Альфа, FF для красного, 90 для зеленого и 00 для синего).

const Color(int value) : value = value & 0xFFFFFFFF;

ColorSwatch<T> class

Цвет, который имеет небольшую таблицу связанных цветов, называется Swatch «образец».

Таблица индексируется значениями типа T.

Смотрите также:

  • MaterialColor и MaterialColorAccent, которые определяют первичные образцы дизайна материала и цвета акцента.
  • materials.Colors, которые определяют все стандартные цвета дизайна материала.

ColorSwatch<T> constructor

const ColorSwatch<T>(int primary,Map<T, Color> _swatch)

Создает цвет, который имеет небольшую таблицу связанных цветов, называемую «образец».

Основным аргументом должно быть 32-битное значение ARGB одного из значений в образце, которое будет передано в конструктор Color для этого же цвета и представлено значением. (Это отличается от конкретного индекса цвета в образце.)

Пример использования:

const ColorSwatch(int primary, this._swatch) : super(primary);

Использование Colors в других виджетах

Читайте статью про использование Colors в статье о Flutter Buttons