Виджет BottomSheet

Виджет BottomSheet строят внутри showBottomSheet или showModalBottomSheet. Содержимое передают в builder функции, фон и высоту настраивают параметрами showModalBottomSheet. На экране панель часто оборачивают в Material и Column.

Синтаксис

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

Параметры

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

Пример

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

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 ListTile(title: Text('abcde'));
							},
						);
					},
					child: Text('12345'),
				),
			),
		);
	}
}

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

Пример

Давайте положим несколько пунктов в панель:

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,
						builder: (ctx) {
							return Column(
								mainAxisSize: MainAxisSize.min,
								children: [
									ListTile(title: Text('abcde')),
									ListTile(title: Text('12345')),
								],
							);
						},
					);
				},
				child: Icon(Icons.menu),
			),
		);
	}
}

Панель покажет два ListTile один под другим.

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

функция showModalBottomSheet,
которая открывает панель поверх экрана
функция showBottomSheet,
которая привязывает панель к Scaffold
виджет DraggableScrollableSheet,
который меняет высоту жестом
виджет ListTile,
которым оформляют пункты в панели