Виджет OverlayPortal

Виджет OverlayPortal связывает обычный child с содержимым overlayChildBuilder в Overlay. Открытие задаёт OverlayPortalController через show и hide.

Синтаксис

OverlayPortal(
	controller: portalController,
	overlayChildBuilder: (BuildContext context) {
		return Text('abcde');
	},
	child: child,
)

Параметры

Параметр	Описание
`controller`	`OverlayPortalController` для show и hide.
`overlayChildBuilder`	Строит виджет в `Overlay`.
`child`	Якорный виджет в основном дереве.

Пример

Давайте откроем портал кнопкой:

import 'package:flutter/material.dart';

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

class PortalDemo extends StatefulWidget
{
	const PortalDemo({super.key});

	@override
	State<PortalDemo> createState() => _PortalDemoState();
}

class _PortalDemoState extends State<PortalDemo>
{
	final OverlayPortalController _controller =
		OverlayPortalController();

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: OverlayPortal(
					controller: _controller,
					overlayChildBuilder: (ctx) {
						return Material(
							elevation: 4,
							child: Padding(
								padding: const EdgeInsets.all(16),
								child: Text('12345'),
							),
						);
					},
					child: ElevatedButton(
						onPressed: _controller.show,
						child: Text('abcde'),
					),
				),
			),
		);
	}
}

Кнопка 'abcde' вызовет show; OverlayPortal покажет '12345' в слое.

Пример

Давайте закроем портал через hide:

import 'package:flutter/material.dart';

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

class PortalHideDemo extends StatefulWidget
{
	const PortalHideDemo({super.key});

	@override
	State<PortalHideDemo> createState() => _PortalHideDemoState();
}

class _PortalHideDemoState extends State<PortalHideDemo>
{
	final OverlayPortalController _controller =
		OverlayPortalController();

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: OverlayPortal(
					controller: _controller,
					overlayChildBuilder: (ctx) {
						return TextButton(
							onPressed: _controller.hide,
							child: Text('12345'),
						);
					},
					child: ElevatedButton(
						onPressed: _controller.show,
						child: Text('abcde'),
					),
				),
			),
		);
	}
}

После show в слое кнопка '12345' вызовет hide и уберёт overlayChildBuilder.

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

виджет Overlay,
слой поверх маршрутов
класс OverlayState,
управление списком OverlayEntry
класс OverlayEntry,
один виджет в слое
класс OverlayPortalController,
открыть и закрыть портал