FlutterFlow.io🔢

Hola, Amigos! С вами Саша Чаплыгин, Flutter-dev Amiga. Расскажу вам о новой возможности Flutter — FlutterFlow.

FlutterFlow — это no-code конструктор, созданный для ускорения разработки кроссплатформенных приложений, а именно iOS и Android.

Безусловно, у него есть свои плюсы. За счет готовых шаблонов можно быстро и легко сделать приложение интернет-магазина или какую-нибудь фриланс-биржу. Все это идеально подходит для недолгосрочных проектов, но на длинной дистанции приводит к усложнению поддержки проекта из-за ограниченности функционала самого конструктора.

Например, для добавления кастомной анимации в проект все равно потребуется Flutter-разработчик, чтобы вставить кусок кода внутрь конструктора. Или же нужно добавить в приложение кастомные карты, камеру, прикрутить ML-библиотеку для обработки каких-либо данных. Все это конструктор даже не даст сделать.

Подключение желаемых библиотек также дает преимущество самому Flutter, так как FlutterFlow ограничен определенными библиотеками и вы не сможете добавить другие. Например, на FlutterFlow можно использовать библиотеки url_launcher, page_transition или intl, в то время как использование других аналогичных библиотек на pub.dev – невозможно.

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

Обзор используемых библиотек (которые принимают участие непосредственно в компиляции проекта – dependencies)

Hola, Amigos! С вами Саша Чаплыгин, Flutter-dev Amiga. Сегодня хочу поделится 3 самыми используемыми в Amiga библиотеками для компиляции проекта. Поехали!

1. Dio
Dio — это классный инструмент для работы с сетью. По сравнению с использованием обычной библиотеки http, у Dio есть большое преимущество — данный http-клиент поддерживает:

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

2. Flutter_bloc
Flutter_bloc — это библиотека управлением состояний приложения и обработки бизнес-логики самого приложения. Важно сказать, что мы придерживаемся технологии чистой архитектуры приложений, это помогает в поддержки проектов любой сложности. У Flutter_bloc есть множество аналогов, но этот выбрали из-за его простоты и легкости управления состоянием приложения.

С релизом 8 версии больше не надо писать длинный код в mapEventToState, как это было в 7-ой версии. Теперь для каждого event’a пишется своя функция, в которой происходит обработка данных и прокидывается нужное состояние.

3. Flutter_svg
Удобная библиотека для обработки svg-изображений. Без нее не обходится любое приложение на Flutter, так как векторная графика всегда в разы легче png и jpg-изображений, и при этом качественнее отрисовывается на экране.

Рассказывайте в комментах, какие библиотеки вы вообще используете? Круто будет обменяться опытом.

Особенности Git

Hola, Amigos! С вами Саша Чаплыгин, Flutter-dev Amiga. В наших постах мы нередко упоминаем Git, поэтому сегодня захотелось остановится на нем чуть подробнее.

Что такое Git?

Git — это бесплатная распределенная система управления версиями с открытым исходным кодом, предназначенная для быстрой и эффективной разработки любых проектов.

Git легко освоить, он занимает мало места и обладает молниеносной производительностью. Эта система управления версиями является самым популярным инструментом среди разработчиков. В Git все строится вокруг коммитов и веток. Коммит — фиксация изменений в текущей ветке с определенным сообщением и уникальным хэшем. Ветка — текущая версия всего проекта. Веток может быть сколько угодно — от 1 (проекты без GitFlow или же собственные экспериментальные проекты) до бесконечности.

Git позволяет и поощряет наличие нескольких локальных веток, которые могут быть полностью независимыми друг от друга. Создание, слияние и удаление этих веток занимает секунды. Кроме того, современная разработка давно отошла от использования Git через командную строку. В популярных IDE Git встроен в оболочку, что позволяет пользоваться Git еще проще и удобнее.

Самые распространенные команды Git

