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

Метод 1: использование виджета DrawerHeader
Самый простой способ создать заголовок ящика — использовать встроенный виджет DrawerHeader, предоставляемый Flutter. Этот виджет позволяет настроить внешний вид заголовка, указав такие свойства, как оформление, поля и отступы. Вот пример:

DrawerHeader(
  decoration: BoxDecoration(
    color: Colors.blue,
  ),
  margin: EdgeInsets.zero,
  padding: EdgeInsets.zero,
  child: Text(
    'Drawer Header',
    style: TextStyle(
      color: Colors.white,
      fontSize: 24,
    ),
  ),
)

Метод 2. Создание пользовательского виджета заголовка ящика.
Если вам нужна большая гибкость при разработке заголовка ящика, вы можете создать собственный виджет, который расширяет виджет Containerи настраивать его внешний вид и поведение. по желанию. Вот пример:

class CustomDrawerHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      padding: const EdgeInsets.all(20),
      child: Text(
        'Custom Drawer Header',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
        ),
      ),
    );
  }
}

Метод 3: использование ListTile для заголовка ящика
Другой подход к созданию заголовка ящика — использование виджета ListTile. Вы можете обернуть ListTileв Containerили Card, чтобы настроить его внешний вид. Вот пример:

Container(
  color: Colors.blue,
  child: ListTile(
    title: Text(
      'Drawer Header',
      style: TextStyle(
        color: Colors.white,
        fontSize: 24,
      ),
    ),
  ),
)