Flutter для iOS-верстки
Это хорошее место для начала, вы действительно можете начать воплощать свои идеи в жизнь, как только вы сможете показывать контент и перемещаться по нему.
Логин, логирование и прочие элементы фреймворка, хотя жизненно важные можно и нужно отложить на потом. Слишком легко начать проект и никогда не пройти дальше экрана входа в систему, поэтому просто не начинайте с них.
Я решил использовать навигацию по вкладкам для DigestableMe.
Преимущество панели вкладок заключается в том, что она всегда видна, навигация одним щелчком мыши, к которой привыкли люди с телефонами Apple и Android, что придаст вашему приложению родной вид, а также хороший Ux. сильный> опыт.
Если у вас большой экран, боковая панель или меню обеспечат лучший опыт. Эти макеты будут рассмотрены в других сообщениях, и если вы не концентрируетесь на телефоне/мобильном устройстве в первую очередь, вы можете пропустить этот пост.
Предположим, у нас есть аналитика, показывающая, что мы должны ориентироваться на пользователей iPhone, поэтому мы можем начать с создания традиционной нижней панели вкладок.
В следующем посте мы изменим приложение для телефонов Android и других устройств.
Google рекомендует до 5 значков верхнего уровня, а Apple — 3–5, поэтому мы собираемся установить максимальное количество элементов верхнего уровня равным 5.
DigestableMe начинается со следующих трех вкладок:
- Интересы, список вещей, которые нужно переварить.
- Друзья, люди, с которыми можно переварить.
- История, недавний первый список действий.
Новый виджет будет называться TabbedLayout и будет содержать Панель вкладок и Область содержимого.
Его цель состоит в том, чтобы:
- Выделите основные функции
- Упростите путь пользователя
Теперь мы можем добавить некоторые критерии приемки, чтобы дать направление и знать, когда мы закончим:
- Он будет содержать Панель вкладок.
- Панель вкладок может содержать от 2 до 5 элементов.
- Панель вкладок будет привязана к нижней части виджета.
- Высота панели вкладок будет соответствовать размеру самого большого элемента.
- Каждый элемент будет состоять из заголовка и значка.
- Иконки Купертино будут использоваться на устройствах Apple, Материалы — на всех остальных.
- Над Панелью вкладок будет находиться Область содержания.
- Область содержимого расширится, чтобы заполнить доступную высоту.
- При нажатии вкладки отображается соответствующий контент.
- Элементы вкладки и содержимое настраиваются, т.е. входы.
- Виджет TabbedLayout развернется и заполнит все доступное пространство.
- Виджет может быть тематическим.
- Виджет может отображаться в виде скелета при загрузке.
Для начала я создал эти новые файлы:
- /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:
- Панель вкладок будет привязана к нижней части виджета.
- Высота панели вкладок будет равна размеру самого большого элемента.
- Область содержимого расширится, чтобы заполнить доступную высоту.
- При нажатии вкладки отображается соответствующий контент.
- Виджет Вкладки развернется и заполнит все доступное пространство.
Подробнее о новом виджете и тестах смотрите в коде.
Задняя конфорка
- Использование материального дизайна для других устройств и браузеров, чтобы создать кроссплатформенный внешний вид.
- Брендинг, темы.
Включая эти критерии приемлемости:
- Иконки Купертино будут использоваться на устройствах Apple, Материалы — на всех остальных.
- Виджет может быть тематическим.
- Виджет может отображаться в виде скелета при загрузке.
XP
VSCode
Используйте расширение VSCode
для создания скелетного кода виджета с отслеживанием состояния с помощью фрагмента.
Используйте расширение VSCode для создания класса TabItem.
NB: я сократил кодеин до конструктора и toString, мы добавим больше, если потребуется, в следующих постах.
Люди
Кент Бек, основатель Agile Manifesto, TDD, экстремальное программирование.
Звук и изображение
YAGNI, просто звучало как Cagney…
Ссылки
- Руководство по человеческому интерфейсу Apple — панель вкладок
- Материальный дизайн Google — навигация
- 6 основных паттернов для мобильной навигации: плюсы и минусы
- 8 лучших дизайнов меню мобильной навигации для вашего вдохновения
- Дядя Боб, демонстрация TDD.
- Флаттер — управление государством
- Флаттер — Макеты
- Пакет Дарт — Ивент автобус
- Обработка ошибок во Flutter
- Глубокое погружение в тестирование виджетов во Flutter: Часть II (Finder и WidgetTester)
- Иконы Купертино
- Добавьте панель вкладок и панель навигации в стиле iOS в ваше следующее приложение Flutter
Еще кое-что
У нас было фундаментальное убеждение, что сделать все правильно с первого раза будет проще, чем возвращаться и исправлять. И я не могу достаточно решительно сказать, что последствия такого отношения ошеломляют. Я видел их снова и снова на протяжении всей своей деловой жизни.
Стив Джобс_
Другие посты в серии
Разработка
- "Макет"
- Списки
DevOps: