В этой статье мы расскажем о пакете widgetbook для Flutter с открытым исходным кодом. Это Storybook для Flutter, который помогает разработчикам каталогизировать свои виджеты, быстро тестировать их на различных устройствах и темах, а также легко делиться ими с дизайнерами и клиентами.
Что такое Storybook?
Каждый разработчик Flutter, занимающийся веб-разработкой, наверняка уже слышал и, скорее всего, даже использовал Storybook.js. Это один из самых любимых пакетов React, который ускоряет разработку пользовательского интерфейса, позволяя разработчикам создавать компоненты по отдельности. Разработчики могут создавать истории, которые представляют собой конкретные примеры использования компонента и могут быть составлены в каталоги. К полученному Storybook могут получить доступ не только разработчики, но и дизайнеры или клиенты, что упрощает процесс рецензирования. Поскольку Flutter основан на виджетах, мы назвали наш пакет Widgetbook.
Чем Widgetbook отличается от других Storybooks для Flutter?
Несмотря на то, что уже существует несколько пакетов Flutter, пытающихся реализовать возможности Storybook.js, им не хватает некоторых функций, связанных с удобством использования и поддержкой. Код для настройки и поддержки Storybooks всех существующих пакетов приходится писать вручную, что отнимает много времени и сил. Единственным исключением является Framy, но этот пакет не поддерживается с октября 2020 года и поэтому не является null-безопасным. Кроме того, пользовательский интерфейс всех Storybooks достаточно сложен в использовании, поэтому мы создали Widgetbook. В последней версии он поставляется с аннотациями, которые упрощают его настройку и поддержку посредством генерации кода. Widgetbook - это единственный поддерживаемый пакет Storybook для Flutter с аннотациями. Поскольку наша команда из трех человек получила хорошее финансирование, мы можем посвятить все свое время и ресурсы улучшению и поддержке нашего открытого пакета Widgetbook.
. . .
Примеры использования Widgetbook
Создание обособленных виджетов и их визуальное тестирование
Widgetbook предоставляет среду для создания пользовательского интерфейса в изолированном виде. Она позволяет разрабатывать виджеты, не отвлекаясь на окружающий экран и разные факторы. В пользовательском интерфейсе Widgetbook вы можете быстро просматривать и визуально тестировать свои виджеты на различных устройствах и темах. Это позволяет выявить недостатки пользовательского интерфейса во время разработки, которые было бы утомительно тестировать на эмуляторе:
Все ваши виджеты под контролем
Когда ваше приложение растет и над ним работает все больше и больше разработчиков, становится трудно отслеживать все виджеты в вашем приложении. В этот момент даже самые лучшие соглашения об именовании не могут помешать разработчикам задаться вопросом, были ли некоторые виджеты уже разработаны или нет. Часто такие запутанные структуры приводят к хаосу и созданию одинаковых виджетов по несколько раз.
Используя widgetbook, вы можете быстро просматривать все ваши виджеты и экраны, а также примеры их использования:
Сотрудничайте с дизайнерами, владельцами продуктов и клиентами
Процесс рецензирования в командах разработчиков приложений часто бывает утомительным и неэффективным. Когда разработчик завершает разработку важной части приложения, она чаще всего должна быть одобрена дизайнером, владельцем продукта или клиентом. Чтобы получить отзыв, у разработчика в основном есть три варианта:
1. Планирование встречи и презентация, а также обсуждение последних изменений во время встречи. Часто требуется некоторое время, чтобы рецензент был доступен, а встречи в основном проходят неэффективно.
2. Создание исполняемого файла с последними изменениями и предоставление его для скачивания на смартфон лицам, не являющимся разработчиками. Теперь рецензентам приходится просматривать все приложение, чтобы найти измененную часть. Выявление типичных ошибок дизайна в работающем приложении вряд ли возможно. Даже если ошибка найдена, рецензентам будет трудно написать точный отзыв. Либо рецензент назначает встречу с разработчиком, что приводит к той же проблеме, о которой говорилось выше, либо делает скриншоты недостатков и отправляет их разработчику в сочетании с дополнительными объяснениями через средства обмена сообщениями, такие как Slack. Если обратная связь была недостаточно конкретной, что часто случается, им приходится обмениваться дополнительными сообщениями или все-таки назначать встречу.
3. Делать скриншоты соответствующих фрагментов и отправлять их рецензентам. Однако на скриншотах часто отсутствует необходимая информация. Анимация и небольшие взаимодействия, например, с кнопками улучшают пользовательский опыт, но не могут быть отображены и рассмотрены на скриншоте.
Используя нашу услугу Widgetbook на хостинге, ваши рецензенты могут легко получить доступ к вашему Widgetbook через веб-браузер. Таким образом, они могут быстро просмотреть все ваши виджеты и экраны на различных устройствах и в различных темах. Дополнительные функции совместной работы еще больше упрощают процесс рецензирования. Более подробная информация о нашей платформе для совместной работы представлена в конце статьи.
. . .
Как использовать Widgetbook?
Мы предоставляем подробную инструкцию на нашем сайте pub.dev. У вас есть выбор: хотите ли вы настраивать и поддерживать Widgetbook вручную или хотите ускорить процесс с помощью генерации кода с использованием аннотаций. Использование аннотаций предполагает использование нашего пакета widgetbook_annotation и widgetbook_generation. Таким образом, структура Widgetbook будет сгенерирована специально для вас. Чтобы не отвлекаться от этой статьи и подчеркнуть отличие от других сторибуков Flutter (Flutter Storybooks), я остановлюсь только на варианте с аннотациями.
Используем аннотации для легкой настройки и поддержки вашего Widgetbook
@WidgetbookApp
Аннотация @WidgetbookApp может быть настроена только один раз и является обязательной для процесса генерации кода. Не важно, какой элемент аннотируется, но расположение файла, в котором используется @WidgetbookApp, определяет папку, где widgetbook_generator создаст файл app.widgetbook.main. Файл app.widgetbook.main содержит весь код для запуска Widgetbook.
Параметры
Аннотация @WidgetbookApp имеет один обязательный параметр name и один необязательный параметр devices.
Из параметра name генератор создает свойство AppInfo виджетбука (WidgetBook). Таким образом, это значение будет отображаться в верхнем левом углу виджетбука (WidgetBook).
Из параметра devices генератор создаст устройства, в которых можно будет просматривать виджеты.
Пример
Для следующей структуры приложения
1. app
2. ├─ lib
3. │ ├─ main.dart
4. │ ├─ app.dart
5. ├─ test
6. │ ├─ app_test.dart
7. ├─ pubspec.yaml
Также можно добавить @WidgetbookApp к виджету App Widget, заданному в app.dart.
1. @WidgetbookApp(name: 'Example App', devices: [ Apple.iPhone12 ])
2. class App extends StatelessWidget {
3. @override
4. Widget build(BuildContext context) {
5. return MaterialApp();
6. }
7.}
Затем пакет widgetbook_generator создаст новый файл app.widgetbook.dart рядом с файлом app.dart. В результате структура приложения будет выглядеть следующим образом:
1. app
2.├─ lib
3.│ ├─ main.dart
4.│ ├─ app.dart
5.│ ├─ app.widgetbook.dart
6.├─ test
7.│ ├─ app_test.dart
8.├─ pubspec.yaml
@WidgetbookUseCase
@WidgetbookUseCase позволяет разработчикам помечать функции как возможные варианты для дальнейшего использования. Функция @WidgetbookUseCase должна быть применена к функции:
1. Widget name(BuildContext context) {
2. return YourWidget()
3. }
Или лямбда-выражение
1. Widget name(BuildContext context) => YourWidget();\
Параметры
@WidgetbookUseCase содержит два параметра: name и type.
Параметр name определяет, как данный вариант будет отображаться на панели навигации в Widgetbook.
Параметр type определяет, к какому типу виджета относится этот вариант. На основе этой информации и расположения файла, в котором используется аннотация, widgetbook_generator создаст панель навигации, отображаемую в левой части Widgetbook.
Пример
Предположим, что структура файла выглядит следующим образом:
1. app
2. ├─ lib
3. │ ├─ main.dart
4. │ ├─ app.dart
5. │ ├─ tiles
6. │ │ ├─ awesome_tile.dart
7. │ ├─ app.widgetbook.dart
8. ├─ test
9. │ ├─ app_test.dart
10.├─ pubspec.yaml
Пример использования AwesomeTile, расположенный в файле /lib/tiles/awesome_tile.dart, можно воспроизвести в этом файле, выполнив следующее:
1. @WidgetbookUseCase(name: 'Default', type: AwesomeTile)
2. Widget awesomeTileUseCase(BuildContext context) {
3. return AwesomeTile();
4. }
5.
6. class AwesomeTile extends StatelessWidget {
7. const AwesomeTile({Key? key}) : super(key: key);
8.
9. @override
10. Widget build(BuildContext context) {
11. return Container();
12. }
13. }
Часто бывает, что ваш виджет устроен значительно сложнее. В таком случае не стесняйтесь добавить к виджету то, что вам нужно. Это может быть Provider, Bloc или другой виджет управления состоянием.
После генерации кода для виджета вы найдете навигационную панель со следующим содержимым:
1. use cases (Category)
2.├─ tiles (Folder)
3.│ ├─ AwesomeTile (WidgetElement)
4.│ │ ├─ Default (Use Case)
Если вы хотите использовать виджет сразу в нескольких вариантах, вы можете выбрать сразу несколько @WidgetbookUseCases для каждого виджета. Все дополнительные варианты будут располагаться на панели навигации.
@WidgetbookTheme
@WidgetbookTheme позволяет разработчикам регулировать светлую и темную тему своего приложения. Подобно @WidgetbookUseCase, @WidgetbookTheme используется в методах, которые возвращают объект ThemeData.
Конструкторы
@WidgetbookTheme имеет два конструктора @WidgetbookTheme.light() и @WidgetbookTheme.dark() для разграничения светлой и темной темы приложения.
Пример
1. @WidgetbookTheme.dark()
2. ThemeData getDarkTheme() => ThemeData(
3. primarySwatch: Colors.blue,
4. );
Сотрудничество с дизайнерами, владельцами продуктов и клиентами
В настоящее время Widgetbook позволяет разработчикам составлять каталог своих виджетов и быстро тестировать их на различных устройствах и темах. Если вы хотите поделиться своим Widgetbook с командой дизайнеров или клиентами, то это возможно лишь отчасти. Вы можете запустить веб-сборку и разместить ее на собственном сервере, но такая структура поддерживает работу только с одной веткой. Особенно при работе в большой команде, когда несколько разработчиков работают над разными ветками. Таким образом, размещенный на хостинге Widgetbook должен быть представлен в нескольких версиях. Кроме того, текущий Widgetbook не приспособлен для совместной работы.
Но не волнуйтесь, мы справимся! В настоящее время мы разрабатываем платформу для совместной работы, которая разместит ваш Widgetbook на веб-сервере с поддержкой различных ветвей и функций совместной работы для упрощения и ускорения процессов рецензирования. Мы разрабатываем эту платформу в тесном сотрудничестве с избранными пользователями в рамках нашей пилотной клиентской программы. Если вы тоже хотите принять участие в нашей пилотной клиентской программе, зарегистрируйтесь на нашем сайте. Количество мест ограничено.
Вопросы, предложения, обратная связь
Для получения дополнительной информации о Widgetbook, пожалуйста, переходи на наш сайт и подписывайтесь на нас в Twitter и LinkedIn. Если вы хотите связаться с нами, присоединяйтесь к нашему Discord, напишите нам в Twitter или LinkedIn, или отправьте мне письмо. Мы любим получать обратную связь от наших пользователей! 💙
Следите за сообществом Flutter в Twitter: https://www.twitter.com/FlutterComm
Переведено с сайта: https://medium.com/flutter-community/widgetbook-the-storybook-for-flutter-7d27c26c0420