Виджет Material

Виджет Material задаёт «лист» Material: цвет, тень и форму. Содержимое передают в child, цвет фона - в color или из темы, скругление - в borderRadius, высоту тени - в elevation. Многие виджеты Material уже оборачивают себя в Material внутри.

Синтаксис

Material(
	elevation: 4,
	borderRadius: BorderRadius.circular(12),
	child: Padding(
		padding: EdgeInsets.all(16),
		child: Text('abcde'),
	),
)

Параметры

Параметр	Описание
`child`	Виджет поверх подложки.
`color`	Цвет листа. По умолчанию берётся из темы.
`elevation`	Высота тени под виджетом.
`borderRadius`	Скругление углов подложки.

Пример

Давайте нарисуем карточку с тенью:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Material(
						elevation: 6,
						borderRadius: BorderRadius.circular(16),
						child: Padding(
							padding: EdgeInsets.all(24),
							child: Text('abcde'),
						),
					),
				),
			),
		),
	);
}

На экране белый лист со скруглёнными углами и тенью, внутри текст 'abcde'.

Пример

Давайте зададим свой цвет подложки:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Material(
						color: Colors.blue.shade100,
						child: SizedBox(
							width: 200,
							height: 80,
							child: Center(child: Text('12345')),
						),
					),
				),
			),
		),
	);
}

Прямоугольник с голубым фоном и текстом по центру.

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

виджет Card,
который строит карточку поверх Material
виджет InkWell,
который рисует всплеск на Material при нажатии
виджет Theme,
откуда Material берёт цвета по умолчанию
виджет MaterialApp,
который включает стиль Material для всего приложения