Flutter для iOS-верстки

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

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

Я решил использовать навигацию по вкладкам для DigestableMe.

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

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

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

В следующем посте мы изменим приложение для телефонов Android и других устройств.

Google рекомендует до 5 значков верхнего уровня, а Apple — 3–5, поэтому мы собираемся установить максимальное количество элементов верхнего уровня равным 5.

DigestableMe начинается со следующих трех вкладок:

  • Интересы, список вещей, которые нужно переварить.
  • Друзья, люди, с которыми можно переварить.
  • История, недавний первый список действий.

Новый виджет будет называться TabbedLayout и будет содержать Панель вкладок и Область содержимого.

Его цель состоит в том, чтобы:

  • Выделите основные функции
  • Упростите путь пользователя

Теперь мы можем добавить некоторые критерии приемки, чтобы дать направление и знать, когда мы закончим:

  1. Он будет содержать Панель вкладок.
  2. Панель вкладок может содержать от 2 до 5 элементов.
  3. Панель вкладок будет привязана к нижней части виджета.
  4. Высота панели вкладок будет соответствовать размеру самого большого элемента.
  5. Каждый элемент будет состоять из заголовка и значка.
  6. Иконки Купертино будут использоваться на устройствах Apple, Материалы — на всех остальных.
  7. Над Панелью вкладок будет находиться Область содержания.
  8. Область содержимого расширится, чтобы заполнить доступную высоту.
  9. При нажатии вкладки отображается соответствующий контент.
  10. Элементы вкладки и содержимое настраиваются, т.е. входы.
  11. Виджет TabbedLayout развернется и заполнит все доступное пространство.
  12. Виджет может быть тематическим.
  13. Виджет может отображаться в виде скелета при загрузке.

Для начала я создал эти новые файлы:

  • /test/widget/layout/tabbed_layout_tab_bar_test.dart
  • /lib/виджет/макет/tabbed_layout.dart

Затем я начал писать тесты и код для:

  • Реализуйте критерии выше
  • Предоставьте контракт на код.
  • Документируйте код с помощью удобочитаемых тестов.

Ta Da

При написании тестов эти дополнительные файлы были добавлены.

  • /lib/widget/layout/domain/tab_item.dart
  • /test/widget/layout/fixture/tabbed_layout_fixture.dart
  • /test/widget/layout/tabbed_layout_tab_item_test.dart
  • /test/widget/layout/tabbed_layout_content_test.dart

Некоторые критерии приемки были пропущены, поскольку функциональность покрывается и тестируется виджетом CupertinoTabScaffold:

  1. Панель вкладок будет привязана к нижней части виджета.
  2. Высота панели вкладок будет равна размеру самого большого элемента.
  3. Область содержимого расширится, чтобы заполнить доступную высоту.
  4. При нажатии вкладки отображается соответствующий контент.
  5. Виджет Вкладки развернется и заполнит все доступное пространство.

Подробнее о новом виджете и тестах смотрите в коде.

Задняя конфорка

  • Использование материального дизайна для других устройств и браузеров, чтобы создать кроссплатформенный внешний вид.
  • Брендинг, темы.

Включая эти критерии приемлемости:

  1. Иконки Купертино будут использоваться на устройствах Apple, Материалы — на всех остальных.
  2. Виджет может быть тематическим.
  3. Виджет может отображаться в виде скелета при загрузке.

XP

VSCode

Используйте расширение VSCode

для создания скелетного кода виджета с отслеживанием состояния с помощью фрагмента.

Используйте расширение VSCode для создания класса TabItem.

NB: я сократил кодеин до конструктора и toString, мы добавим больше, если потребуется, в следующих постах.

Люди

Кент Бек, основатель Agile Manifesto, TDD, экстремальное программирование.

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

YAGNI, просто звучало как Cagney…

Ссылки

Еще кое-что

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

Стив Джобс_

Другие посты в серии

Разработка

DevOps: