🧩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 — это простой, но мощный инструмент для отображения краткой информации и действий для пользователя. Вы можете настраивать его внешний вид и поведение, чтобы он подходил под ваши нужды, а также добавлять действия, которые позволят пользователям реагировать на уведомления.

PreviousExpansionPanelNextPopupMenuButton

Last updated