Виджет Theme

Виджет Theme кладёт в дерево объект ThemeData, откуда дочерние виджеты читают цвета и стили. Данные темы передают в параметр data. Поддерево оборачивают в параметр child. Прочитать тему из контекста помогают методы of и maybeOf.

Синтаксис

Theme(
	data: themeData,
	child: child,
)

Параметры

Параметр	Описание
`data`	Набор цветов, шрифтов и стилей для поддерева. Принимает `ThemeData`.
`child`	Дочерний виджет, который получит эту тему.

Методы

Метод	Описание
`of`	Возвращает `ThemeData` из ближайшего `Theme` в дереве.
`maybeOf`	Возвращает `ThemeData` или null, если `Theme` не найден.

Пример

Давайте зададим свой фон у Scaffold через Theme:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Theme(
				data: ThemeData(
					scaffoldBackgroundColor: Colors.amber.shade50,
				),
				child: Scaffold(
					body: Center(
						child: Text('abcde'),
					),
				),
			),
		),
	);
}

На экране фон body станет светло-янтарным, текст 'abcde' останется по центру.

Пример

Давайте прочитаем primaryColor через Theme.of:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Theme(
				data: ThemeData(
					colorScheme: ColorScheme.fromSeed(
						seedColor: Colors.teal,
					),
				),
				child: Builder(
					builder: (context) {
						var scheme = Theme.of(context).colorScheme;
						return Scaffold(
							body: Center(
								child: Text(
									'12345',
									style: TextStyle(
										color: scheme.primary,
									),
								),
							),
						);
					},
				),
			),
		),
	);
}

На экране подпись '12345' окрасится в основной цвет схемы teal.

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

класс ThemeData,
который хранит цвета и стили темы
класс ColorScheme,
который задаёт роли цветов Material
перечисление ThemeMode,
которое выбирает светлую или тёмную тему приложения
виджет MaterialApp,
который принимает theme и darkTheme