🧩SnackBar

Что такое SnackBar

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

Пример использования

Вот пример, как создать и показать SnackBar в вашем приложении:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SnackBar Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            final snackBar = SnackBar(
              content: const Text('This is a SnackBar message!'),
              action: SnackBarAction(
                label: 'Undo',
                onPressed: () {
                  // Действие при нажатии на кнопку "Undo"
                },
              ),
            );

            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
          child: const Text('Show SnackBar'),
        ),
      ),
    );
  }
}

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

1. SnackBar: Создается экземпляр SnackBar, в который передается содержимое (текст сообщения) и действие (кнопка "Undo").

2. ScaffoldMessenger: Используется для отображения SnackBar на экране, ссылаясь на контекст текущего виджета.

3. ElevatedButton: По нажатию на кнопку SnackBar появляется внизу экрана.

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

1. required Widget content

   • Описание: Содержимое SnackBar, обычно это текст или другие виджеты, которые нужно отобразить.

   • Пример:

     content: Text('Успешно сохранено!')

2. Color? backgroundColor

   • Описание: Цвет фона SnackBar. По умолчанию используется цвет темы.

   • Пример:

     backgroundColor: Colors.green // Зеленый фон

3. double? elevation

   • Описание: Высота тени, создаваемой SnackBar.

   • Пример:

     elevation: 6.0 // Высокая тень

4. EdgeInsetsGeometry? margin

   • Описание: Поля вокруг SnackBar.

   • Пример:

     margin: EdgeInsets.all(10.0) // Поля в 10 пикселей со всех сторон

5. EdgeInsetsGeometry? padding

   • Описание: Внутренние отступы содержимого внутри SnackBar.

   • Пример:

     padding: EdgeInsets.all(16.0) // Отступы внутри

6. double? width

   • Описание: Ширина SnackBar. По умолчанию SnackBar занимает ширину экрана.

   • Пример:

     width: 300.0 // Задаем ширину 300 пикселей

7. ShapeBorder? shape

   • Описание: Форма, которую будет иметь SnackBar. Позволяет создавать закругленные углы или другие формы.

   • Пример:

     shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)) // Закругленные углы

8. HitTestBehavior? hitTestBehavior

   • Описание: Определяет, как SnackBar реагирует на касания.

   • Пример:

     hitTestBehavior: HitTestBehavior.opaque // Позволяет обрабатывать касания

9. SnackBarBehavior? behavior

   • Описание: Определяет, как SnackBar ведет себя: floating (всплывающее) или fixed (фиксированное).

   • Пример:

     behavior: SnackBarBehavior.floating // Всплывающее уведомление

10. SnackBarAction? action

    • Описание: Действие, которое может быть выполнено пользователем, например, кнопка "Undo".

    • Пример:

      action: SnackBarAction(label: 'Undo', onPressed: () {})

11. double? actionOverflowThreshold

    • Описание: Ширина, при которой действие должно переполняться.

    • Пример:

      actionOverflowThreshold: 100.0 // Устанавливаем порог переполнения

12. bool? showCloseIcon

    • Описание: Указывает, показывать ли иконку закрытия.

    • Пример:

      showCloseIcon: true // Показываем иконку закрытия

13. Color? closeIconColor

    • Описание: Цвет иконки закрытия.

    • Пример:

      closeIconColor: Colors.red // Красный цвет для иконки закрытия

14. Duration duration

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

    • Пример:

      duration: Duration(seconds: 5) // Показывать 5 секунд

15. Animation<double>? animation

    • Описание: Анимация для SnackBar.

    • Пример:

      animation: Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(parent: controller, curve: Curves.easeIn))

16. void Function()? onVisible

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

    • Пример:

      onVisible: () {
        print('SnackBar is now visible');
      }

17. DismissDirection? dismissDirection

    • Описание: Направление, в котором SnackBar может быть скрыт (вверх, вниз, влево, вправо).

    • Пример:

      dismissDirection: DismissDirection.down // Скрывать вниз

18. Clip clipBehavior

    • Описание: Определяет, как содержимое SnackBar обрезается. По умолчанию Clip.hardEdge.

    • Пример:

      clipBehavior: Clip.antiAlias // Обрезка с антиалиасингом

Заключение

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