Flutter. Много

Hola, Amigos! Меня зовут Ярослав Цемко, Flutter dev Amiga. Расскажу вам сегодня свою историю о том, как пришёл во Flutter, и почему выбрал именно его.

Однажды я столкнулся с задачей: сделать простое кроссплатформенное приложение для оценки стоимости доставки перевозки металла из одного населённого пункта в другой.

По универу от одногруппников я слышал, что есть React Native и Flutter. Изучив несколько статей и youtube про каждый из этих фреймворков, понял, что Flutter выигрывает. Dart — очень классный язык, а Flutter позволяет писать крутые приложения довольно быстро и гибко сразу для разных платформ. Иначе бы пришлось разрабатывать и сопровождать зоопарк фреймворков и языков, как уже было в моей практике. И это вообще не весело🥲

Раньше я занимался Oracle и ETL, потом Full-stack на Python, PHP, Angular, Java. Но всегда тяготел к Java, особенно мне понравился фреймворк spring-boot для бэка. В итоге мне удалось поработать бэкендером, но т.к. мобильные приложения куда более осязаемы, я решил полностью уйти на Flutter.

Учился и продолжаю развиваться самостоятельно. Могу посоветовать видосы на youtube (https://www.youtube.com/@LearnDartFlutter и
https://api.flutter.dev), статьи на Habr и Medium, ну и конечно же stackoverflow.com Полезного было много!

Flutter я занимаюсь 2,5 года. Часто сталкиваюсь с тем, что сильно углубляюсь в решение задачи, а оказывается оно лежит на поверхности🫠

Всем начинающим разработчикам могу пожелать только терпения и усидчивости!

Давайте проверим, сколько у нас здесь новичков и продвинутых пользователей? Ставьте 🤓, если вы только пришли во Flutter и изучаете его меньше года. И ставьте 😎, если вы во Flutter больше года.

Если есть вопросы, жду в чате.

Обзор пакета share_plus

Hola, Amigos! Сегодня рассмотрим полезный пакет share_plus, предоставляющий простой способ реализации функции обмена контентом (шаринга) в вашем приложении. Этот пакет не только обеспечивает доступ к стандартным диалогам обмена контентом на устройстве, но также позволяет настроить его.

Преимущества share_plus:
1️⃣ Простая и быстрая интеграция share_plus в приложение.
2️⃣ Поддержка различных типов контента: текст, изображения, файлы.
3️⃣ Кросс-платформенность.

Рассмотрим основной функционал пакета.

Для шеринга текста необходимо вызвать статический метод:

Share.share('check out my website https://example.com');

Если вам необходима тема в Email, добавьте опциональный параметр subject:

Share.share('check out my website https://example.com', subject: 'Look what I made!');

Вы можете отслеживать, сделал ли пользователь действие или просто закрыл окно.

Будьте внимательны, когда пользователь нажал на иконку приложения, в которое будут шарится данные, ShareResultStatus придет success.

final result = await Share.shareWithResult('check out my website https://example.com');
if (result.status == ShareResultStatus.success) {
    print('Thank you for sharing my website!');
}

Чтобы поделиться одним или несколькими файлами, вызовите статический shareXFiles.

final result = await Share.shareXFiles([XFile('${directory.path}/image.jpg')], text: 'Great picture');
if (result.status == ShareResultStatus.success) {
    print('Thank you for sharing the picture!');
}

У пакета есть ограничения в использовании, о которых мы рассказали в чате. Переходите, чтобы посмотреть и пишите был ли у вас опыт реализации подобного функционала? 🦋

Развёртывание Flutter web

Hola, Amigos! Сегодня мы обсудим процесс развертывания Flutter-приложения в изолированном окружении без необходимости настройки полноценного сервиса для веба на сервере ⚙️

С помощью docker контейнера вы можете создать и легко развернуть большинство сервисов, в том числе и Flutter web.

Для начала нам потребуется сам код и docker, установленный на вашем компьютере.

Создаём папку, где будут хранится файлы для компиляции и развёртывания. Переносим туда папку с Flutter проектом. В ней создаём файл Dockerfile, в котором будет обрабатываться последовательность сборки и компиляции проекта.

# Выбираем образ debian для сборки
FROM debian:latest AS build-env

#Загружаем необходимые зависимости для загрузки и работы flutter sdk
RUN apt-get update
RUN apt-get install -y curl git wget unzip libgconf-2-4 gdb libstdc++6 libglu1-mesa fonts-droid-fallback lib32stdc++6 python3 sed
RUN apt-get clean

RUN git clone https://github.com/flutter/flutter.git /usr/local/flutter 

ENV PATH="${PATH}:/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin"

#Запускаем и обновляем flutter
RUN flutter doctor -v
RUN flutter channel master
RUN flutter upgrade

#Создаем папки для дальнейшей работы
RUN mkdir /app/
COPY ./web-app/. /app/
WORKDIR /app/

#Запускаем компиляцию
RUN flutter build web

#Берем образ с nginx
FROM nginx:alpine
#Копируем скомпилированное flutter web приложение в контейнер с nginx
COPY --from=build-env /app/build/web /usr/share/nginx/html

В строчке «COPY ./web-app/. /app/» заменяем «./web-app/» на папку, в которой находится ваш Flutter проект.

В этой же папке создаём файл docker-compose.yml. Можно обойтись и без него, однако удобнее работать с контейнерами, когда все команды в Dockerfile, а остальные — в docker-compose. Пишем:

version: '3'
services:
 nginx:
   # Наименование контейнера
   container_name: 'nginx-webserver-example'
   # Путь к Dockerfile
   build: ./
   # Открытие портов из контейнера 80 для http и 443 для ssl и https
   ports:
     - '80:80'
     - '443:443'

Выполните docker compose up и наслаждайтесь результатом по адресу localhost ⚙️

Пример проекта доступен по ссылке. Ставьте реакцию, если было полезно!

Hola, Amigos! Перехватываю эстафету и продолжаю рубрику знакомства. Меня зовут Сергей Климович, я Flutter Team Lead и разработчик.

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

Смотрел: Алексей Скуторенко, Константин Кокорин, Lazyload.

Сейчас регулярно читаю medium, vc и habr. А также смотрю онлайн-трансляции конференций WWDC, Google I/O и Flutter Forward.

С 2011 начал пользоваться техникой Apple и я настолько проникся экосистемой, что уже через пару лет начал писать на новеньком свеже выпущенном Swift. Учился на курсах в «Высшей школе экономики» под эгидой Apple. Они пытались запустить академическую программу «iOS Developer University program».

Позже познакомился со SwiftUI и декларативным подходом, после которого абсолютно не хотелось смотреть в сторону Constraints. Далее понадобилось сделать mvp для двух платформ и естественным выбором стал Dart+Flutter. Так с одной птички я перешел на другую 🦋

По своему опыту приходилось сталкивать с различными кроссплатформенными решениями и то комьюнити, которое сформировалось во Flutter, способно на многое.

В свободное время развиваю образование — повышаю качество подготовки специалистов в вузах, колледжах, школах и учреждениях доп. образования России. Популяризирую направление «Разработка мобильных приложений».

Желаю вам успешного профессионального роста! Не опускайте руки, а если есть трудности, приходите к нам в чат ⚙️

Интеграция Flutter в Native iOS (Часть 3)

Hola, Amigos! На связи Саша Чаплыгин, Flutter dev Amiga. Подоспела последняя часть статьи про использование «Hot Reload», «Hot Restart» и тестирование на Codemagic.

Для тех, кто всё пропустил, рассказываю! Недавно мне попалась интересная статья на Medium о том, как добавить Flutter в новый или существующий проект Native iOS и протестировать его на Codemagic. Перевод пришлось разделить на 3 части для лучшего восприятия.

Тут 1 часть. Она посвящена созданию приложения на iOS и интеграции Flutter в это приложение.

Тут 2 часть. Она про реализацию экрана Flutter в приложение для iOS и использование platform channel для отправки данных из натива во Flutter.

Тут 3 часть. The end!

Желаю приятного чтения! Пишите комментарии и ставьте стрелочку вверх ⬆️ на Habr, если было интересно.

Заметки мобильного разработчика

Hola, Amigos! Сегодня хотим с вами поделиться небольшим лайфхаком, как проскролить список к добавленному элементу после того, как мы добавили новый элемент в этот список.

Код ниже проскролит список лишь к предпоследнему элементу:

IconButton(
icon: const Icon(Icons.send),
onPressed: () {
setState(() {
list.add('new text');
controller.clear();
});
scrollController.jumpTo(scrollController.position.maxScrollExtent);
},
);

Есть два пути решения:

⚙️ Режим джуна — добавить задержку между setState и scrollController. Но за такой «костыль» вас не похвалят😅
⚙️ Подход продвинутого программиста — использовать объект WidgetBinding:

IconButton(
icon: const Icon(Icons.send),
onPressed: () {
setState(() {
list.add('new text');
controller.clear();
});

WidgetsBinding.instance.addPostFrameCallback(
(_) =>
scrollController.jumpTo(scrollController.position.maxScrollExtent));

},
);

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

Хорошего всем кода! Делитесь своим опытом и лайфхаками в чате 🦋

Интеграция Flutter в Native iOS (Часть 2)

Hola, Amigos! На связи Саша Чаплыгин, Flutter dev Amiga. Продолжаю делиться с вами перевод статьи о том, как добавить Flutter в новый или существующий проект Native iOS. Ловите вторую часть, в которой будет идти речь про реализацию экрана Flutter в приложение для iOS и использование platform channel.

Кто пропустил первый выпуск о создании приложения на iOS и интеграцию Flutter в это приложение, то читайте на Habr.

Ставьте реакции, если было интересно и ждете завершающую часть этой трилогии! ⚙️

Обзор пакета auto_size_text

Hola, Amigos! Сегодня разберём простой, но очень #пп auto_size_text, который облегчает работу с текстом. Пакет добавляет виджет AutoSizeText, который автоматически меняет размер текста, чтобы он точно уместился в заданные рамки (поле maxLines).

В сравнении с обычным Text, у AutoSizeText мы не найдем такие поля, как selectionColor, textHeightBehavior и textWidthBasis. Однако мы получаем новые возможности:

1️⃣ textKey ([тип: Key]) — устанавливает ключ для результирующего виджета Text, что полезно для поиска созданного Text через AutoSizeText.
2️⃣ wrapWords ([тип: bool]) — определяет, следует ли переносить слова, не умещающиеся в одной строке. Если false, размер шрифта уменьшается до тех пор, пока все слова не уместятся в одну строку.
3️⃣ продолжение в карусели.

А вы используете auto_size_text? Делитесь в чате своим опытом.

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

Я сразу активно начал искать работу и советовал бы всем так делать, потому что реальная практика лучше всех обучающих курсов. Не ориентируйтесь на заработную плату по первости, вам нужен только опыт ⚙️

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

В качестве «образовательных платформ» могу посоветовать только youtube и официальную документацию Flutter. На youtube я смотрю: heyflutter.com, Konstantin Kokorin, LazyLoad Dart & Flutter, офиц. канал Flutter, Уроки Flutter.

Телеграм каналов не так много, но некоторые могут быть полезны для изучения разных фишек и подходов. Я подписан, конечно, на наш канал Flutter.Много, а также Dart & Flutter, Oh my Flutter, Flutter for Dev.

Официальная документация максимально прозрачна и понятна. Её нужно изучать на постоянной основе. Я пользуюсь ей очень часто! Также советую прям зубрить ООП, алгоритмы, структуры данных и Figma, чтобы быть подкованным со всех сторон ⚙️

Книга Роберта Мартина «Чистая архитектура» помогла мне в свое время понять основные принципы построения правильной архитектуры любого проекта, не только мобильных приложений.

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

Более подробно о своем опыте я рассказал в статье на Habr. Желаю вам успехов! Пишите в чат, если хотите пообщаться. Сегодня я там за главного ⚙️

Hola, Amigos! Как вам наш апгрейд?

Для тех, кто с нами недавно, этот канал создали и развивают Flutter-разработчики агентства продуктовой разработки Amiga 🤪

В 2022 году мы завели телеграм-канал за секунду и не было времени думать над аватаром. Сейчас нас здесь становится больше, и хочется улучшать всё до мелочей! Каждый новый подписчик — это огромная мотивация. Спасибо, что читаете и выходите на связь в нашем чате❤️

Хотели бы увидеть, какие у нас еще были варианты для аватара?)

