🧩Drawer

Что такое Drawer

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

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

Вот простой пример реализации Drawer в приложении:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Drawer Example'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                'Меню',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.home),
              title: const Text('Главная'),
              onTap: () {
                Navigator.pop(context); // Закрыть Drawer
              },
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('Настройки'),
              onTap: () {
                Navigator.pop(context); // Закрыть Drawer
              },
            ),
          ],
        ),
      ),
      body: const Center(
        child: Text('Содержимое главного экрана'),
      ),
    );
  }
}

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

  1. Scaffold: Основной виджет для создания стандартного интерфейса приложения. Здесь мы используем его для размещения AppBar и Drawer.

  2. AppBar: Заголовок приложения с кнопкой для открытия Drawer.

  3. Drawer: Содержит ListView, который позволяет прокручивать элементы меню.

  4. DrawerHeader: Визуальный заголовок Drawer, который может содержать текст и стили.

  5. ListTile: Каждый элемент в списке меню. При нажатии можно выполнять действия (например, закрыть Drawer).

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

  1. Color? backgroundColor

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

    • Пример:

      backgroundColor: Colors.white // Белый фон

  2. double? elevation

    • Описание: Эффект тени для Drawer. Чем больше значение, тем больше тень.

    • Пример:

      elevation: 16.0 // Значительная тень

  3. Color? shadowColor

    • Описание: Цвет тени для Drawer. По умолчанию используется цвет, зависящий от темы.

    • Пример:

      shadowColor: Colors.black.withOpacity(0.5) // Полупрозрачная черная тень

  4. Color? surfaceTintColor

    • Описание: Цвет оттенка поверхности, применяемый к Drawer.

    • Пример:

      surfaceTintColor: Colors.blueAccent // Оттенок для поверхности

  5. ShapeBorder? shape

    • Описание: Форма Drawer. Можно использовать для создания закругленных углов или других форм.

    • Пример:

      shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.horizontal(right: Radius.circular(20.0)), // Закругленные правые углы
)

  6. double? width

    • Описание: Ширина Drawer. По умолчанию ширина составляет 304 пикселя.

    • Пример:

      width: 250.0 // Уменьшенная ширина

  7. Widget? child

    • Описание: Дочерний виджет, который будет отображаться внутри Drawer. Обычно это список элементов.

    • Пример:

      child: ListView( // Пример использования списка
  children: <Widget>[
    DrawerHeader(/* ... */),
    ListTile(/* ... */),
  ],
)

  8. String? semanticLabel

    • Описание: Метка для доступности, описывающая содержимое Drawer. Полезно для пользователей, использующих экранные читалки.

    • Пример:

      semanticLabel: 'Навигационное меню' // Метка для доступности

  9. Clip? clipBehavior

    • Описание: Определяет, как обрезаются дочерние элементы Drawer, если они выходят за пределы виджета. Может быть использовано для управления визуальным эффектом.

    • Пример:

      clipBehavior: Clip.hardEdge // Жесткая обрезка

Заключение

Drawer предоставляет удобный способ организации навигации и других действий в приложениях Flutter. Используя его настройки, вы можете настроить внешний вид и поведение бокового меню в соответствии с потребностями вашего приложения.

PreviousNavigatorNextTabBar

Last updated