Виджет Overlay

Виджет Overlay держит стопку OverlayEntry поверх текущего маршрута. Состояние слоя берут через of, новые записи добавляют через insert у OverlayState. MaterialApp и CupertinoApp уже вставляют Overlay в дерево.

Синтаксис

Overlay(
	initialEntries: [
		OverlayEntry(
			builder: (context) => const SizedBox.shrink(),
		),
	],
)

Параметры

Параметр	Описание
`initialEntries`	Стартовый список `OverlayEntry` в слое.
`clipBehavior`	Как обрезать дочерние записи по границе `Overlay`.

Методы

Метод	Описание
`of`	Возвращает `OverlayState` из context.

Пример

Давайте вставим плашку через Overlay.of и insert:

import 'package:flutter/material.dart';

void main()
{
	runApp(const MaterialApp(home: OverlayDemo()));
}

class OverlayDemo extends StatelessWidget
{
	const OverlayDemo({super.key});

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: ElevatedButton(
					onPressed: () {
						late OverlayEntry entry;
						entry = OverlayEntry(
							builder: (ctx) {
								return Positioned(
									top: 80,
									left: 24,
									right: 24,
									child: Material(
										elevation: 4,
										child: Padding(
											padding: const EdgeInsets.all(16),
											child: Row(
												children: [
													Expanded(
														child: Text('12345'),
													),
													IconButton(
														onPressed: () {
															entry.remove();
														},
														icon: const Icon(Icons.close),
													),
												],
											),
										),
									),
								);
							},
						);
						Overlay.of(context).insert(entry);
					},
					child: const Text('abcde'),
				),
			),
		);
	}
}

На экране кнопка 'abcde'; по нажатию Overlay покажет плашку с текстом '12345'.

Пример

Давайте зададим initialEntries при сборке Overlay:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Navigator(
				onGenerateRoute: (settings) {
					return MaterialPageRoute<void>(
						builder: (context) {
							return Overlay(
								initialEntries: [
									OverlayEntry(
										builder: (ctx) {
											return Scaffold(
												body: Center(
													child: Text('abcde'),
												),
											);
										},
									),
								],
							);
						},
					);
				},
			),
		),
	);
}

На экране сразу виден текст 'abcde' из единственной OverlayEntry.

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

класс OverlayState,
управление списком OverlayEntry
класс OverlayEntry,
один виджет в слое
виджет OverlayPortal,
слой из обычного виджета
класс OverlayPortalController,
открыть и закрыть портал