Channel photo updated

Интеграция Flutter в Native iOS (Часть 1)

Hola, Amigos! На связи Саша Чаплыгин, Flutter dev компании заказной разработки Amiga. Нашел интересную статью, решил поделиться с вами переводом. Автор материала рассказывает, как добавить Flutter в новый или существующий проект Native iOS и протестировать его на Codemagic ⚙️

Всю статью пришлось разделить на 3 части для упрощения восприятия, поэтому сегодня мы рассмотрим создание приложения на iOS и интеграцию Flutter в это приложение.

Вторая часть посвящена реализации экрана Flutter в приложение для iOS и использованию platform channel для отправки данных из Native во Flutter.

И третья часть будет про использование «Hot Reload», «Hot Restart» и тестирование на Codemagic.

Читайте первую статью по ссылке на Habr. Пишите комментарии и ставьте реакции, если было интересно и ждете продолжения! ⚙️

Анимация загрузки картинок во Flutter

Hola, Amigos! Как и обещали, делимся с вами туториалом, как настроить shimmer в мобильном приложении. Опыт нашего Flutter dev, Ярослава Цемко в проекте Bravo.

Ловите статью на Habr и ставьте ⬆️ на карму🥰

Что такое shimmer?

Hola, Amigos! На связи Ярослав Цемко, Flutter dev Amiga. Сегодня затрону тему shimmer, так как работал над ним недавно в нашем проекте Bravo.

