Виджет ShaderMask

Виджет ShaderMask заменяет цвет дочернего виджета закраской. Закраску возвращает shaderCallback: функция получает прямоугольник и отдаёт Shader. Градиент умеет строить такую закраску, например LinearGradient.

Синтаксис

ShaderMask(
	shaderCallback: (rect) {
		return LinearGradient(
			colors: [Color(0xFF1565C0), Color(0xFFC62828)],
		).createShader(rect);
	},
	child: child,
)

Параметры

Параметр	Описание
`shaderCallback`	Функция, которая возвращает закраску по размеру области.
`child`	Дочерний виджет, цвет которого смешивают с закраской.

Пример

Давайте раскрасим строку градиентом слева направо:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ShaderMask(
						shaderCallback: (rect) {
							return LinearGradient(
								colors: [Color(0xFF1565C0), Color(0xFFC62828)],
							).createShader(rect);
						},
						child: Text('abcde', style: TextStyle(fontSize: 32, color: Color(0xFFFFFFFF))),
				),
			),
		),
	));
}

На экране строка 'abcde' слева синяя, справа красная.

Пример

Давайте протянем градиент сверху вниз:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ShaderMask(
						shaderCallback: (rect) {
							return LinearGradient(
								begin: Alignment.topCenter,
								end: Alignment.bottomCenter,
								colors: [Color(0xFFF9A825), Color(0xFF2E7D32)],
							).createShader(rect);
						},
						child: Text('12345', style: TextStyle(fontSize: 32, color: Color(0xFFFFFFFF))),
				),
			),
		),
	));
}

На экране строка '12345' сверху жёлтая, снизу зелёная.

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

виджет ImageFiltered,
размыть или исказить дочерний виджет
класс ColorFilter,
как перекрасить
виджет PhysicalModel,
тень и обрезка по форме
виджет RepaintBoundary,
рисовать дочерний виджет отдельным слоем