При работе с Git разработчики сталкиваются с определенной, повторяющейся последовательностью действий. Оно и понятно, ведь, по сути, если не брать в расчет все возможности Git, включая всякие разные плюшки, то как правило ваша работа ограничена рядом действий:

• Внести изменения в проект;
• Добавить изменения в индекс (staging area) — git add (таким образом вы сообщаете Git какие именно изменения должны быть занесены в историю);
• Закоммитить изменения — git commit (сохранить изменения в историю проекта, прикрепляем осмысленное сообщение — что сделано в течение этих изменений в двух словах);
• Запушить — git push (отправить результаты работы на удаленный сервер, чтобы другие разработчики тоже имели к ним доступ).

В IDE IntelliJ IDEA или же в VS Code можно установить соответствующие плагины Git. Эти среды разработки позволяют легко создавать или удалять ветки, сливать ветки между собой, а также в данных IDE легко отменять изменения, коммитить с помощью обычных кнопок. А с помощью плагинов Git вы можете просматривать историю коммитов, слияний веток, откатываться до нужных изменений.

Hola, Amigos!

Сегодня вышел подкаст с участием Антона Мартышкова, Flutter-dev Amiga. В подкасте Junior-уровень Антон рассказал:

- Что такое Flutter и для чего он нужен?
- Должен ли Flutter-разработчик понимать фронтенд и бэкенд?
- Как совмещать работу и выпуск контента для телеграм-канала?
И многое другое.

Послушать подкаст можно по ссылке.

Кто послушал, расскажите, как вам? Будет классно получить обратную связь, для Антона это первый опыт записи подкаста☺️

Dart: асинхронность и многопоточность

Hola, Amigos! На связи Антон Мартышков, Flutter-разработчик Amiga. Сегодня я расскажу о возможностях в языке Dart, которые мы используем для написания кроссплатформенных приложений на Flutter.

Эта небольшая заметка о том как, работает асинхронность и как можно выполнить код в другом потоке (изоляте). Внутренние механизмы не раскрывались специально, так как тогда получится большая статья, а оно нам тут не надо. Для этого есть Habr.

Потоки

Язык Dart однопоточный и исполняет только одну инструкцию. Но есть изолят — это аналогия привычного нам потока, но есть одно отличие — изоляты не разделяют память. Изначально приложение работает только в одном изоляте. Но с ростом приложения вы заметите, как пользовательский интерфейс и анимации начнут притормаживать, так как отрисовка происходит в главном потоке. Значит где-то в коде выполняется длительная операция, которая блокирует отрисовку, пока операция не завершится.

Для этого мы создадим новый изолят и поручим ему выполнять длительную операцию. Тогда наш главный поток сможет заниматься интерфейсом.

Общаются изоляты через порты и не знают друг о друге ничего (поэтому и зовутся изолятами). Работаю эти порты со списками и коллекциями из примитивов. И конечно же не забывайте очищать память, удаляя изолят когда он уже не нужен, если не создавали его через метод compute().

Асинхронность

Асинхронность — концепция программирования, когда результат функции помеченной как async будет возвращен не сразу. Код следующий за вызовом этой функции может продолжать свою работу или ожидать ее завершения, если перед ней было специально слово await. Асинхронный метод выполнится синхронно, но тогда, когда некий внутренний механизм (Event Loop) возьмет его в работу, чтобы не навредить другим операциям.

Подытожу:

- используйте асинхронность для небольших задач — десятки миллисекунд, пример — поиск элемента в большом массиве.
- используйте изоляты для задач в несколько сотен миллисекунд и более, пример — десериализация большого json в несколько тысяч строк.

P.S. Подробнее об асинхронности и многопоточности можно почитать тут.

Dart 2.18

Hola, Amigos! С вами Антон Мартышков, Flutter-dev Amiga.

Последние обновления Dart 2.18 вышли 30 августа 2022, и мы решили своевременно (😅) рассказать об изменениях Dart. Приступим!

