Готово ли твоё Flutter-приложение к iPhone Duo?

iPhone Duo, первый складной iPhone от Apple, поступил в продажу 23 октября. С его появлением у разработчиков приложений возникает много вопросов: что он изменит в разработке? Придётся ли нам адаптировать свои приложения к этому новому складному формату? И если да, то с какими трудностями мы столкнёмся? Что произойдёт, если ничего не адаптировать? Как будут выглядеть приложения, когда устройство сложено и когда оно раскрыто? Какие инструменты предлагает Flutter для адаптации интерфейса?

В этой статье я постараюсь быстро ответить на все эти вопросы, чтобы ты понимал, что тебя ждёт, если ты распространяешь приложения для iOS. В конце я также покажу очень простой способ с небольшими усилиями адаптировать интерфейс приложения, чтобы оно хорошо выглядело на новом iPhone Duo.

iPhone Duo меняет отображение твоего приложения

Чтобы хорошо понять, что происходит при запуске приложения на iPhone Duo, я подготовил очень простое демонстрационное приложение. Оно показывает список заметок, а при нажатии на одну из них открывает экран с её содержимым:

Теперь посмотрим, что произойдёт, если запустить то же приложение на iPhone Duo. Сначала я покажу, как оно выглядит после сборки с iOS 27.1 SDK, но без каких-либо других изменений интерфейса:

Как видишь, приложение изменяет размер и занимает всё доступное пространство. Когда устройство сложено, это не становится большой проблемой, потому что размеры и соотношение сторон внешнего экрана относительно похожи на обычный iPhone. Но как только пользователь раскрывает устройство, интерфейс, рассчитанный на узкое окно смартфона, растягивается на всю ширину внутреннего экрана. Он работает, но впечатление от использования получается не лучшим.

Адаптация Flutter к iPhone Duo

К счастью, Flutter предлагает множество виджетов и инструментов для адаптации интерфейса не только к iPhone Duo, но и к окну любого размера. На мой взгляд, правильный подход звучит не как «я адаптирую своё Flutter-приложение к iPhone Duo», а как «я адаптирую своё Flutter-приложение к новым размерам». Идея в том, чтобы абстрагироваться от физического устройства и создать адаптивный интерфейс, который динамически реагирует на доступное пространство.

Например, всего с несколькими изменениями можно получить такую адаптацию:

Как видишь, когда Duo сложен, я сохраняю прежнюю компоновку. После раскрытия я использую дополнительную ширину внутреннего экрана, чтобы показать список заметок слева, а подробности выбранной заметки справа.

Этого эффекта легко добиться с помощью LayoutBuilder, виджета, который предоставляет ограничения размера, полученные от родительского виджета. Когда ограничения меняются, например при смене ориентации устройства или при складывании и раскрытии iPhone Duo, Flutter снова выполняет его builder. Благодаря этому мы можем выбрать подходящий интерфейс в зависимости от доступного пространства:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Notes')),
    body: SafeArea(
      top: false,
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth >= _wideLayoutWidth) {
            return _WideNotesLayout(
              notes: _notes,
              selectedIndex: _selectedNoteIndex,
              onSelected: _selectNote,
            );
          }

          return _NotesList(notes: _notes, onSelected: _openNote);
        },
      ),
    ),
  );
}

Помимо LayoutBuilder, в этом примере я использую SafeArea, чтобы контент не попадал в области, занятые системным интерфейсом, камерой и скруглёнными углами. Flutter предлагает множество других инструментов для создания адаптивных интерфейсов: MediaQuery.sizeOf() позволяет узнать текущий размер окна приложения, Expanded и Flexible распределяют пространство внутри строк и столбцов, а ConstrainedBox позволяет задать минимальные или максимальные ограничения, чтобы контент не растягивался слишком сильно. И это лишь несколько примеров. Во Flutter есть ещё много инструментов для адаптации интерфейса к доступному пространству.

Обязательно ли адаптировать приложение к iPhone Duo? Стоит ли это усилий?

Прежде чем разбираться, стоит ли адаптировать твоё приложение к iPhone Duo и насколько сложной должна быть такая адаптация, сначала рассмотрим требование Apple, о котором нужно знать:

Эти требования не обязывают тебя создавать отдельный интерфейс специально для iPhone Duo. Однако требование предоставить скриншоты для этого устройства, похоже, показывает, что Apple ожидает от нас проверки работы приложений на нём и исправления хотя бы самых очевидных проблем адаптации.

Так сколько усилий стоит вложить в эту адаптацию? Ответ во многом зависит от типа приложения и ожиданий его пользователей. В моём случае приложения в основном используют на смартфонах, а доля планшетов среди моих пользователей очень мала. Разумно предположить, что пользователей с iPhone Duo у меня тоже будет немного. Поэтому я, скорее всего, выполню лишь минимально необходимую адаптацию, чтобы приложения нормально работали на Duo и соответствовали новому требованию по отдельным скриншотам устройства.

И всё же я бы не оценивал затраты только по числу пользователей с iPhone Duo. Если у твоего приложения уже есть гибкий интерфейс, для приемлемого результата может потребоваться совсем немного изменений. Если это не так, адаптация к Duo поможет обнаружить проблемы, которые также проявятся на планшетах, в окнах с изменяемым размером или на устройствах будущих форматов. В этом смысле работа может принести пользу далеко за пределами одного устройства.

Заключение

iPhone Duo стал новой игрушкой Apple и дал нам ещё один повод проверить, как ведут себя наши приложения, когда им доступно гораздо больше пространства. Как я уже говорил, рекомендую подходить к этому не с мыслью «я адаптирую приложение к iPhone Duo», а с мыслью «я адаптирую приложение к разным размерам окна». Тогда эта работа принесёт пользу не только этому устройству, но и планшетам, а также другим нынешним и будущим форм-факторам.

До следующего раза!