5 демо-уроков апреля для тех, кто хочет роста в ИТ
Привет, Хабр. Эти уроки проводят преподаватели курсов Отус в преддверии старта новых потоков. На них можно узнать о формате обучения, пообщаться с экспертами и заодно закрыть пробелы в знаниях по интересующей теме. Участие бесплатное. Присоединяйтесь.
5 бесплатных уроков марта для мобильных разработчиков
12 марта 20:00 >>Профессиональные модульные тесты в Android: как тесты улучшают код Открытый вебинар курса «Android-разработчик. Продвинутый уровень» Урок о том, как писать в Android осмысленные модульные тесты для ViewModel, репозиториев и бизнес-логики, чтобы они не маскировали проблемы, а реально улучшали архитектуру и поддержку кода. Записаться на урок
18 марта 20:00 >> Пишем простой проигрыватель на SwiftUI Открытый вебинар курса «IOS-разработчик» Соберете на SwiftUI простой медиапроигрыватель с интерактивным интерфейсом, освоите работу с локальными аудио- и видеофайлами в iOS и наметите путь к интеграции внешних сервисов. Записаться на урок
19 марта 20:00 >> Современная архитектура приложения и внедрение зависимостей Открытый вебинар курса «Android-разработчик. Продвинутый уровень» Разберемся, как выстроить Android-приложение на основе чистой архитектуры, связать слои через MVVM и настроить внедрение зависимостей с помощью Koin без лишней магии. Записаться на урок
23 марта 20:00 >> Навигация Pro-уровня в SwiftUI: как строить масштабируемые iOS-приложения без хаоса в переходах Открытый вебинар курса «IOS-разработчик. Продвинутый уровень» Как в SwiftUI проектировать навигацию без архитектурного хаоса: отделять переходы от интерфейса, управлять deep link и модальными экранами, строить масштабируемую структуру приложения. Записаться на урок
25 марта 20:00 >> Как писать Flutter-код так, чтобы ИИ правильно его дописывал Открытый вебинар курса «Flutter-разработчик» Поймете, почему искусственный интеллект ошибается при генерации Flutter-кода, и освоите приёмы, которые улучшат подсказки, повысят читаемость проекта и ускорят дальнейшую разработку. Записаться на урок
Еще больше бесплатных уроков от преподавателей курсов по всем ИТ-направлениям можно посмотреть в календаре мероприятий.
Привет! На связи Иван и Михаил, Flutter-разработчики из Финама. Когда мы начали писать на Flutter, поняли — граблей тут много, и на некоторые мы уже успели наступить, собрали бинго и готовы рассказать, где они поджидают. Делимся «анти-чеклистом» — вдруг поможет сэкономить время и нервы:
«Книга — лучший подарок», но не в этом случае
Первая ошибка — искать идеальную книгу по Flutter, язык и фреймворк меняются быстрее, чем успевает выходить новое издание. Через пару месяцев некоторые главы могут быть уже неактуальны.
Что делать? Читать документацию, она обновляется. Поначалу может быть трудно вникнуть, опираясь только на нее. На этот случай есть запасной вариант — пройти какой-нибудь годный курс (вроде Udemy). Выбирайте те, где обновления выходят после каждого релиза.
Где брать актуальную информацию
Чтобы не отстать, нужно искать и читать свежие статьи про Flutter и Dart. Из русскоязычных источников нам помогает, конечно, Хабр, а еще рекомендуем ТГ-канал Amiga. Хорошие статьи на английском выходят на Medium. На Youtube-канале Flutter регулярно публикуют интересные видео. А еще мы попробовали лайфхак с нейросетью: она собирает дайджест свежих материалов за неделю. Удивительно, но это правда работает.
Начни со стейт-менеджментов и правильной архитектуры приложения
Самая частая боль новичков — хаос в коде. Мы видели проекты, где бизнес-логика жила прямо в build(). Всё работало… до первого бага.
Как действовать:
Начните с простого setState — это базовый способ управления состоянием. Затем попробуйте пакеты Bloc, Riverpod — почувствуете разницу в читаемости и структуре.
Изучите основы чистой архитектуры: это позволит вам быстрее понимать чужой код и лучше разбираться в своем.
Хотите потренироваться? Попросите AI сгенерировать пример проекта с Bloc — и разберите его построчно. Или обратитесь к статьям.
Не бойся проблем при сборке
При сборке проекта ты скорее всего столкнешься с ошибками компиляции и в 90% случаев это будут ошибки, связанные с Xcode и Gradle. Не нужно паниковать, Flutter достаточно умен и в большинстве случаев предложит тебе решение. Если не было предложено решение или оно не сработало — не беда, первая ссылка в гугле вероятнее всего решит твою проблему. И не забывайте про старый дедовский способ перезагрузки:
flutter clean
flutter pub get
В топку тяжелые среды, работай по четвергам в Visual Studio Code
Среда разработки — твой основной инструмент, ты будешь работать в ней 99% своего времени, а значит она должна быть удобной и комфортной для тебя. Для Flutter есть две основные IDE: Android Studio и Visual Studio Code. Android Studio — мощная, с готовыми тулзами и анализаторами, но тяжеловесная. VS Code — лёгкий, быстрый и гибкий.
В Финаме мы работаем в VS Code — там проще интегрировать CLI-инструменты, автогенерацию кода и кастомные скрипты. Но выбор — это вопрос привычки: рекомендую попробовать обе. Главное, чтобы IDE не тормозила, когда запускаешь hot reload 20 раз в час. Я знаю людей, которые переходили с Android Studio на Visual Studio Code, но не знаю обратных примеров.
Логике в UI не место
Выгружать логику работы приложения (например, сетевые запросы, обработку данных) в методе build() — грубая ошибка. Это ведет к багам, фризам, затрудняет тестирование, нарушает принципы разделения обязанностей.
Используйте стейт-менеджеры. Логика должна быть отделена от UI — это облегчает поддержку, переиспользование и покрытие тестами.
Делите UI на независимые виджеты
Если экран превращается в тысячу строкового монолита — значит пора рефакторить. Разбивайте интерфейс на маленькие, самодостаточные виджеты (например: заголовок, список, кнопки). Это упрощает чтение, тестирование и повторное использование компонентов. И старайтесь ограничивать один экран не больше 150-200 строками кода.
Async — не просто await
Асинхронное программирование в Dart требует внимания:
Оборачивайте важные вызовы в try/catch.
Используйте async/await для читаемого кода; а если используете .then(), не забывайте обработать
⚙️ Улучшен механизм передачи текущих значений анимации дочерним виджетам AnimatedBuilder
⚙️ Исправлен баг сепаратора в виджете ListView.separated, который не уничтожался правильно
⚙️ Значительно улучшено покрытие юнит-тестами критических участков кода (с 27% до 64%)
📖 Обновленная документация
Подробности о самом интересном:
⚡️Самое большое обновление виджетов! В этом важном релизе были добавлены сливеры - важная часть Flutter, без которой зачастую сложно реализовать высокоэффективные эффекты скролла.
🚀 Duit v4: производительность и простота. Анонсирую начало масштабных работ над мажорным обновлением проекта. Упрощение кодовой базы, решение проблем производительности, переосмысление дизайна DSL и надежная валидация входящих параметров - это лишь малая часть грядущего большого обновления!
Isar — это NoSQL база данных, которую когда-то разработали создатели Hive. Про все плюсы этой БД мы уже писали. Однако однажды нашей Flutter-команде достался проект, который заставил их в корне изменить отношение к Isar и отказаться от этой технологии раз и навсегда.
Это было приложение для аграриев — то есть буквально для людей, которые работают в полях. Грубо говоря, оно помогало фермерам следить за состоянием угодий: например, проверять, что уже обработано от колорадского жука, а что пока не обработано. В общем, полезная штука для очень понятной целевой аудитории.
Но специфика приложения накладывала на нас и вполне себе конкретные технические требования: оно должно было бесперебойно работать в офлайне — поля всё-таки бывают далековато от вышек мобильных операторов. Для реализации офлайн-режима как раз и был выбран Isar — это решение казалось удобным.
Как же мы ошибались! Так как у приложения был офлайн-режим, на старте оно загружало большие объемы данных, среди которых, например, было гигантского видео. И это создавало проблемы. В приложении добавлялись новые справочники, но документации на миграцию в Isar не было. К тому же на Android 32-ой архитектуры в базе вылезли баги.
Как исправить эти нюансы, мы не поняли. Писали письма разработчикам Isar, смотрели, что пишут об этом в сообществах. Но в итоге махнули рукой: решили всё переписать на SQL. Выбрали Drift, так как уже имели опыт работы с ним. Взяли уже готовый интерфейс и добавили его в приложение. Вскоре поняли, что Drift отвечает нашим запросам. Isar же использовать в проектах больше не планируем.
Кстати, этот проект в целом оказался судьбоносным для нашей команды Flutter. Какие еще уроки они вынесли после работы над приложением — в отдельной статье.
Google I/O 2025: два вечера главных анонсов вместе с Surf
20 и 21 мая — подключайся к нашим стримам по Google I/O. Будем вместе следить за анонсами новинок, делиться первыми впечатлениями и обсуждать всё самое интересное из мира технологий и разработки в прямом эфире.
Смотрим и комментируем:
20 мая (вторник) → 20:00 — Google Keynote: все главные анонсы и будущее технологий от Google.
Попробую запостить тут пост - размышления :) Наконец-то написал небольшой mcp сервер для flutter до относительно стабильного состояния.
Самым интересным было понять как работать с dart vm и devtools extensions - можно ли вообще обращаться к ним со стороннего сервера и что можно использовать для агента (например в cursor).
Так как на момент начала dart mcp сервера стабильного не было в pub.dev, решил mcp server писать на typescript.
Что получилось (на данный момент)
Архитектура сообщений (использовал везде JSON RPC 2, так как это по умолчанию протокол общения с Dart VM):
MCP server <-> Dart VM Из плюсов - прямой доступ, проще работать Из минусов - не все методы работали (в основном связанные с другими extensions), все структуры нужно писать с нуля
MCP server (TS) <-> Forwarding Server (TS) <-> Devtools Extension (Dart) <-> Dart VM Из плюсов: в devtools можно использовать готовые библиотеки для работы с dart vm. Все методы работают как должны. Можно очень просто дебажить все методы, так как есть прямой доступ к dart vm, и не нужно работать через MCP inspector. Все ошибки мониторятся (слушаются через Dart VM) в Devtools Extension.
Из минусов: сложность запуска: нужно обязательно запускать Forwarding Server, Devtools Extension и проверять что всё работает.
Почему так: напрямую MCP server связать с Devtools Extension пока не удалось, идея через регистрацию методов в Dart VM, чтобы Dart VM выступала как forwarding server пока тоже не сработала.
Изначально, чтобы разобраться как работает, подключил все методы, доступные в dart vm, но со временем пришел только к двум-трем основным: - get_app_errors - чтобы мониторить ошибки, появляющиеся в Dart VM. Использовал только краткое описание, чтобы было сложно переполнить context. - hot_reload - чтобы агент мог сделать hot reload и ошибки записались в Devtools Extension.
23 апреля в 20:00 приглашаем воронежских разработчиков на неформальный митап. Для тех, кто не сможет прийти офлайн, будет трансляция.
Никаких скриншотов кода на слайдах. Никакого душного обсуждения документации. Поговорим о том, что окружает нас вне работы. Прокачаем софт-скиллы и нетворкинг.
В программе митапа три доклада:
Лёша, Android-разработчик Surf — «Дедлайн "вчера": как работать с приоритетами».
Как рассеивается внимание? Как ставить приоритеты в работе с командой? Когда нужно выносить переписку в звонок, а когда можно обойтись текстом? Ответим на эти и многие другие вопросы про приоритеты в работе и жизни.
Дима, Flutter-разработчик Surf — «Тимлид — друг или враг? Или так»?
Расскажу о роли тимлида, но со стороны нижестоящего сотрудника. Что мне нравится/что не нравится в лиде, что для меня кажется полезным, а смысл чего я не понимаю.
Кирилл, iOS-разработчик, наш друг и гость из Una Financial — «Work-life health для IT-шника среднего возраста».
Поделюсь жизненными проблемами разработчиков и способами их решения. Внимательный слушатель вообще сможет их избежать! Обсудим, как сделать жизнь лучше, повысить её качество. Максимально продлим трудоспособный возраст.
Митап пройдет 23 апреля, в 20:00, в воронежском пространстве «Eventuki»: ул. Фридриха Энгельса, 52.
Участие в митапе бесплатное, чтобы прийти или получить ссылку на трансляцию, нужно зарегистрироваться 👈
Запись трансляции обязательно сохраним, но если вы из Воронежа, мы очень ждём понетворкать вживую. До встречи 😉
⚙️ Исправлена ошибка аттача контроллера к драйверу после тайпкаста
Подробности о самом интересном:
🔥 Среди новых виджетов есть совершенно особенный - RemoteSubtree. Этот виджет позволяет динамически загружать собственный контент (макет дочерних поддеревьев виджетов). Ключевая фича виджета - возможность передать ему список зависимостей (по аналогии с действиями), благодаря которым будут собраны данные виджетов и переданы в теле запроса на получение контента.
🚀 Экспорт API duit_kernel, который отвечает за работу тем. С этого релиза этой функцией можно уверенно пользоваться! В example app добавлен пример использования нового API.
🎁 Работа с кастомными виджетами стала еще более удобной! Больше не требуется вручную кастовать UIElementController<dynamic> к UIElementController<тип_атрибута> - приведение типов будет выполенено автоматически.
Уже в эту пятницу, 21 февраля, в Москве пройдет FlutterConf — профессиональная конференция по Flutter. Ожидается, что соберется больше двухсот специалистов — докладчиков и слушателей.
Доклады будут читаться в два потока, тематика достаточно широкая: реальные кейсы с нестандартными требованиями, архитектурные решения и инструменты для Flutter-проектов. Выступать будут разработчики и тимлиды из Amiga, Яндекс-Про, Билайна, Лаборатории Касперского, Потока, Открытой мобильной платформы, Friflex, MadBrains, BetBoom.
А в шесть часов вечера начнется круглый стол, посвященный прошлому, настоящему и будущему Flutter.
Посмотреть расписание конференции и зарегистрироваться можно на сайте (регистрация платная), посетить ее можно в Москве в Radisson Blu Belorusskaya Moscow или же подключиться удаленно.
От «Финама» мы отправим туда нескольких выразивших желание разработчиков из Москвы, а также будем смотреть мероприятие в Питере, в коворкинге. Наша команда работает с Flutter с 2019 года, наши приложения выигрывают премии на тематических мероприятиях. Кстати, прямо сейчас у нас открыта вакансия Flutter-разработчика, и, если кому-то из хабравчан интересно – написать можно нашему рекрутеру.
Обнаружены проблемы с отображением Flutter приложений на Snapdragon 8.
https://github.com/flutter/flutter/issues/137002
Проблемы касаются тех приложений, которые используют Impeller (новый графический движок, который пришёл на замену Skia), при его отключении всё становится хорошо. Проблемы замечены на Samsung Galaxy S22+, Redmagic 10, Honor Magic6 Lite 5G и Honor Porshe Design Magic7 PSR. На всех этих устройствах установлен Snapdragon 8.
Официальное объявление от команды Dart: разработка макросов остановлена.
После нескольких лет экспериментов выяснилось, что их реализация слишком сильно замедляет компиляцию и ухудшает разработческий опыт (о чем не раз писал и говорил на Crossconf 2024). У меня были предположения, что мы увидим макросы только в 2026-м году, но такого поворота событий совсем не ожидал >_<
Конечно, это не повод ставить крест на Dart, хотя и очень обидно! 😭 Вместо макросов команда сосредоточится на:
Улучшении работы с данными – это самая востребованная фича среди разработчиков.
Оптимизации build_runner – ускорение сборки и улучшение генерации кода.
Внедрении augmentations – новый инструмент, который упростит кодогенерацию.
👉 Подробнее об этом можно прочитать в статье на Medium, которую написал директор по разработке Dart и его экосистемы Vijay Menon
Что думаете по этому поводу? Какие в таком случае новые фичи ждете? Разочарованы ли отменой макросов?
Разрозненная структура файлов, разные подходы к оформлению и дублирование функциональности — всё это замедляет разработку и повышает вероятность ошибок. Чтобы победить хаос, сделать работу команды быстрее и проще, попробуйте внедрить CodeStyle — это свод правил, которые делают код читаемым, стандартизированным и удобным для поддержки.
Вот что вы получите:
Читаемость: новые участники команды быстрее понимают проект.
Стандартизация: вся кодовая база выглядит так, будто ее писал один человек.
Поддерживаемость: проще рефакторить и находить ошибки.
Почему CodeStyle особенно важен для Flutter
Flutter на проектах дает гибкость, которая при отсутствии дисциплины превращается в проблему. Например, вы можете столкнуться с:
разрозненной структурой файлов, которая затрудняет поиск компонентов;
непоследовательным оформлением кода, которое усложняет его понимание;
дублированием библиотек и функционала, которое приводит к путанице.
Единый CodeStyle решает эти проблемы и создает прозрачную и предсказуемую структуру проекта.
Как внедрить CodeStyle: 4 шага
1. Обучение
Проводите мастер-классы и лекции, показывайте примеры из реальных проектов. Это помогает разработчикам видеть преимущества стандартов.
2. Автоматизация
Настройте инструменты для проверки кода:
линтеры (например, flutter_lints) для автоматической проверки стиля;
pre-commit хуки (Husky или Lefthook) для форматирования кода перед коммитом.
3. Код-ревью
Сделайте ревью обязательным этапом Pull Request. Это улучшит качество кода и поможет следить за соблюдением правил.
4. Командное соглашение
Создайте документ с правилами CodeStyle и внедрите их в культуру команды. Пусть разработчики понимают, что стандарты упрощают жизнь каждому.
Если хотите внедрить эти подходы на своих проектах, читайте подробную статью от нашего Flutter-разработчика Никиты Грибкова. В ней найдете больше примеров, кода и рекомендаций.
Привет,Хабровчане ! Неожиданно решился на создание этой публикации – пусть она окажется полезной для кого-то из вас. Представьте ситуацию: рабочий день позади, включаем компьютер, запускаем музыкальное сопровождение и... прямо в кресле дивана нас уже сморит Морфей. Пробуждение же наполняет осознанием неразрешимой дилеммы – выключить ПК или переключить трек? Особенно когда репертуар оставляет желать лучшего!
Вот и приходится преодолевать себя, чтобы добраться до компьютера.
Так вот, в качестве решения этой проблемы разрабатываю приложение для Android с небольшим сервером на PC (начало только под Windows).
Основной фишкой станет регулировка яркости экранов, удаленное отключение ПК, переключение треков в плеере.
Телефонное приложение будет максимально чистым: без рекламы, подписок или дополнительных платежей.
Я – инженер(технарь), а не профессиональный программист, так что обещаю уделять больше внимания техническим моментам .
Все будет сделано в меру моих умений и возможностей. Благодарен за внимание! По мере продвижения работы буду дополнять этот пост новыми деталями.
А какого функционала не хватает вам ?
Пока все в стиле демо
Сделал ещё несколько дэмок . 2 приложения на kivymd (python3) связь с сервером http запросами ,но вес приложения уменьшить не удалось . Попробовал на flutter спасибо Гуглу ,ии и другу разработчику ,связь. с сервером с помощью протокола mqtt.
Прошедшее мероприятие от команды Flutter - #FlutterInProduction можно разбить на 3 части (если лень читать - вот ссылки на видеоразбор мероприятия ЮТУБВК)
👉 Разговор про эры развития Flutter:
эра экспериментов (2014 - 2018)
эра роста ( 2018 - 2022)
Эра кровавого энтерпрайза (начиная с середины 2022 года)
Разработчики наконец-то определились со зрелостью фреймворка и на протяжении этой части (да и всего мероприятия) нам показывали, что Flutter применяется в разных областях и крупными компаниями с огромнейшим потоком клиентов ^_^
👉 Экосистема
Тут было про поддержку различных IDE, что на pub доступны более 50к пакетов. Заострили внимание на том, что вокруг Flutter выстраивается экосистема (FlutterFlow, Shorebird, Serverpod, Codemagic), в то время как он сам по гланды интегрирован в экосистему Google☝️
Отдельно следует отметить упоминание о Flutter Consultants, что говорит о реальной зрелости фреймворка😎
👉 Если обобщить все услышанное с секцией Roadmap, получится следующая выжимка над чем будет работать команда Flutter в 2025 году:
👀 Точность воспроизведения платформ. Такое обновление виджетов, чтобы у людей не складывалось ощущение, что это Flutter
🔥 Impeller (Flutter GPU) не только на мобилках, но и на десктопе (web пока под большим вопросом)
🔥🎉🥳 Средства предварительного просмотра виджетов с поддержкой редактирования
🔥🎉🥳 Прямое взаимодействие с native platform
🔥🔥🔥 Ускорение написания и упрощение чтение кода (p.s. это подгорает мой пердак от увиденных декораторов 😂, первичный конструктор - норм тема😎)
Не все показанное может быть реализовано на 100% От некоторых фич могут отказаться или перенести на потом.
Прошедшее мероприятие от команды Flutter - #FlutterInProduction можно разбить на 3 части (если лень читать - вот ссылки на видеоразбор мероприятия ЮТУБВК)
👉 Разговор про эры развития Flutter:
эра экспериментов (2014 - 2018)
эра роста ( 2018 - 2022)
Эра кровавого энтерпрайза (начиная с середины 2022 года)
Разработчики наконец-то определились со зрелостью фреймворка и на протяжении этой части (да и всего мероприятия) нам показывали, что Flutter применяется в разных областях и крупными компаниями с огромнейшим потоком клиентов ^_^
👉 Экосистема
Тут было про поддержку различных IDE, что на pub доступны более 50к пакетов. Заострили внимание на том, что вокруг Flutter выстраивается экосистема (FlutterFlow, Shorebird, Serverpod, Codemagic), в то время как он сам по гланды интегрирован в экосистему Google☝️
Отдельно следует отметить упоминание о Flutter Consultants, что говорит о реальной зрелости фреймворка😎
👉 Если обобщить все услышанное с секцией Roadmap, получится следующая выжимка над чем будет работать команда Flutter в 2025 году:
👀 Точность воспроизведения платформ. Такое обновление виджетов, чтобы у людей не складывалось ощущение, что это Flutter
🔥 Impeller (Flutter GPU) не только на мобилках, но и на десктопе (web пока под большим вопросом)
🔥🎉🥳 Средства предварительного просмотра виджетов с поддержкой редактирования
🔥🎉🥳 Прямое взаимодействие с native platform
🔥🔥🔥 Ускорение написания и упрощение чтение кода (p.s. это подгорает мой пердак от увиденных декораторов 😂, первичный конструктор - норм тема😎)
Не все показанное может быть реализовано на 100% От некоторых фич могут отказаться или перенести на потом.
Внедряем модели машинного обучения в мобильное приложение на Flutter
Если Flutter-приложение нужно сделать более удобным и инклюзивным, скорее всего, придется использовать технологии ML. Вот только несколько примеров задач, в которых машинное обучение наверняка понадобится:
классификация изображений: чтобы приложение могло распознавать объекты на фотографиях или видео (например, Google Lens);
обработка естественного языка (NLP): в приложениях с голосовыми ассистентами или чат-ботами ML обрабатывает речь и тексты;
персонализация: алгоритмы ML анализируют поведение пользователей и предлагают персонализированный контент или рекомендации;
распознавание голоса: используется в приложениях для конвертации речи в текст и команд.
Существует несколько способов, как интегрировать модели машинного обучения в приложение. Можно воспользоваться ML Kit от Firebase или библиотеками на Dart. Но самое распространенное решение — фреймворк TensorFlow Lite (TFLite). Его главное (но не единственное) преимущество — что он будет работать в том числе тогда, когда смартфон не подключен к интернету.
В отдельной статье разбираем, как настроить модель для работы с TFLite, как интегрировать TFLite во Flutter-приложение и как оптимизировать модели для мобильных устройств.
Нативные инструменты для создания виджетов во Flutter-приложении
Несмотря на все преимущества Flutter, он не всегда оптимально решает задачи, которые требуют глубокой нативной интеграции. Существуют инструменты, разработанные специально под нативные платформы, но недоступные напрямую из Dart. И как правило, в таких случаях на помощь приходит PlatformChannel.
Но существуют и нативные инструменты, которые интегрируются с Flutter. Они, например, позволяют внедрять Home Widgets — элементы, с которыми можно взаимодействовать напрямую с домашнего экрана
Когда виджеты разработаны, их нужно внедрить в приложение. Библиотека home_widget предоставляет набор инструментов для работы с нативными виджетами, данные методы мы можем вызвать при помощи класса HomeWidget. Вот самые важные из методов:
Future<bool?> saveWidgetData<T>( String id, T? data )
Метод позволяет сохранить передаваемые данные в хранилище нашего виджета.
Метод позволяет прочитать данные из нашего виджета. Он может быть полезен, если нужно синхронизировать информацию между виджетом и Flutter-приложением.
Больше подробностей о нативных инструментах с примерами кода вы найдете в отдельной статье.
Для работы с Rive Animation лучше использовать их UI-интерфейс, в котором и происходит создание и настройка самой анимации. Анимация состоит из нескольких составляющих. Они больше знакомы дизайнерам, но, если кратко, вот некоторые из них.
Artboard: слой, который является холстом анимации — на нем располагаются остальные элементы. В нем можно задать цвет и размер фона. В каждом файле Rive есть хотя бы один такой.
Group: необязательный элемент, но он отлично подходит, чтобы объединить элементы в группы для любого объекта, изменение которого может потребоваться в дальнейшем.
Shape: Rive позволяет создавать, редактировать и анимировать векторную графику, используя процедурные или пользовательские фигуры. Из них чаще всего и состоит весь интерфейс.
Pen: это инструмент, который позволяет делать очень сложные кастомные фигуры.
Про анимации и Flutter-приложения много пишет руководитель нашего отдела мобильной разработки Саша Ворожищев — подписывайтесь на его канал, если интересна эта тема.
Hola, Amigos! Делюсь с вами записью своего доклада с конференции Mobius на тему «Создание indoor-карты здания на Flutter». Рассказал, как реализовать размещение на одном или нескольких экранах внутренней карты здания. А также раскрыл подходы и собственное решение с использованием Flutter.
Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Сегодня поговорим про отображение HTML-тегов как виджетов в наших приложениях на Flutter.
Чаще всего для этого используется библиотека flutter_html:
Html(data: ‘<p>Hello World</p>’);
Но у нее есть несколько минусов:
– Она больше года не обновлялась, что с одной стороны хорошо, так как она стабильна, а с другой — она уже устаревает. –В ней есть баги. Например, если внутри тега <p> окажется список (<ul>, <ol>), то снизу появляется отступ, равный высоте списка. – Не очень понятная система стилизации. Чтобы что-то изменить, нужно разобраться, как это делается, так как вместо CSS-атрибутов используются собственные подходы.
Пример стилизации, где нужно поменять размер шрифта для всего документа:
Столкнувшись с этими минусами, мы решили перейти на вторую по популярности библиотеку — flutter_widget_from_html_core. Во-первых, она лишена вышеописанных багов. Во-вторых, она модульная, и к ней можно многое прикрутить.
HtmlWidget(‘<p>Hello World</p>’);
Со стилями всё интереснее. Шрифт устанавливается через стандартный TextStyle:
...,
textStyle:
TextStyle(...),
);
Но если нужно его раскрасить или что-то ещё, всё становится сложнее. Продолжение по ссылке.
Это два популярных инструмента для создания анимаций в приложениях на Flutter. Сравнили их плюсы и минусы.
Lottie
Плюсы:
Простота использования: благодаря поддержке JSON, Lottie доступен для разработчиков любого уровня.
Кроссплатформенность: позволяет использовать одни и те же анимации на разных платформах.
Широкое комьюнити: в сети есть большое количество готовых анимаций.
Гибкость: Lottie позволяет настраивать анимацию и эффекты, что дает больше контроля над результатом.
Минусы:
Ограничения по сложности: Lottie не подходит для очень сложных анимаций с большим количеством элементов и эффектов.
Производительность: в некоторых случаях Lottie потребляет слишком много ресурсов, что плохо влияет на производительность приложений.
Rive
Плюсы:
Интерактивность: Rive поддерживает интерактивные анимации, которые реагируют на пользовательские действия.
Мощный редактор: он понятный, функциональный и с ним не нужно погружаться в дебри разработки.
Производительность: с Rive получается быстрая и плавная анимация благодаря формату файлов.
Минусы:
Сложность использования: у Rive более сложный интерфейс, чем у Lottie, новичкам с ним работать трудно.
Размер файлов: Rive-анимации могут быть тяжелыми, и это влияет на вес всего приложения.
Итого: если вам нужны простые и легкие анимации с быстрой интеграцией, Lottie — отличный выбор. Для сложных, интерактивных и высокопроизводительных анимаций лучше подойдет Rive.
Преимущества Rive при разработке Flutter-приложений
При разработке Flutter-приложений используют много типов анимации, о чем мы ранее уже писали. Но Rive всё-таки превосходит большинство из них. Во-первых, у него удобный встроенный UI-интерфейс. Во-вторых, в Rive есть раздел Community, где авторы выкладывают бесплатные анимации.
В-третьих, — и это главное преимущество — в Rive есть State Machine. Это визуальный способ связать анимацию воедино и определить логику, которая управляет переходами. State Machine позволяет создавать интерактивную графику движения, готовую к внедрению в ваш продукт, приложение, игру или веб-сайт.
State Machine включает несколько уровней:
Graph — пространство, в котором мы добавляем состояния и соединяем переходы.
State — анимации временной шкалы, которые могут воспроизводиться в нашей машине состояний.
Transaction — переходы представляют собой логическую карту для State Machine.
Inputs — договор между дизайнерами и разработчиками. Как дизайнеры, мы используем входы как способ управления переходами в нашей машине состояний, назначая их в качестве условий. Разработчики связываются с входами во время выполнения и определяют условия с помощью кода, который может изменить эти входы.
Layers — слой State Machine, который позволяет воспроизводить одну анимацию за раз.
Подробнее о том, как работает Rive и как интегрировать его в проект, в нашем блоге.
WebAssembly (WASM) — это новый способ запуска приложений в браузере. Это не замена JS, а возможность запускать код, написанный на других языках (C++, Rust или C#) вместе с JS. WASM оптимизирует размер и время загрузки и позволяет выполнять его на аппаратном уровне.
Компании, которые имеют дело с графикой (Unity, Figma), используют WASM для повышения скорости работы. Это обеспечивает более плавную работу с интерфейсом за счет снижения зависимости от JS.
Скомпилированное в WASM приложение может улучшить производительность в 2 раза по скорости рендеринга кадров. На видео выше сайт Wonderous, который мигрировал с чистого JS на WASM. Что это значит для Flutter?
А то, что движок Dart компилируется в WASM и обеспечивает более высокую производительность. Это открывает новые перспективы для веб-приложений на Flutter. Можно контролировать каждый пиксель интерфейса на уровне Flutter и наслаждаться производительностью WASM.
Ограничения
- Safari пока не поддерживает WasmGC. Браузеры на iOS, например Chrome, используют WebKit, который пока тоже не поддерживает WasmGC.
- Ни flutter run, ни DevTools не поддерживают WASM в Flutter 3.22. Однако эта функция уже реализована и должна быть доступна в следующем стабильном релизе.
- Пока во Flutter работали над поддержкой WASM, пришлось заменить библиотеки dart:html и package:js. Либы, использующие эти библиотеки, должны мигрировать.
У GetX более низкий порог входа, он проще в освоении, чем BLoC. Он предоставляет простой и понятный API для управления состоянием, маршрутизации и управления зависимостями.
Масштабируемость.
BLoC дает более гибкий и модульный подход к управлению состоянием, и его можно масштабировать на больших и сложных приложениях. BLoC разделяет логику управления состоянием на отдельные блоки, которые легко тестировать. Это облегчает поддержку и обновление кода. Кроме того, в BLoC есть четкое разделение ответственности между слоями приложения, что облегчает масштабирование и улучшает производительность.
Тестирование.
В BLoC есть мощные средства для тестирования потоков событий и состояний, например bloc_test.
Возможности.
GetX предоставляет широкий спектр возможностей для маршрутизации и управления состоянием и зависимостями.
Что же выбрать?
Зависит от конкретных требований проекта и ваших предпочтений. Если приложение небольшое и простое, то GetX может быть более подходящим решением. Он предоставляет понятный API для работы, с ним можно писать меньше кода, что существенно экономит время.
Однако если у вас большое приложение, то лучше выбрать BLoC. С ним вы получите более гибкий и модульный подход к управлению состоянием, а это помогает при масштабировании сложных приложений. Плюс BLoC обеспечит четкую декларативность и читаемость кода.
Это часть статьи Flutter-разработчика Айдара Мавлетбаева — полную версию с кодомищите тут.
Компонентная разработка подразумевает деление мобильного приложения на отдельные компоненты (фичи). За каждый из них отвечает конкретный разработчик — Feature-оунер. Часть времени он посвящает задачам компонента, а часть — технической документации (Roadmap). Feature-оунер также контролирует работу остальных разработчиков, прикрепленных к фиче.
Мы решили перейти на новую методологию на текущем проекте по двум причинам:
У тимлида на проекте было мало времени, его нужно было разгрузить.
Проект смело можно назвать супераппом, он большой. И чтобы новый разработчик полноценно въехал в работу, обычно уходило 3–4 недели. Нам нужно было этот процесс ускорить.
Вот как мы распределили роли:
Методология подходит для больших команд — от 6 разработчиков. Идеально, если часть команды — это стажеры или джуниор-разработчики. В этом случае на позиции Feature-оунеров подходят миддлы, а в их команды можно добавлять стажеров или джунов.
И вот что нам это дало:
Тимлид действительно стал тратить меньше времени на проекте и выполнял только ключевые задачи, что позволило уделить больше времени другим проектам.
Документация проекта оказалась полезной уже в этом проекте. В среднем новый разработчик тратил на 20% времени меньше на ресерч и общение с другими участниками команды, чтобы понять, как работает фича.
На выходе у нас получился полностью задокументированный проект. Даже если мы вернемся к нему через пару лет, мы быстро вспомним, как он реализован, и не будем тратить много времени на ознакомление. А если другая команда начнет с ним работать, для них это не будет темным лесом.
Это короткая версия статьи о компонентной разработке от нашего тимлида Саши Омельяненко — весь текст читайте тут.
Hola, Amigos! На связи Владимир Зевеке, соавтор Flutter. Много. Сегодня поделюсь пакетом screen_brightness, который помогает управлять яркостью экрана. В моём случае, этот виджет понадобился для более эффективной работы barcode.
❗️Screen_brightness работает только на реальных устройствах, на эмуляторе пакет функционировать не будет.
Перейдем к практике: в нашем приложении есть страница, которая должна быть всегда яркой на 70%. Если при переходе на неё экран тусклый, то мы должны поднять яркость до тех самых 70%.
Сделаем это в отдельном методе, который будем вызывать в initState().
Перед изменением уровня яркости экрана, старый показатель мы записали в переменную brightness, чтобы вернуть пользовательские настройки яркости, когда покинем эту страницу.
Интеграция нативных SDK в Flutter-приложение — классный способ использовать функции и возможности, недоступные во Flutter. Для этого используют Platform Channels, которые позволяют Flutter общаться с нативной частью приложения — отправлять и получать сообщения.
Platform Channels — мостики, которые позволяют запускать нативный код из Flutter-приложения. Стандартный декодер обеспечивает эффективную двоичную сериализацию простых значений типа JSON. Сюда относятся логические значения, числа, строки, массивы байт, а также списки и мапы.
Сперва нужно выбрать тип канала в зависимости от потребностей:
MethodChannel: используют в большинстве случаев, когда вызов метода во Flutter запускает нативный метод. Поддерживает асинхронные вызовы методов.
EventChannel: для передачи потоков данных из нативного кода во Flutter.
BasicMessageChannel: для отправки простых сообщений между Flutter и нативным кодом.
Для интеграции нативных SDK чаще всего используют MethodChannel:
Подробнее о том, как как работает интеграция нативных SDK для iOS и для Android и с какими особенности платформ вы можете столкнуться, читайте в нашем переводе.
Как меняется рынок мобильной разработки в 2024 году
Наш Head of Mobile Миша Вассер вместе с другими экспертами мобильной разработки ответил на вопросы Практикума о трендах сферы и прогнозах на этот год. Собрали в этом посте главное.
У iOS-разработки есть будущее
Apple вносит послабления в свои ограничения. Недавно платформаразрешила российским разработчикам принимать платежи вне App Store. Возможно, вскоре iOS-разработчикам вновь станет проще жить.
Flutter — лидер кросс-платформы
В 2023 году доля кросс-платформенной разработкиувеличилась с Flutter во главе. Но нативная разработка всё-таки перевешивает — ее по-прежнему выбирает бигтех и частично средний бизнес.
RuStore набирает ход, а вот российские ОС нет
RuStore приземлила у себя крупные бренды, например Сбер и Альфа-Банк, и развивает собственные инструменты для разработчиков по примеру Google. А вот отечественные операционки затихли. «Аврора» и «РОСА Мобайл» будто сами тормозят развитие внутренними ограничениями.
SwiftUI продолжит набирать популярность
Тренд на SwiftUI у нас пока до конца не оформился, и UIKit всё еще востребован. Но с каждым обновлением SwiftUI становился всё лучше.
Битва Compose и XML
Compose чаще встречается в вакансиях, некоторые компании переходят на него: он удобнее и функциональнее. Но XML пока остается базой.
Ссылку на полный материал оставили выше. А если хотите больше новостей о мобильной разработке, заглядывайте в телеграм-канал Саши Ворожищева, Head of Flutter/iOS.
Изменения в скролле. Тут завезли оптимизацию и гибкость в управление поведением.
Виджет AnimationStyle. Он позволяет юзерам менять стандартное поведение анимации в виджетах. А разработчики с его помощью могут переопределять кривые и продолжительность анимации.
Adaptive Switch. Компонент выглядит и ведет себя как нативный на macOS и iOS, а в других случаях — как Material Design. При этом он не зависит от библиотеки Cupertino, поэтому у него один и тот же API на всех платформах.
Как вы уже заметили, иконку можно отдельно настроить для Web, Windows и MacOS. Рассмотрим ещё другие настройки пакета:
– min_sdk_android (определяет минимальную поддерживаемую версию SDK); – generate (нужно ли переопределять иконку для данной платформы); – image_path (путь до изображения, которое будет иконкой); – image_path_android (путь до изображения, специфичного для платформы android, которое будет иконкой, только для Android); – image_path_ios (путь до изображения, специфичного для платформы ios, которое будет иконкой, только для iOS).
Запускаем пакет командой flutter pub run flutter_launcher_icons.
Присоединяйтесь к нашему телеграм-каналу Flutter. Много, который мы ведем с командой мобильных разработчиков. Там мы делимся своим опытом и полезными советами)
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga и соавтор телеграм-канала Flutter.Много. Сегодня расскажу, как сделать свой splash screen с помощью пакета flutter_native_splash.
Настроим pubspec.yaml. Добавим основную зависимость flutter_native_splash: ^2.3.10, плюс в конце файла укажем детальные настройки нашего сплеша.
Тестирование Flutter-приложений в базовых принципах не сильно отличается от тестирования нативных. Но есть несколько интересных особенностей:
Все элементы Flutter-приложения — виджеты: это упрощает тестирование интерфейса и функциональности, обеспечивает единообразие интерфейса.
Тестирование на Flutter быстрее: платформенно-специфические функции тестируются отдельно на iOS и на Android, а остальные — на какой-то одной.
Flutter предоставляет собственные инструменты для тестирования виджетов и интеграционного тестирования.
Есть и сложности:
Отслеживание трафика: Dart обычно использует высокоуровневые библиотеки для HTTP-запросов, и они инкапсулируют низкоуровневые детали сетевого взаимодействия — это затрудняет доступ или мониторинг данных.
Проблема решается подключением прокси-сервера. Лучше всего добавить этот функционал в инженерную панель.
При тестировании различий UI/UX на разных платформах мы замечаем типичные проблемы: анимация, свайпы и отображение системных диалоговых окон.
Поэтому не стоит фокусироваться на всех кнопках. Лучше обращать внимание только на существенные различия. Тут помогает общение с сообществом.
Чтобы работать с Flutter-приложениями, мы используем FlutterDevTools. Это комплект инструментов для отладки и профилирования в экосистеме Flutter. Также применяем голден тесты, а для автоматизации — Appium. Подробнее про это рассказываем в отдельной статье, а про Flutter — в телеграм-канале.
Советы от Team Lead для подготовки к первому собеседованию
Hola, Amigos! На связи Сережа Климович, Mobile Team Lead Amiga и соавтора Flutter. Много. Начну с того, что у начинающих мобильных разработчиков есть несколько грейдов: «стажер», «junior» и «junior+». В зависимости от скиллов будут меняться требования к сотруднику и условия сотрудничества. Оценивайте свои знания и умения трезво, не стыдно чего-то не знать.
Что должен знать даже стажер?
– Минимально в Dart: типы данных и переменные, функции, классы, Control flow statement, примитивные структуры, литералы, print, понимание null safety. – В Flutter: runApp, MaterialApp, Scaffold, Align, Container, Flex, Expanded, Spacer, ListView, Text, простая навигация между двумя экранами, разница между Stateless и Stateful виджетами. – Уметь устанавливать и настраивать IDE, dart и flutter для разработки. Понимать суть работы удаленных репозиториев Git (GitHub / GitLab).
Junior должен знать всё, о чем я написал выше. Плюс:
– Иметь практический опыт основ объектно-ориентированного и асинхронного программирования. – Понимать механизм управления локальным состоянием. Знание виджетов для верстки экранов, способов взаимодействия с пользователем (кнопки, жесты и т.п.). – Базовое управление проектами. Обязательно: Pub и pub.dev, pubspec.yaml. – Уметь взаимодействовать с git через IDE. – Понимать HTTP запросы, например get/post. – Знать форматы запросов и ответов, например JSON и пакет json_serializable.
Мнение: почему мультиплатформа Kotlin не приживется в мире разработки
Спойлер: из-за нелюбви к изменениям и дефицита специалистов.
Наш руководитель направления Flutter и iOS Саша Ворожищев делится основными тезисами статьи о судьбе Kotlin Multiplatform Mobile (KMM). Автор статьи — разработчик Донн Фелкер (Donn Felker) — не пророчит KMM мировой славы. И вот почему.
Люди не любят что-то менять. Особенно программисты. Редко встретишь iOS-разработчика, который перешел на Android. И наоборот.
Кросс-платформа чаще не оправдывает надежд. Мы уже не раз наблюдали попытки создать кросс-платформенные суперхиты — взять к примеру Flash и ActionScript, Mono и Xamarin, — но ни одна из этих технологий так и не покорила мир программирования.
Сейчас конкуренцию КММ может составить только Flutter. Пока это лучшее кросс-платформенное решение.
Охота на единорога. Чтобы стать классным кросс-платформенным разработчиком, нужно разбираться не в одном, а сразу в нескольких языках и инструментах. Между тем, хороших программистов-полиглотов мало и они стоят дорого. Еще они часто выгорают, ведь технологии развиваются слишком быстро, а успеть сразу за всеми очень сложно.
Универсальность != эффективность. Здесь стоит повторить, как важно подбирать правильные инструменты для решения конкретных задач. Мультиплатформа не может быть панацеей для всех проблем.