1. Теперь можно использовать Dart-пакеты для вызова из Objective-C и Swift через ffigen. Dart-пакет — это набор классов выполняющих один функционал. Например, пакет работы с сетью.

2. Исправлены распространненые ошибки с типами при работе с dynamic, переприсвоении списков, коллекций и тд. Полный список с примерами здесь.

3. Dart2js и Dartdevc инструменты удалены, но Dart2js заменяется командой dart compiled js. Dart2js — это пакет работы с сетью команды для перевода кода на dart в js, dartdevc тоже нужен для конвертации dart в js, но в браузере.

4. Обновлена страница, на которой можно познакомиться с главными фичами и библиотекам Dart.

5. Добавили раздел по команде — Dart fix. Dart fix команда используется для исправлений анализатора кода и устаревшего API.

6. Cupertino_http для iOS и MacOs базируется на нативном интерфейсе NSURLSession, что позволяет работать с сетью привычно для iOS-разработчиков.

7. Улучшили производительность async методов. Async — это оператор, который показывает, что отмеченный метод выполняется асинхронно.

Hola, Amigos!

Выпустили подробный гайд с полезными материалами по изучениею Flutter и Dart. В нем собрали обучающие YouTube-каналы, телеграм-каналы, книги и еще парочку полезных ссылок.

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

Работа с сокетами Dart

Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev Amiga. Сегодня расскажу о том, что такое сокеты, как работать с ними в Dart и дам полезные материалы для изучения сокетов.

Сокеты — это средство двусторонней связи по сети. Это похоже на HTTP-связь, но вместо того, чтобы сделать один запрос и получить один ответ, вы оставляете канал открытым для дальнейшего общения. У этого есть применение в приложениях с чатом внутри, или внешней базой данных и других приложениях для обмена сообщениями в реальном времени.

Сокеты используют для двух вещей: для передачи данных по сети или для связи между приложениями. Сокет-сервер может прослушивать и получать сообщения от нескольких клиентов. Затем сервер может транслировать сообщения всем подключенным клиентам или принимать сообщение от одного клиента и переслать его другому.

В Dart вы создаете сокет-клиент, используя Socket класс, и сокет-сервер, используя SocketServer класс.

Еще примечания

1. Сокет — это просто поток. Если вы хотите отправлять байты, а не строковые данные, вы можете вызвать socket.add вместо socket.write.

2. Future.delayed было сделано для того, чтобы содержимое отображалось в удобочитаемом виде. Одновременная отправка большого количества сообщений на сервер также, по-видимому, помещает их все в один и тот же фрагмент данных в потоке.

Полезные ссылки

1. Для написания этого поста я опирался на эту статью, внутри подобрый туториал, как сделать сокет-сервер и сокет-клиент.
2. Документация сокет-класс.
3. Статья о том, как поддерживать открытое соединение между клиентом и сервером для реализации приложения реального времени с помощью Dart-сокетов.

Flutter fix или быстрые исправления, часть 1.

Hola, Amigos! С вами Антон Мартышков, Flutter-dev Amiga. Рассказываю о том, что такое flutter fix и как решать самые распространенные проблемы Flutter.

Flutter fix — это решение или обходной путь для решения проблемы, с которой вы можете столкнуться при использовании Flutter. Flutter — мощный инструмент, но, как и любое программное обеспечение, он не лишен ошибок и других проблем.

Какие проблемы бывают?

1. Проблема «белого экрана» — приложение зависает на белом экране при запуске. Это может быть вызвано множеством проблем, включая проблемы с самой инфраструктурой Flutter или проблемы с кодом приложения.

Как решить проблему:

— запустить приложение в режиме «отладки» с помощью команды «flutter run» с флагом «--debug». Это предоставит более подробную информацию о любых ошибках, которые могут возникнуть, и поможет определить причину проблемы.

— очистить кеш приложения командой «flutter clean». Это удалит все временные файлы или данные кэша, которые могут вызывать проблемы с приложением.

