Развёртывание 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 мин.
– лучше всего писать персонализированное и ёмкое письмо с указанием релевантных навыков из вакансии, выражая интерес к задачам.

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

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

Hola, Amigos! Вот ещё несколько советов от Кати, Group Lead HR Amiga о том, как найти первую работу Flutter-разработчику.

1️⃣ Как устроен процесс поиска и приёма на работу?

Процесс поиска:
→ рекрутер смотрит отклик.
→ резюме отправляется на проверку Team Lead. Ожидание результата зависит от нагрузки специалиста, но рекрутер всегда старается ускорить процесс.
→ рекрутер связывается с понравившимися специалистами и назначает интервью.
→ принимаем решение в пользу человека с самыми подходящими нам хардами, и что очень важно — софтами.

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

2️⃣ Как выбрать компанию для первой работы?

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

3️⃣ Стоит ли откликаться в компании, у которых нет открытых вакансий?

Да, конечно!

1) Даже если нет вакансий, всегда можно пообщаться и попасть в резерв. В таком случае, при необходимости, первым делом с предложением придут именно к вам.

2) Не всегда вакансия опубликована на hh. Она может закрываться через тот же резерв, поэтому лучше делать всё от себя зависящее, чтобы попасть в компанию мечты.

3) Возможно, компания еще только планирует открывать вакансию, и ваше резюме будет очень кстати. Такие мэтчи не редкий случай!

4) Если вы начинающий специалист и хотите стажироваться, то компании часто готовы рассматривать такие варианты при наличии временных ресурсов.

Разработчики, делитесь в чате своим опытом прохождения собеседований и советами для резюме! Очень интересно, как вы начинали? 🦋

Полезные посты и статьи от нас и наших друзей, которые вы могли пропустить

Hola Amigos! Выбирайте, что вам интересно и переходите по ссылкам.

🔵Камера и Flutter

🔵Вложенная навигация во Flutter: что такое декларативный роутер и зачем он нужен

🔵«Заметки мобильного разработчика» о видеоплеере

🔵Анимация загрузки картинок во Flutter, или как сделать shimmer своими руками

🔵«Заметки мобильного разработчика» о скролле списков

⚪️Transition Animation: настраиваем анимацию переходов во Flutter

Приятного чтения! Ставьте реакцию, если такие подборки нужно делать чаще ⚙️

CustomPainter

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

Когда вы работаете с CustomPainter, вам потребуется наследоваться от этого класса и определить два ключевых метода:

🟡Paint: Метод, в котором программируется рисование на холсте.
🟡shouldRepaint: Метод, который определяет, должен ли перерисовываться виджет, если класс, где-то обновился, например в StatefulWidget.

Пример:

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.color = Colors.red;
    paint.strokeWidth = 2.0;
    Offset center = const Offset(100.0, 100.0);
    canvas.drawCircle(center, 50.0, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

Для работы с CustomPainter нужен виджет CustomPaint, который состоит из:

child: дочерний виджет.
painter: любой класс, который наследуется от CustomPainter.
foregroundPainter: параметр, который отвечает за рисование поверх дочернего виджета.
IsComplex: в случае, если графика, которую сложно отрисовывать, данный параметр указывает отрисовщику, что он сам должен определять какие части можно закэшировать.
willChange: параметр, который определяет будет ли кэшироваться данный виджет.

В следующем посте разберём, как на практике использовать CustomPainter. Ставьте 🔥, если ждете!