Flutter для iOS-адаптивный макет

Я повернул экран на iPhone, и это сработало, так что, во-первых, пока нет жестко закодированных проблем с позиционированием пользовательского интерфейса с виджетами и каркасом.

Руководство Apple по человеческому интерфейсу рекомендует использовать макет с разделенным представлением вместо панели вкладок на iPad.

Основываясь на текущих экранах телефонов, нам нужно что-то вроде этого:

И немного информации и логики для обнаружения устройства и выбора подходящего макета.

Ta Da

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

XP

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

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

Информация об устройстве и макет.

Добро пожаловать в мир курицы и яйца, основанный на данных асинхронных вызовов.

Чтобы выбрать между вкладками или разделенным представлением, мне нужно знать о клиентском устройстве и его ориентации.

Однако информация об устройстве доступна только после загрузки приложения и построения экрана.

Чтобы обойти это, я создал виджет «LayoutSelector» и новый поставщик уведомлений об изменениях под названием «Layout».

При первом запуске приложения информация об устройстве недоступна и отображается пустой экран.

Когда вызов информации об устройстве завершается, он устанавливает значение поставщика «Layout», который затем уведомляет «LayoutSelector» о необходимости перестроить.

На этот раз он имеет информацию об устройстве и может выбирать между вкладкой или разделенным макетом.

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

Теперь у нас есть загрузочный экран, есть возможность улучшить Ux, когда что-то занимает больше времени, чем обычно, т. е. добавить прикольную анимацию, которая отображается, если приложению требуется больше секунды для загрузки макета.

Это кажется правильным путем, но я приветствую комментарии по этому поводу.

Стоит отметить, что я пытаюсь сделать состояние приложения простым и просто использую провайдеров вместо пакета DI.

Импорт пакетов

Я добавил еще одно требование в контрольный список «Готово, Готово, Готово, Готово» для разработки.

  • Относительный импорт для детей и пакетный импорт для всего остального.

Было заманчиво просто использовать импорт пакетов, но наличие относительных для дочерних пакетов упрощает перемещение папок в каталоге \lib.

Позже в этой серии будет блог о контрольном списке «сделано, сделано, сделано, сделано».

Структура проекта

Пришло время немного больше структурировать, так как количество файлов и каталогов растет.

До этого момента все экраны находились в каталоге /lib/tab. Теперь они разделены с разделенным представлением, они были разделены, и у нас есть три каталога.

  • \lib\ui\tab
  • \lib\ui\screen (Используется вкладками и раздельными панелями просмотра.)
  • \lib\ui\splitview

Количество каталогов верхнего уровня также увеличилось, поэтому я добавил \ui на верхний уровень и переместил ряд элементов верхнего уровня под него.

Я следую общему правилу 7, никогда не более 7 предметов на данном уровне. Не уверен, от кого я взял это правило.

Ссылки

Звук и изображение

Еще кое-что…

«Мы не проводим маркетинговых исследований. Мы не нанимаем консультантов. Мы просто хотим делать отличные продукты».

Стив Джобс_