2. Dependency issues — это проблемы с зависимостями или библиотеками. Такая проблема может всплыть, если библиотека или зависимость несовместимы с используемой версией Flutter или когда существует конфликт между различными зависимостями.

Как решить проблему:

— запустить команду «flutter pub upgrade --major-versions». Если версии конфликтуют, будет показано: какие библиотеки можно обновить; варианты, при которых версии не будут конфликтовать, но и будут обновлены.

— обновить или изменить используемую версию Flutter.

— попробовать изменить зависимости в файле pubspec.yaml.

— запустить команду «flutter clean» , чтобы удалить все временные файлы или данные кэша, которые могут вызывать проблемы с приложением.

Если эти решения не работают, вам может потребоваться рассмотреть возможность использования в проекте других зависимостей или библиотек.

В следующем посте расскажу о еще 3 часто встречающихся проблемах во Flutter и о том, как их решить.

Flutter fix или быстрые исправления, часть 2.

Hola, Amigos! С вами Антон Мартышков, Flutter-dev Amiga. В этом посте я продолжу рассказывать о Flutter fix и освещу еще 3 решения, которые могут оказаться полезными в работе с фреймворком Flutter.

1. Не работает hot reload.

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

Почему это происходит?

— Hot reload может прерваться, когда приложение убито. Например, если приложение слишком долго находилось в фоновом режиме.

— Когда изменение кода приводит к ошибке компиляции, hot reload генерирует сообщение об ошибке.

— Hot reload не работает, когда перечисляемые типы заменяются на обычные классы или обычные классы заменяются на перечисляемые типы.

— Hot reload не будет работать при изменении объявлений универсального типа.

Как решить проблему?

Если все вышеперечисленное не относится к вашей проблеме, попробуйте сделать это:

— Убедитесь, что у вас установлена последняя версия Flutter и расширение Flutter для вашего редактора кода.

— Закройте и снова откройте эмулятор или физическое устройство, чтобы сбросить состояние приложения.

— Если вы используете сторонние зависимости, убедитесь, что они совместимы с используемой вами версией Flutter.

— Убедитесь, что вы запускаете приложение в режиме «отладки».

Я описал основные проблемы и их решения, здесь можно подробнее почитать о hot reload.

2. Ошибка Flutter: не удалось определить зависимости задачи ':app:compileDebugJavaWithJavac'.

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

Как решить проблему?

— Запустите команду «flutter clean», чтобы удалить все временные файлы или данные кеша, которые могут вызывать проблемы.

— Проверьте файл build.gradle вашего приложения на наличие проблем или ошибок.

— Если вы используете сторонние зависимости, убедитесь, что они совместимы с используемой вами версией Flutter.

3. Ошибка Flutter: NoSuchMethodError.

Эта ошибка может возникнуть, когда вызываешь «length» на объекте null в коде вашего приложения.

Как решить проблему?

— убедитесь, что вы проверяете нулевые значения прежде попыток получить доступ к свойствам или методам объекта. Используйте «if» или «??» для проверки нулевых значений и предоставления значения по умолчанию, если объект имеет значение null.

В целом, устранение проблем с Flutter требует тщательного внимания и опыта. Выполнив шаги, описанные выше, вы сможете решить большинство проблем и обеспечить бесперебойную работу приложения Flutter.

Hola, Amigos!

Всей командой компании Amiga мы поздравляем вас с наступающим Новым Годом🎊

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

Нас ждет классный год, полный новых вызовов и достижений! Желаем вам интересных проектов, нетривиальных задач, меньше багов в коде и крутую команду, которая всегда подскажет и поможет!

Счастья, здоровья и удачи в Новом 2023 году🎄

Flutter и каналы общения с нативом

Hola, Amigos, и с первым рабочим! На связи Антон Мартышков, Flutter-dev Amiga. Сегодня расскажу о 3 механизмах для связи между вашим кодом Dart и кодом платформы.

