Изучение различных методов вычитания высоты AppBar во Flutter

Метод 1: MediaQuery.of(context).padding
Класс MediaQuery во Flutter обеспечивает доступ к информации о конфигурации текущего носителя (экрана). Используя свойство заполнения, мы можем вычесть высоту AppBar из доступного вертикального пространства.

final double appBarHeight = AppBar().preferredSize.height;
final double statusBarHeight = MediaQuery.of(context).padding.top;
final double availableHeight = MediaQuery.of(context).size.height - appBarHeight - statusBarHeight;

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

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize {
    final double appBarHeight = AppBar().preferredSize.height;
    return Size.fromHeight(appBarHeight);
  }
  @override
  Widget build(BuildContext context) {
    // Your custom AppBar content here
  }
}
// Usage
final double availableHeight = MediaQuery.of(context).size.height - CustomAppBar().preferredSize.height;

Метод 3. Заполнение тела Scaffold
С помощью этого метода мы можем настроить заполнение содержимого тела виджета Scaffold, чтобы вычесть высоту AppBar из доступного пространства.

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Padding(
    padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top + AppBar().preferredSize.height),
    child: Container(
      // Your body content here
    ),
  ),
);

Метод 4: виджет SafeArea
Виджет SafeArea во Flutter автоматически настраивает отступы своего дочернего элемента, чтобы избежать вторжения элементов пользовательского интерфейса системного уровня (таких как метки или строки состояния). Обертывая наш контент с помощью SafeArea, мы можем вычесть высоту AppBar из доступного пространства.

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: SafeArea(
    child: Container(
      // Your body content here
    ),
  ),
);

В этой статье мы рассмотрели несколько способов вычитания высоты AppBar во Flutter. Используя MediaQuery, PreferredSizeWidget, дополнение тела Scaffold и SafeArea, мы можем легко рассчитать и настроить доступное пространство в макете нашего приложения. Каждый метод предлагает свой подход, что позволяет разработчикам выбрать тот, который лучше всего соответствует их потребностям.

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