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

Метод 1: использование виджета PreferredSize
Виджет PreferredSize позволяет вам указать собственный предпочтительный размер для панели приложений. Чтобы изменить высоту панели приложения, вы можете определить виджет PreferredSize и установить для его свойстваeferredSize пользовательское значение. Вот пример:

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(80.0); // Set your desired height
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('My App'),
      // Additional app bar properties...
    );
  }
}

Метод 2. Обертывание AppBar с помощью PreferredSize
Другой способ изменить высоту панели приложения — обернуть виджет AppBar виджетом PreferredSize. Этот подход позволяет вам определить предпочтительный размер непосредственно в виджете AppBar. Вот пример:

PreferredSize(
  preferredSize: Size.fromHeight(100.0), // Set your desired height
  child: AppBar(
    title: Text('My App'),
    // Additional app bar properties...
  ),
)

Метод 3: настройка темы панели приложения
Вы также можете изменить высоту панели приложения, настроив тему своего приложения. Изменив AppBarTheme в данных темы вашего приложения, вы можете установить глобальное значение высоты панели приложения. Вот пример:

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      toolbarHeight: 120.0, // Set your desired height
    ),
  ),
  home: MyHomePage(),
)

Метод 4: использование PreferredSizeWidget с SafeArea
Если вы хотите учитывать безопасную зону устройства при изменении высоты панели приложения, вы можете объединить виджет PreferredSize с виджетом SafeArea. Виджет SafeArea гарантирует, что содержимое не будет закрыто элементами системного пользовательского интерфейса. Вот пример:

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize =>
      Size.fromHeight(
          MediaQuery.of(context).padding.top + 100.0); // Set your desired height
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: AppBar(
        title: Text('My App'),
        // Additional app bar properties...
      ),
    );
  }
}

В этой статье мы рассмотрели различные способы изменения высоты панели приложения во Flutter. Используя виджет PreferredSize, настраивая тему AppBar или комбинируя его с виджетом SafeArea, вы можете легко добиться желаемой высоты панели приложения. Не забудьте поэкспериментировать с различными значениями, чтобы найти идеальное соответствие дизайну вашего приложения. Приятного кодирования!