Бывает, что при создании приложения нужного плагина нет. Например, если это что-то специфичное, типа КриптоПро. И в таком случае выход будет один — реализовывать решение нативно и пробрасывать вызовы с Flutter в натив и обратно. Кроме известного MethodChannel еще существуют MessageChannel и EventChannel, и сегодня мы вкратце рассмотрим их.

MethodChannel — его знают все, кто хоть раз пытался настроить общение с нативом. Позволяет вызвать метод в нативной части и/или Dart, так же можно передавать параметры для метода и вернуть результат, если требуется.

EventChannel — поток событий из нативной части, на который можно подписаться, обратного варианта для получения потока в нативной части пока что нет.

MessageChannel — двустороняя связь Dart с нативом, настраивается под конкретный, примитивный тип данных, которым и будет вестись «общение», делается это установлением кодека для MassageChannel.

Варианты кодеков:
- StringCodec — кодирует строки с помощью utf-8.
- BinaryCodec — общение байтами, удобно, когда не нужно кодирование/декодирование данных.
- JSONMessageCodec — во время кодирования значения преобразуются в строки json, а затем в байты с использованием utf-8.
- StandardMessageCodec — стандартный кодек для канала связи во Flutter. По значениям расширяет JSONMessageCodec, добавляя возможность передавать uint8list и подобные, а так же map с не строковыми ключами. Возврат ответа обязательно.

Еще подробнее про каналы общения между платформами можно почитать здесь.

Hola, Amigos!

Сегодня пишем не о Flutter, а помогаем отделу Back-end Amiga. У нас расширяется Laravel-команда, поэтому ищем Teamlead и Middle-разработчика. Важны опыт на предыдущих проектах, знание PHP и Laravel и желание развиваться.

Работать можно удаленно или гибридно с посещением офиса в центре Москвы, оформление полностью белое, интересные проекты гарантированы.

Узнать больше и оставить отклик на Teamlead тут, а на Middle тут.

Flutter Forward

Hola, Amigos!

25 января c 17:30 пройдет онлайн-ивент Flutter Forward от разработчиков фреймворка Flutter. Рекомендуем зарегистрироваться и посмотреть прямую трансляцию из Найроби, Кения (это бесплатно).

Что будет на ивенте?

1. Основной доклад
Разработчики покажут, над чем работали в 2022 году, и расскажут, как ускорить разработку пользовательского интерфейса.

2. #AskFlutter в прямом эфире
На сессии вопросов-ответов можно задавать свои вопросы.

3. Технические доклады
Организаторы обещают позвать крутых спецов, чтобы на конкретных примерах рассказать о том, что может Flutter.

На сайте мероприятия есть интересный интерактив 17 days of flutter, марафон контента о Flutter с любопытными статьями, видеоуроками и заданиями.

Полезные мысли из книги Роберта Мартина «Идеальный программист»

Hola, Amigos! На связи Антон Мартышков, Flutter-dev Amiga. Для меня важной составляющей профессии является самообучение, нужно постоянно расти и отрабатывать полученную теорию на практике, развиваться не только технически, но и софтово. Программирование — это марафон, где нужно регулярно развиваться, что бы не сойти с дистанции.

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

⁃ Каждая написанная вами строка кода должна быть протестирована. Точка.

⁃ Преданность делу и профессионализм проявляются в дисциплине, а не в продолжительности работы.

⁃ Каждый раз при работе с модулем следует понемногу совершенствовать его структуру. Каждое чтение кода должно приводить к доработке структуры. Эта идеология иногда называется безжалостным рефакторингом. Я называю этот принцип «правилом бойскаута»: всегда оставляйте модуль чище, чем до вашего прихода.

⁃ Запланируйте 60 рабочих часов в неделю. Первые 40 вы работаете на своего работодателя, а остальные 20 на себя. В эти 20 часов вы читаете книги, практикуетесь, учитесь и иным образом развиваете свою карьеру.