Shimmer — это анимация загружающихся элементов. Она нужна во время ожидания загрузки контента в мобильном приложении. Чаще всего вы, наверное, встречаете в таких случаях вращающийся кружок. Так вот shimmer является его альтернативой.

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

Анимацию можно использовать при загрузке:

⭕️изображений;
⭕️элементов типа Card, ListTile;
⭕️текста;
⭕️и любых других элементов, благо есть возможность его тонкой настройки.

Реализацию shimmer можно посмотреть здесь.

В следующем посте расскажу, как я настроил этот виджет на нашем проекте и с какими сложностями столкнулся. Ставьте реакцию, если ждете и делитесь своим опытом в чате!

Отличие Flutter Isolates и Compute

Hola, Amigos! Перед тем, как перейти к основной теме, освежим знания. Вместо потоков весь код в Dart выполняется внутри изолятов. Каждый изолят обладает собственной кучей памяти, что гарантирует изоляцию состояния между ними. Изоляты позволяют выполнять ресурсоемкие задачи: сложные вычисления, обработка изображений или синтаксический анализ данных в фоновом режиме.

⚠️ Важно помнить, что изоляты взаимодействуют между собой посредством передачи сообщений с использованием SendPort и ReceivePort.

Для создания изолята мы используем .spawn():

// создаем изолят
  Isolate isolate = await Isolate.spawn(ownFunction, 'Created');
  // отправляем сообщение изоляту
  isolate.sendPort.send('From main isolate');
// получаем сообщение из изолята
  ReceivePort receivePort = ReceivePort();
  isolate.addOnExitListener(receivePort.sendPort);
  receivePort.listen((dynamic message) {
    print('Received message in main isolate: $message');
  });

Flutter Compute — это простая альтернатива изолятам, предназначенная для выполнения ресурсоемких вычислительных задач в отдельном потоке в пределах одного изолята. Одним из преимуществ Compute является автоматическое создание изолята для выполнения функции параллельно с пользовательским интерфейсом.

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

Future<int> computeFunction(int value) {
  return compute(_ownFunction, value);
}

Используйте Flutter Isolates и Flutter Compute, чтобы повысить производительность и скорость отклика в приложении Flutter ⚙️

Удачи в разработке! Оставляйте реакцию, если было полезно ⚙️