Виджет DraggableScrollableSheet

Виджет DraggableScrollableSheet выезжает снизу и тянется за ручку. Начальная доля экрана - initialChildSize, минимум - minChildSize, максимум - maxChildSize, содержимое - builder со ScrollController.

Синтаксис

DraggableScrollableSheet(
	initialChildSize: 0.3,
	minChildSize: 0.2,
	maxChildSize: 0.8,
	builder: (BuildContext context, ScrollController scrollController) {
		return ListView(controller: scrollController, children: [Text('abcde')]);
	},
)

Параметры

Параметр	Описание
`initialChildSize`	Доля высоты экрана при старте.
`minChildSize`	Минимальная доля высоты.
`maxChildSize`	Максимальная доля высоты.
`builder`	Строит прокручиваемое содержимое.

Пример

Давайте положим sheet на Scaffold:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Stack(
					children: [
						Center(child: Text('12345')),
						DraggableScrollableSheet(
							initialChildSize: 0.25,
							builder: (context, controller) {
								return ListView(
									controller: controller,
									children: [ListTile(title: Text('abcde'))],
								);
							},
						),
					],
				),
			),
		),
	);
}

Снизу панель с ListTile, её можно тянуть вверх.

Пример

Давайте расширим maxChildSize:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: DraggableScrollableSheet(
					maxChildSize: 0.9,
					builder: (context, controller) {
						return Center(child: Text('abcde'));
					},
				),
			),
		),
	);
}

Панель может занять до 90% высоты экрана.

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

функция showModalBottomSheet,
модальная панель
виджет BottomSheet,
оформление bottom sheet
виджет ListView,
список внутри builder
виджет Stack,
куда кладут sheet поверх body