Функция showModalBottomSheet

Функция showModalBottomSheet блокирует экран и показывает панель. Контекст - context, содержимое - builder, полная высота - isScrollControlled. Отличается от showBottomSheet у Scaffold тем, что модальна.

Синтаксис

showModalBottomSheet(
	context: context,
	builder: (BuildContext context) {
		return ListTile(title: Text('abcde'));
	},
)

Параметры

Параметр	Описание
`context`	Контекст экрана.
`builder`	Строит виджеты панели.
`isScrollControlled`	Разрешить высокую панель.

Пример

Давайте откроем модальную панель:

import 'package:flutter/material.dart';

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

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

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: ElevatedButton(
					onPressed: () {
						showModalBottomSheet(
							context: context,
							builder: (ctx) {
								return Padding(
									padding: EdgeInsets.all(24),
									child: Text('abcde'),
								);
							},
						);
					},
					child: Text('12345'),
				),
			),
		);
	}
}

Снизу выедет панель с 'abcde' на затемнённом фоне.

Пример

Давайте включим isScrollControlled:

import 'package:flutter/material.dart';

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

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

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			floatingActionButton: FloatingActionButton(
				onPressed: () {
					showModalBottomSheet(
						context: context,
						isScrollControlled: true,
						builder: (ctx) {
							return SizedBox(
								height: 300,
								child: Center(child: Text('12345')),
							);
						},
					);
				},
				child: Icon(Icons.add),
			),
		);
	}
}

Панель займёт 300 логических пикселей по высоте.

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

функция showBottomSheet,
панель без модального барьера
виджет BottomSheet,
оформление панели
виджет DraggableScrollableSheet,
лист с жестом высоты
виджет ListTile,
пункты внутри sheet