Перечисление BlendMode

Перечисление BlendMode задаёт правило смешения верхнего и нижнего слоя. Его передают в blendMode у Paint, в colorBlendMode у виджетов и в ColorFilter.mode.

Синтаксис

BlendMode.srcOver

Значения

Значение	Описание
`clear`	Рисунок стирает содержимое под ним.
`src`	Остаётся только верхний слой.
`dst`	Остаётся только нижний слой.
`srcOver`	Верхний слой поверх нижнего, стандарт для UI.
`dstOver`	Нижний слой поверх верхнего.
`srcIn`	Верхний слой только там, где есть нижний.
`dstIn`	Нижний слой только там, где есть верхний.
`srcOut`	Верхний слой вне области нижнего.
`dstOut`	Нижний слой вне области верхнего.
`srcATop`	Верхний поверх там, где пересекаются слои.
`dstATop`	Нижний поверх там, где пересекаются слои.
`xor`	Видны только непересекающиеся части слоёв.
`plus`	Сложение цветов каналов.
`modulate`	Перемножение цветов.
`screen`	Осветление как на экране.
`overlay`	Контрастное наложение.
`darken`	Берётся более тёмный канал.
`lighten`	Берётся более светлый канал.
`colorDodge`	Осветление базы цветом.
`colorBurn`	Затемнение базы цветом.
`hardLight`	Жёсткий свет поверх базы.
`softLight`	Мягкий свет поверх базы.
`difference`	Разница между слоями.
`exclusion`	Исключающее смешение.
`multiply`	Умножение, затемнение.
`hue`	Оттенок от верхнего слоя.
`saturation`	Насыщенность от верхнего слоя.
`color`	Цвет верхнего на яркости нижнего.
`luminosity`	Яркость верхнего на цвете нижнего.

Пример

Давайте перекрасим текст через ColorFilter.mode с BlendMode.modulate:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ColorFiltered(
						colorFilter: ColorFilter.mode(
							Colors.red,
							BlendMode.modulate,
						),
						child: Text(
							'abcde',
							style: TextStyle(fontSize: 28),
						),
					),
				),
			),
		),
	);
}

На экране подпись окрасится в красный через modulate.

Пример

Давайте зададим blendMode у кисти при рисовании поверх фона:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: CustomPaint(
						size: const Size(220, 100),
						painter: _BlendPainter(),
					),
				),
			),
		),
	);
}

class _BlendPainter extends CustomPainter
{
	@override
	void paint(Canvas canvas, Size size)
	{
		final base = Paint()..color = Colors.blue;
		canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), base);
		final top = Paint()
			..color = Colors.yellow.withValues(alpha: 0.7)
			..blendMode = BlendMode.srcOver;
		canvas.drawRect(Rect.fromLTWH(40, 20, 140, 60), top);
	}

	@override
	bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

На экране жёлтый прямоугольник ляжет поверх синего с srcOver.

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

класс Paint,
у которого задают blendMode
класс ColorFilter,
который перекрашивает виджет с выбранным режимом
виджет ShaderMask,
который смешивает градиент с дочерним виджетом
перечисление PaintingStyle,
которое выбирает заливку или обводку