Что хотят услышать интервьюеры:

Flutter позволяет строить интерфейс, который подстраивается под размер окна, тип устройства и сценарий использования на десктопе. Ожидают услышать про responsive/adaptive подход: использование LayoutBuilder, MediaQuery, гибких контейнеров, брейкпоинтов и перестройки UI под широкие экраны. Также важно понимать, что для десктопа обычно учитывают мышь, клавиатуру, оконный размер, ресайз и более “плотный” интерфейс.

Определение:

Адаптивность во Flutter — это способность приложения менять компоновку, размеры и поведение виджетов в зависимости от доступного пространства и платформы. Для десктопа это особенно важно, потому что окно можно свободно менять по размеру, а пользователь ожидает другой UX, чем на телефоне: больше пространства, панели, списки рядом с контентом, hover-состояния и работу с клавиатурой.

Flutter дает для этого набор базовых инструментов: MediaQuery для параметров экрана, LayoutBuilder для реакции на constraints, гибкие виджеты вроде Expanded, Flexible, Wrap, а также возможность строить разные layout-варианты для узких и широких экранов.

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

Например, в почтовом приложении на узком окне показывается только список писем, а на широком — список слева и содержимое письма справа.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final isWide = constraints.maxWidth >= 800;

        if (isWide) {
          return Row(
            children: const [
              SizedBox(
                width: 320,
                child: MailList(),
              ),
              VerticalDivider(width: 1),
              Expanded(
                child: MailDetails(),
              ),
            ],
          );
        }

        return const MailList();
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const [
        ListTile(title: Text('Письмо 1')),
        ListTile(title: Text('Письмо 2')),
        ListTile(title: Text('Письмо 3')),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Содержимое письма'),
    );
  }
}

Пояснение кода:

Код показывает один из типичных способов адаптации под десктоп: через LayoutBuilder вычисляется доступная ширина контейнера. Если ширина больше заданного порога, используется двухпанельный интерфейс. Если меньше — упрощенная однопанельная версия.

Шаги работы:

LayoutBuilder получает constraints, то есть реальные ограничения по ширине и высоте.
По maxWidth определяется, широкий ли экран.
Для широкого экрана строится Row с двумя областями: список писем и детальная панель.
Для узкого экрана показывается только список, чтобы интерфейс не перегружался.
Такой подход легко расширяется: можно добавить третью компоновку для очень широких экранов или другое поведение для разных платформ.

Ключевые моменты:

Для десктопа важнее не только размеры экрана, но и размер окна, потому что пользователь постоянно ресайзит приложение.
Основной подход во Flutter — строить layout от constraints, а не жестко фиксировать пиксели.
Часто используют LayoutBuilder, MediaQuery, Expanded, Flexible, Wrap, Align, FractionallySizedBox.
Для адаптивного десктопа обычно применяют брейкпоинты и несколько вариантов компоновки UI.
Помимо layout, нужно учитывать desktop UX: mouse hover, keyboard navigation, контекстные меню, фокус и горячие клавиши.
Flutter хорошо подходит для такого подхода, потому что позволяет переиспользовать один код для разных форм-факторов, но UI обычно нужно проектировать отдельно под desktop-сценарии.

Какие возможности адаптивности предоставляет Flutter для разработки приложений под десктоп?