🧩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 позволяют вам гибко управлять его поведением и внешним видом.