🧩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'),
              ),
            ],
          ),
        );
      },
    );
  }
}

Как работает код

  1. showModalBottomSheet: Эта функция отображает модальный BottomSheet. Она принимает контекст и функцию построения, которая создает содержимое BottomSheet.

  2. builder: Внутри этого метода мы создаем Container, который будет содержать текст и кнопки.

  3. Navigator.pop: Этот метод закрывает BottomSheet и возвращает выбранное значение.

Все настройки BottomSheet

  1. AnimationController? animationController

    • Описание: Контроллер анимации для управления анимациями BottomSheet.

    • Пример:

      animationController: AnimationController(duration: const Duration(milliseconds: 300), vsync: this)
  2. bool enableDrag

    • Описание: Определяет, можно ли перетаскивать BottomSheet. По умолчанию установлено в true.

    • Пример:

      enableDrag: true // Разрешить перетаскивание
  3. bool? showDragHandle

    • Описание: Определяет, следует ли отображать ручку перетаскивания. По умолчанию установлено в false.

    • Пример:

      showDragHandle: true // Показать ручку
  4. Color? dragHandleColor

    • Описание: Цвет ручки перетаскивания.

    • Пример:

      dragHandleColor: Colors.grey // Цвет ручки
  5. Size? dragHandleSize

    • Описание: Размер ручки перетаскивания.

    • Пример:

      dragHandleSize: Size(40, 5) // Размер ручки
  6. void Function(DragStartDetails)? onDragStart

    • Описание: Функция обратного вызова, которая вызывается при начале перетаскивания.

    • Пример:

      onDragStart: (details) {
        // Логика при начале перетаскивания
      }
  7. void Function(DragEndDetails, {required bool isClosing})? onDragEnd

    • Описание: Функция обратного вызова, которая вызывается по окончании перетаскивания.

    • Пример:

      onDragEnd: (details, {required bool isClosing}) {
        // Логика при окончании перетаскивания
      }
  8. Color? backgroundColor

    • Описание: Цвет фона BottomSheet.

    • Пример:

      backgroundColor: Colors.white // Цвет фона
  9. Color? shadowColor

    • Описание: Цвет тени для BottomSheet.

    • Пример:

      shadowColor: Colors.black // Цвет тени
  10. double? elevation

    • Описание: Высота тени для BottomSheet.

    • Пример:

      elevation: 8.0 // Высота тени
  11. ShapeBorder? shape

    • Описание: Форма BottomSheet.

    • Пример:

      shape: RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(16.0))) // Форма с закругленными углами
  12. Clip? clipBehavior

    • Описание: Поведение обрезки для BottomSheet.

    • Пример:

      clipBehavior: Clip.antiAlias // Поведение обрезки
  13. BoxConstraints? constraints

    • Описание: Ограничения для содержимого BottomSheet.

    • Пример:

      constraints: BoxConstraints(maxHeight: 400) // Максимальная высота
  14. required void Function() onClosing

    • Описание: Функция обратного вызова, которая вызывается при закрытии BottomSheet.

    • Пример:

      onClosing: () {
        // Логика при закрытии
      }
  15. required Widget Function(BuildContext) builder

    • Описание: Функция, которая строит содержимое BottomSheet.

    • Пример:

      builder: (BuildContext context) {
        return Column(
          children: [
            Text('Содержимое BottomSheet'),
            // Другие виджеты
          ],
        );
      }

Заключение

BottomSheet — это мощный инструмент для улучшения пользовательского интерфейса в вашем приложении. Он предоставляет возможность отображать дополнительные действия и информацию, не занимая весь экран. Настройки BottomSheet позволяют вам гибко управлять его поведением и внешним видом.

Last updated