Виджет ModalBarrier

Виджет ModalBarrier ставят в Overlay под диалогом. Параметр dismissible разрешает закрытие по нажатию на фон, color задаёт оттенок затемнения. showDialog и showCupertinoDialog добавляют ModalBarrier автоматически.

Синтаксис

ModalBarrier(
	dismissible: true,
	color: Colors.black54,
)

Параметры

Параметр	Описание
`color`	Цвет затемнения под модальным слоем.
`dismissible`	Закрывать модальное окно по нажатию на барьер.
`onDismiss`	Колбэк при закрытии по барьеру.

Пример

Давайте вставим ModalBarrier в OverlayEntry:

import 'package:flutter/material.dart';

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

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

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: ElevatedButton(
					onPressed: () {
						late OverlayEntry entry;
						entry = OverlayEntry(
							builder: (ctx) {
								return Stack(
									children: [
										ModalBarrier(
											dismissible: true,
											onDismiss: entry.remove,
										),
										Center(
											child: Text('12345'),
										),
									],
								);
							},
						);
						Overlay.of(context).insert(entry);
					},
					child: const Text('abcde'),
				),
			),
		);
	}
}

Кнопка 'abcde' откроет затемнение; по фону ModalBarrier снимет слой, текст '12345' по центру.

Пример

Давайте запретим dismissible:

import 'package:flutter/material.dart';

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

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

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: ElevatedButton(
					onPressed: () {
						Overlay.of(context).insert(
							OverlayEntry(
								builder: (ctx) {
									return Stack(
										children: [
											ModalBarrier(
												dismissible: false,
											),
											Center(
												child: Text('abcde'),
											),
										],
									);
								},
							),
						);
					},
					child: const Text('12345'),
				),
			),
		);
	}
}

После нажатия '12345' фон не закроет слой; виден только 'abcde' по центру.

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

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