Есть два способа использования 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