⁃ Настоящий профессионал знает, что добавление функциональности в ущерб структуре – последнее дело. Структура кода обеспечивает его гибкость. Нарушая структуру, вы разрушаете будущее кода.

⁃ Если вы хорошо знаете, что сделать страницу к завтрашнему дню невозможно, то отвечая: «Хорошо, я попытаюсь», вы не выполняете свою работу. Выполнить ее в этот момент можно только одним способом: сказать: «Нет, это невозможно».

⁃ Самый лучший способ чему-то научиться – учить других. Факты запоминаются быстрее всего тогда, когда вы должны их сообщить другим людям, за которых вы отвечаете.

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

Hola, Amigos!

Коллеги из AGIMA написали об обновлениях Flutter 3.7.0. В посте много ссылок для собственного изучения, все как мы любим.

Всем привет! Я Саша Ворожищев, Flutter Teamlead в AGIMA. Поэтому не могу пропустить эту новость: вышел Flutter 3.7.0. Постараюсь коротко рассказать, что в нем нового.

1. Поддержка Material 3.

Потыкать можно тут: https://flutter-experimental-m3-demo.web.app/#/.

2. Поддержка верхнего и каскадного меню для десктопных версий приложения.

https://api.flutter.dev/flutter/widgets/PlatformMenuBar-class.html.

3. Кастомизированное контекстное меню.

https://master-api.flutter.dev/flutter/cupertino/CupertinoTextField/contextMenuBuilder.html.

4. Новые виджеты CupertinoListSection и CupertinoListTile: отображения списка виджетов в стиле iOS.

https://api.flutter.dev/flutter/cupertino/CupertinoListSection-class.html

https://api.flutter.dev/flutter/cupertino/CupertinoListTile-class.html

5. Улучшение физики прокрутки и работы со списками. Также добавили новые виджеты: Scrollbars, DraggableScrollableSheet, AnimatedGrid и SliverAnimatedGrid.

https://api.flutter.dev/flutter/material/Scrollbar-class.html

https://api.flutter.dev/flutter/widgets/DraggableScrollableSheet-class.html

https://api.flutter.dev/flutter/widgets/AnimatedGrid-class.html

https://api.flutter.dev/flutter/widgets/SliverAnimatedGrid-class.html

6. Улучшение инструментов локализации. Был полностью переписан gen-l10n. Добавили работу с формами множественного числа.

https://docs.flutter.dev/development/accessibility-and-localization/internationalization

7. Замена движка Skia на Impeller. Почти. Новый движок обещает быть более быстрым и производительным при компиляции под iOS. Почему «почти»? Доступен он пока только на ветке Stage.

Подробнее:
https://github.com/flutter/flutter/wiki/Impeller

8. Проверка выпуска iOS. При выпуске приложения под iOS, при выполнении команды flutter build ipa будет проверка контрольного списка параметров. Это гарантирует, что приложение готово к отправке в AppStore.

9. Обновления инструментов разработчика. Новые функции включают в себя возможность анализировать текущую выделенную память для приложения с разбиением по классам и частям кода во время выполнения.

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

Подробнее:
https://docs.flutter.dev/development/tools/devtools/memory

10. Работа с изолятами. Теперь Platform Channels можно вызывать из любого изолята. Ранее это можно было сделать только из основного потока.

11. Отключена поддержка Bitcode в iOS.

На самом деле изменений достаточно много, ознакомиться со всеми можно по ссылке ниже:

https://docs.flutter.dev/development/tools/sdk/release-notes/release-notes-3.7.0

Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev Amiga.

Перевели и опубликовали новый материал на Habr — 12 методик, которые помогут создавать приложения на Flutter легко и просто. Я сам теперь применяю советы из нее в разработке. Будет полезно почитать разработчикам всех мастей, эта информация будет полезной для решения повседневных рабочих задач.