Так что же такое Flutter, и с чем его едят?

Flutter уверенно занимает ТОП-1 в кроссплатформенных языках. Он сокращает время на разработку, и, соответственно, на доставление продукта конечному пользователю. Если говорить бизнесовым языком, то «скорость выше и платишь меньше».

Едят Flutter вместе с языком Dart. На вкус такой же аппетитный, как и JavaScript.

Начав писать на Flutter, можно прочувствовать на себе следующие моменты:

• Нервные клетки исчезают гораздо реже;

• Появляется больше свободного времени;

• Повышается самооценка:)
  
  Чуть больше деталей:
  

• Под капотом свой графический движок Skia и рантайм Dart VM. Написано на C/C++. Соответственно, запускать код ты можешь прямо из консоли, без всяких IDE`шек;

• Очень хорошо поддерживаются 2 платформы – iOS/Android, чуть меньше – WEB, и потихоньку встает на ноги поддержка MacOS/Windows/Linux.

Как переводил? С чего начинал?

Я пришел на проект, когда нативные версии были в проде уже более 5-ти лет. А flutter-копия только училась ходить — был написан функционал одной роли. Всего в приложении их три:

• Курьеры: доставляют банковские продукты

• Кредитные специалисты на административных пунктах и сотрудники в банковских отделениях - осуществляют выдачу дистанционно одобренных продуктов

Архитектура:

Изначально я хотел переписать всё на BLoC, так как это чистая и всеспособная архитектура. Но любовь к трудностям победила — я решил оставить текущую реализацию, MobX.

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

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

Привести мысли в порядок помогли размышления о том, что у Flutter большое растущее комьюнити и наверняка для grpc-запросов уже есть готовые библиотеки. И я не ошибся! Мои нервные клетки сохранились:)

Но ненадолго… Вскоре после переписывания функционала, в связи с безопасностью тестовых сред, grpc-запросы отменили. Пришлось откатывать все обратно до http-запросов.

Функционал ролей

Если вам когда-либо потребуется работать с распределением ролей, рекомендую использовать абстракцию. Благодаря ей:

• сильно сокращается время багофиксов и изменений;

• один элемент может использоваться в 5-ти местах, не нарушая функциональность каждого из них

  
  Но продумать такую абстракцию за раз невозможно, поэтому лучше привести виджеты к универсальному виду, так как они могут понадобиться в новых ролях. А если это невозможно, то поделить на разные виджеты. Ведь универсальность — это, конечно, хорошо, но и чистоту кода нужно сохранять.
  
  Решением стал MobX. На нём можно сделать «обозреваемый геттер», который будет смотреть и следить за заданными условиями. Если условие поменялось – геттер сразу его подхватит и обновит информацию. Так мы оставляем чистый код и не переносим все условия на UI.

Перенос функционала курьеров:

В приложении курьеру нужно иметь карту с пакетами и список пакетов и договоров на доставку. По каждому договору нужны:

• Детальная информация

• Договоренности

• Реквизиты новой карты

• Печатные документы

• Фото клиента

• Фото залога и чек-листа

• Фото основного пакета документов
  
  Расскажу подробнее о некоторых пунктах:
  
  Реквизиты:
  На этом этапе реализовали для курьеров возможность ввести банковский счет, где мы используем overlay.
  
  Печатные материалы:
  У dart’а есть возможность запускать ссылки. Просто вставляешь в метод (launchUrl) диплинк для почты и вуаля: для того, чтобы отправить печатные материалы на почту, нужно нажать всего одну большую кнопку по центру экрана – трудно промахнуться.
  
  Фото клиента/залога/документов:
  Этот функционал используется для идентификации клиента. Основная задача заключалась в том, чтобы сделать единую, но при этом адаптивную схему фотографирования, так как UI и техническая часть не везде одинаковые. Также у самих фотопакетов могли различаться состояния.
  
  Решение: Разграничили state на следующие части: у каждого фотопакета есть своя view model с одинаковой структурой, у каждого сегмента/формы — отдельный state, в котором хранится основная информация по сегменту/форме + специфическое взаимодействие с сервером.
  
  Таким образом, мы получаем примерно такую структуру:
  PackageDetails -> ClientPhotoSegment -> ClientPhotoStore -> ClientPhotoVM.
  
  Также, в приложении «Мобильного банкира» есть функционал обращений. Каждый из пользователей приложения может задать любой интересующий вопрос тех. поддержке, скорость ответа на который особенно важна для выездных курьеров. В переписке должна быть реализована возможность выбрать готовые темплейты, помогающие быстрее получить ответ, и, для того чтобы UI не выглядел деревянно,— нужно была анимация.
  
  Решение: за ним далеко идти было не нужно, т.к. из коробки Flutter у нас уже есть подходящий SliverAnimatedListView

Что в итоге?

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

Таким образом, мы освободили еще и ресурс тестировщика — теперь не нужно тестировать две платформы. Появилось время на автотестирование и улучшение процессов.

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

Рекомендации всем, кто хотел бы вникнуть во Flutter:
1) Очень советую пробежаться по официальной документации, ибо она написана какими-то невероятными гениями.
2) Можно глянуть ютуб канал разработчиков.
3) Ну и напоследок: чистая архитектура + BLoC понятным языком»

Автор статьи: Дмитрий, Flutter-разработчик DexSys.

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

На платформе флатера за первый день сделал боковой дайвер, экран о том как пользоваться программой (статическая верстка инструкций). Разобрался с навигацией и локализацией.

Все пункты бокового меню уже работают (дополнительно там открываются внешние страницы в броузере и действие поделиться)

Далее  Экран настроек

Работа с базой данных через floor

Импорт данных из внешнего API (json)

Интеграция со службой

Первый комит получился - "Как нарисовать сову". В дальнейшем буду каждую бизнес фичу делать в отдельном комите.

https://github.com/Muraveiko/npd_receipt

Код открытый и доступен по ссылке выше

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

Бесплатная мобильная версия (play market): https://play.google.com/store/apps/details?id=ru.dvmatyun.ma...

web версия (для бразуера, производительность неважная): https://make-world-strategy.web.app/#/

Дискорд сообщество: https://discord.gg/gAgTQNZPVh

Старые цвета:

Какие больше нравятся вам?

discord community: https://discord.gg/gAgTQNZPVh