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

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 (Часть 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! Перехватываю эстафету и продолжаю рубрику знакомства. Меня зовут Сергей Климович, я 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 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 ⚙️

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

Обзор пакета 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!');
}

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

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

Hola, Amigos! На связи Ярослав Цемко, Flutter dev Amiga. Бывают ситуации, когда нам нужно сделать специфическое поведение при отрисовке виджета, например, изменение верстки при заполнении контента.

В качестве примера рассмотрим сообщение в чате. Оно состоит из текста сообщения и даты отправления. Нам необходимо перенести сообщение на следующую строку, если в строке заканчивается место, которое перекрывает дата отправления.

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

RenderObject состоит из трех важных методов:
1️⃣ performLayout — выясняет размер объекта, который требуется отрисовать.
2️⃣ Paint — собирает всю информацию о данном RenderObject, полученную из performLayout и отрисовывает виджет в соответствии с ней.
3️⃣describeSemanticsConfiguration — возвращает текущую семантику (подробнее тут) в контексте нахождения в дереве семантики.

3 способа построить виджет c использованием RenderObject:
🔵LeafRenderObjectWidget — виджет, в котором не предполагаются дочерние элементы.
🔵MultiChildRenderObjectWidget — виджет, который может содержать в себе один список дочерних элементов.
🔵SlottedMultiChildRenderObjectWidget — виджет, в котором содержатся именованные вложенные элементы, которые располагаются относительно друг друга в сетку.

При создании виджета с renderObject нужно переопределить родительские методы:
⭕️createRenderObject — поведение при создании renderObject.
⭕️updateRenderObject — поведение при обновлении renderObject.

RenderObject можно создать, наследуясь от класса RenderBox. RenderBox — это представление объекта в прямоугольной системе координат.

Скоро напишу статью с примером настройки виджета, с использованием RenderObject. А пока рассказывайте в чате, был ли у вас подобный опыт?

Всем хорошего кода!

Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Пришла моя очередь рассказать вам, как меня занесло в программирование, а потом и во Flutter🦋

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

После конструкторов я начал изучать языки. Случился резкий скачок сложности от Scrath к Assembler. И это было больно😅 Если играете в видеоигры, то это как перескочить с Sacred Underworld на Dark souls.

В то время у меня была только одна скромная книжка «Assembler — это просто!», и как вы можете догадаться, с Assembler не пошло. Следующая точка IT-просвещения — язык C++. Тут уже дело шло бодрее, но всё так же сложно.

Я обрадовался, когда узнал про C#. Это был идеальный баланс возможностей, производительности и простоты освоения.

К этому моменту я заканчивал универ и начал искать работу. Получилось очень быстро и неожиданно. Это была маленькая компания с дружным коллективом — идеальное место для совершенствования практических навыков с нуля. Team Lead предложил мне освоить Flutter. Направление новое, перспективное. Я согласился.

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

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

Другой разработчик же показывал, как использовать дебаг-мод. Учил, что не всегда приложению нужен идеальный код👆 Важно соблюдать баланс между сроками сдачи работы и качеством кода. А качество приложения всегда должно быть на высоте!

Спустя год я понял, что пора двигаться дальше. И так нашёл замечательную Amiga🥰 Это стало для меня новой ступенью развития, на которой я освоил много новых технологий, повысил качество своих коммуникативных навыков и встретил хороших людей.

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

Ребят, а как вы пришли к программированию и Flutter? На чём раньше кодили? Поделитесь в чате ⚙️

1 Часть интервью с HR. Ответы на все ваши вопросы

Hola, Amigos! Из недавнего опроса стало понятно, что аудитория на нашем канале делится примерно 50/50 на junior и middle/senior. К нам часто начали поступать вопросы: что писать в сопроводительном письме? как найти работу джуну? как составить резюме?

Ура, момент настал! Мы взяли интервью у нашего Group Lead HR, Кати и вот, что она советует начинающим мобильным разработчикам.

1️⃣ На что ты обращаешь внимание на собеседовании с Flutter-разработчиком?

Я оцениваю софты, поэтому мой выбор складывается из того, подходит ли специалист нам по командному духу. Обращаю внимание на навыки устной и письменной коммуникации. Открытый ли он, легко ли и не односложно отвечает на вопросы, приводит ли примеры, не перебивает. Харды оценивает Team Lead.

2️⃣ Как составить резюме?

Дам несколько советов, как лучше НЕ делать:
1) Плохо составленное резюме: пустое или громоздкое с полотном текста и ошибками, с ссылками на код или на закрытый файл без доступа на просмотр.
2) Частая смена работы (минимум 6 месяцев в одной компании).
3) Раздел «О себе» может стать решающим, как в пользу кандидата, так и в «отказ». По нему сразу видно совпадают ли наши ценности.

В этом разделе лучше указывать:
– достижения в карьере;
– самые сильные навыки, относящиеся к желаемой должности;
– что вы для себя ищете, и чем полезны компании;
– телеграм или другие контакты. Это ускорит связь с вами, т.к. не у всех компаний открытие контактов в свободном доступе.

3️⃣ Важно ли сопроводительное письмо? Что в нём писать?

Да, оно очень приветствуется. Но есть несколько важных моментов:
– не нужно писать огромное полотно.
– рекрутер отсматривает около 100 резюме в день, на 1 резюме есть всего 2 мин.
– лучше всего писать персонализированное и ёмкое письмо с указанием релевантных навыков из вакансии, выражая интерес к задачам.

Продолжение завтра! Накидайте, пожалуйста, реакций, если было полезно! Амиговке Кате будет очень приятно❤️