🧩BottomSheet
Что такое BottomSheet
BottomSheet
BottomSheet
в Flutter — это панель, которая появляется снизу экрана и может содержать различные элементы интерфейса, такие как списки, кнопки и формы. Она используется для предоставления дополнительной информации или действий, которые не требуют полного экрана, например, для выбора опций или подтверждения действий.
Пример использования
Вот пример, как можно создать и использовать BottomSheet
в приложении Flutter:

import 'package:flutter/material.dart';
class BottomSheetExample extends StatelessWidget {
const BottomSheetExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('BottomSheet Example')),
body: Center(
child: ElevatedButton(
onPressed: () {
_showBottomSheet(context);
},
child: const Text('Показать BottomSheet'),
),
),
);
}
void _showBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Выберите опцию'),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pop(context, 'Опция 1');
},
child: const Text('Опция 1'),
),
ElevatedButton(
onPressed: () {
Navigator.pop(context, 'Опция 2');
},
child: const Text('Опция 2'),
),
],
),
);
},
);
}
}
Как работает код
showModalBottomSheet: Эта функция отображает модальный
BottomSheet
. Она принимает контекст и функцию построения, которая создает содержимоеBottomSheet
.builder: Внутри этого метода мы создаем
Container
, который будет содержать текст и кнопки.Navigator.pop: Этот метод закрывает
BottomSheet
и возвращает выбранное значение.
Все настройки BottomSheet
BottomSheet
AnimationController? animationController
Описание: Контроллер анимации для управления анимациями
BottomSheet
.Пример:
animationController: AnimationController(duration: const Duration(milliseconds: 300), vsync: this)
bool enableDrag
Описание: Определяет, можно ли перетаскивать
BottomSheet
. По умолчанию установлено вtrue
.Пример:
enableDrag: true // Разрешить перетаскивание
bool? showDragHandle
Описание: Определяет, следует ли отображать ручку перетаскивания. По умолчанию установлено в
false
.Пример:
showDragHandle: true // Показать ручку
Color? dragHandleColor
Описание: Цвет ручки перетаскивания.
Пример:
dragHandleColor: Colors.grey // Цвет ручки
Size? dragHandleSize
Описание: Размер ручки перетаскивания.
Пример:
dragHandleSize: Size(40, 5) // Размер ручки
void Function(DragStartDetails)? onDragStart
Описание: Функция обратного вызова, которая вызывается при начале перетаскивания.
Пример:
onDragStart: (details) { // Логика при начале перетаскивания }
void Function(DragEndDetails, {required bool isClosing})? onDragEnd
Описание: Функция обратного вызова, которая вызывается по окончании перетаскивания.
Пример:
onDragEnd: (details, {required bool isClosing}) { // Логика при окончании перетаскивания }
Color? backgroundColor
Описание: Цвет фона
BottomSheet
.Пример:
backgroundColor: Colors.white // Цвет фона
Color? shadowColor
Описание: Цвет тени для
BottomSheet
.Пример:
shadowColor: Colors.black // Цвет тени
double? elevation
Описание: Высота тени для
BottomSheet
.Пример:
elevation: 8.0 // Высота тени
ShapeBorder? shape
Описание: Форма
BottomSheet
.Пример:
shape: RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(16.0))) // Форма с закругленными углами
Clip? clipBehavior
Описание: Поведение обрезки для
BottomSheet
.Пример:
clipBehavior: Clip.antiAlias // Поведение обрезки
BoxConstraints? constraints
Описание: Ограничения для содержимого
BottomSheet
.Пример:
constraints: BoxConstraints(maxHeight: 400) // Максимальная высота
required void Function() onClosing
Описание: Функция обратного вызова, которая вызывается при закрытии
BottomSheet
.Пример:
onClosing: () { // Логика при закрытии }
required Widget Function(BuildContext) builder
Описание: Функция, которая строит содержимое
BottomSheet
.Пример:
builder: (BuildContext context) { return Column( children: [ Text('Содержимое BottomSheet'), // Другие виджеты ], ); }
Заключение
BottomSheet
— это мощный инструмент для улучшения пользовательского интерфейса в вашем приложении. Он предоставляет возможность отображать дополнительные действия и информацию, не занимая весь экран. Настройки BottomSheet
позволяют вам гибко управлять его поведением и внешним видом.
Last updated