Функция showBottomSheet

Функция showBottomSheet показывает панель снизу внутри текущего Scaffold. В context передают контекст под Scaffold, в builder - содержимое панели. Для модального листа поверх всего экрана чаще берут showModalBottomSheet.

Синтаксис

showBottomSheet(
	context: context,
	builder: (BuildContext context) {
		return Container(
			height: 120,
			child: Center(child: Text('abcde')),
		);
	},
)

Параметры

Параметр	Описание
`context`	Контекст экрана под `Scaffold`. Обязательный параметр.
`builder`	Строит виджеты внутри нижней панели. Обязательный параметр.
`backgroundColor`	Цвет фона панели.
`elevation`	Высота тени панели.

Пример

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

import 'package:flutter/material.dart';

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

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

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: ElevatedButton(
					onPressed: () {
						showBottomSheet(
							context: context,
							builder: (BuildContext ctx) {
								return SizedBox(
									height: 100,
									child: Center(child: Text('abcde')),
								);
							},
						);
					},
					child: Text('12345'),
				),
			),
		);
	}
}

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

Пример

Давайте вызовем showBottomSheet через ScaffoldState:

import 'package:flutter/material.dart';

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

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

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: Builder(
					builder: (context) {
						return ElevatedButton(
							onPressed: () {
								Scaffold.of(context).showBottomSheet(
									(BuildContext ctx) {
										return ListTile(title: Text('12345'));
									},
								);
							},
							child: Text('abcde'),
						);
					},
				),
			),
		);
	}
}

В панели появится строка ListTile с подписью '12345'.

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

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