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