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

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. Ставьте 🔥, если ждете!

Практическое применение CustomPainter

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

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

@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.red;
paint.strokeWidth = 2.0;
canvas.drawOval(
Rect.fromCenter(
center: size.center(Offset.zero),
width: size.width,
height: size.height,
),
paint);
TextSpan textSpan = TextSpan(
text: text,
style: textStyle,
);
TextPainter textPainter = TextPainter(
text: textSpan,
textAlign: textAlign ?? TextAlign.center,
textDirection: textDirection ?? TextDirection.ltr,
);
textPainter.layout();
final xCenter = (size.width - textPainter.width) / 2;
final yCenter = (size.height - textPainter.height) / 2;
final textOffset = Offset(xCenter, yCenter);
textPainter.paint(canvas, textOffset);
}

Обернём CustomPaint в ClipRect, чтобы поместить в дереве:

ClipRect(
child: CustomPaint(
painter: ButtonPainter(text: 'Кнопка'),
),
),

И в SizedBox, чтобы задать размеры:

SizedBox(
height: 50,
width: 100,
child: ClipRect(
child: CustomPaint(
painter: ButtonPainter(text: 'Кнопка'),
),
),
),

GestureDetector делает кнопку активной:

@override
Widget build(BuildContext context) => GestureDetector(
onTap: onTap,
child: SizedBox(
height: 50,
width: 100,
child: ClipRect(
child: CustomPaint(
painter: ButtonPainter(text: 'Кнопка'),
),
),
),
);
}

Ссылка на репозиторий 🦋

Рассказывайте в чате о своем опыте использования данного инструмента!

Hola, Amigos! С наступающим Новым годом!

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

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

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

С наилучшими пожеланиями и до скорых встреч в новом 2024 году ⚙️

Hola, Amigos! Потихоньку выходим на связь после бурных праздников. И делимся с вами видео с выступлениями Саши и Тимура на конференции DevFest 2023.

Ребята рассказывали про свой опыт, реальные проекты, над которыми работали в Amiga. Проекты забирали серебро и бронзу на Tagline Awards, поэтому они стоят вашего внимания! Смотрите по ссылкам:

➡️ ML и Flutter
➡️ Камера и Flutter

Будем рады вашим комментариям!

P.S.: в 2024 году планируем активно участвовать в различных конференциях и организовывать митапы. Рассказывать об этом здесь? Вам интересно?

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

Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Как вы уже догадались, пакет audioplayers позволяет проигрывать звуковой файл. Весь функционал можно показать двумя строчками кода:

final player = AudioPlayer();
await

player.play

(UrlSource('

https://example.com/my-audio.wav

'));

где у нас появляется контроллер AudioPlayer(), у которого можно вызвать методы:

– play(Source): проиграть указанный аудиофайл;
– setVolume(double): установить громкость звука при проигрывании;
– setSource(Source): установить источник звука для этого проигрывателя;
– setSourceUrl(String): установить источник звука для этого проигрывателя в качестве url файла;
– pause(): поставить проигрывание источника на паузу;
– и др. в документации.

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

Взял за основу PlayerWidget из примеров, но переделал вёрстку. Поправил метод _play(), написал метод getDurationString() для более корректного отображения таймеров плеера. Докрутил виджету слайдер громкости.

В итоге мы получаем удобный виджет аудиоплеера с рядом настроек для кастомной визуализации виджета ⚙️

Ознакомиться с форком пакета с моими дополнениями можно тут.

Надеюсь, будет полезно! Буду рад вашей обратной связи в чате.

Обновления Flutter 3.16

Hola, Amigos! На связи Саша Чаплыгин, Flutter dev Amiga. Делимся с вами переводом статьи Kevin Chisholm, PM Dart и Flutter в Google о новой версии Flutter 3.16.

Что вас ждёт:
🟡 Material 3 устанавливается в качестве новой темы по умолчанию.
🟡 Отображается предварительный просмотр Impeller на Android.
🟡 Появилась возможность добавлять расширения для DevTools.
🟡 Обновился инструментарий Flutter для игр в стиле кэжуал.
🟡 И многое другое!

Читайте на Habr:
1 Часть
2 Часть

А если вы уже перешли на версию 3.16, то делитесь своими впечатлениями в чате!

Как выбрать лучший инструмент для отслеживания крашей?

Hola Amigos! Crashlytics помогает собирать, анализировать и систематизировать отчеты о сбоях приложений. Полезный инструмент для оперативного устранения неполадок. Мы используем Firebase Crashlytics.

Преимущества Firebase Crashlytics

⚙️ Группирует сбои в удобный список, выделяя ключевые проблемы и предоставляя необходимую информацию для быстрого определения и решения основных причин.

⚙️ Предлагает рекомендации по устранению типичных проблем со стабильностью, облегчая процесс отладки и решения проблем.

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

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

Как интегрировать Firebase Crashlytics во Flutter-проект описано в документации.

Есть и другие инструменты:

🔵Если вам нужны гибкие возможности конфигурации и поддержка множества языков, рассмотрите Sentry.io.
🔵Для тех, кто ищет расширенные функции отчетности и поддержку множества платформ — Bugsnag.
🔵Если ваш приоритет — взаимодействие с пользователями и сбор обратной связи, то Instabug.

Поделитесь своим опытом использования Crashlytics в чате! Какой инструмент выбрали для себя и почему?

Управление зависимостями в Flutter

Hola, Amigos! Сегодня мы поговорим о pubspec.yaml, в котором прописываются зависимости пакетов с помощью символа «^». Данный символ позволяет сделать «гибкую» зависимость, при которой мы охватываем сразу диапазон всех версий пакета, которые гарантированно обратно совместимы с указанной версией.

Преимущества «гибких» зависимостей:
1️⃣ Автоматически используем самую последнюю и лучшую версию пакета, если у нас всего одна зависимость.
2️⃣ Даем Dart'у возможность умно выбирать совместимую версию пакета среди других зависимостей.

Pubspec.lock — почему он важен?
Гарантирует, что каждый разработчик, заходящий в проект, использует те же версии библиотек, что и первый разработчик. Даже с символом «^», мы избегаем разночтений версий между разными устройствами.

Метаданные в pubspec.lock:
– Название пакета: для идентификации.
– Dependency: описывается, является ли сама эта зависимость прямой или транзитивной (зависимость для другой зависимости).
– Description: дополнительная информация о типе зависимости.
– Source: как зависимость была добавлена в проект.
– Version: конкретная версия пакета.

На этом всё! Делитесь в чате своими историями о работе с pubspec.yaml.

Интеграция видеоплеера YouTube во Flutter

Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Я долгое время работаю с проектом NL — международной торговой маркой. Больше всего она известна своими протеиновыми коктейлями и снеками.

Одной из моих задач было — интегрировать видеоплеер во Flutter- приложение, с которого можно было бы смотреть видео с YouTube. Казалось бы, нет ничего особенного, просто подключаем пакет, и все готово. Но я столкнулся с рядом проблем:

➡️ долгая загрузка видео,
➡️ некорректная перемотка видео,
➡️ аудио быстрее видео.

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

Обзор adaptive_dialog

Hola, Amigos! Сегодня расскажем про #пп adaptive_dialog. Инструмент упрощает создание диалогов, предлагая заготовленные пресеты, которые автоматически стилизуются под Android и iOS.

С adaptive_dialog в вашем арсенале 6 удобных диалогов:

1️⃣ showOkAlertDialog (окно с кнопкой "OK");
2️⃣ showOkCancelAlertDialog (окно с кнопками "OK" и "Cancel");
3️⃣ showConfirmationDialog (окно с выбором итема из списка);
4️⃣ showModalActionSheet (окно-выплывашка снизу);
5️⃣ showTextInputDialog (окно с текстовыми полями);
6️⃣ showTextAnswerDialog (окно с текстовым полем формы "вопрос-ответ");

У всех видов диалоговых окон есть группа общих полей:

– title ([String] заголовок диалога);
– style ([AdaptiveStyle] стиль отображения диалога);
– builder ([Widget Function(BuildContext, Widget)] собственно, функция-билдер виджета);
– onWillPop ([Future<bool> Function()] функция, действующая при закрытии диалога);
– message ([String] текст диалога).

Также есть уникальные поля, расширяющие кастомизацию их функционала.

Переходите в чат и рассказывайте, пользовались ли вы пакетом adaptive_dialog и в каких проектах?

AppLifecycle

Hola, Amigos! Сегодня с вами я, Саша Чаплыгин, Flutter dev Amiga. Предлагаю обсудить одну интересную тему — отслеживание состояния приложения: в фоне, закрыто или не активно.

Я написал статью, из которой вы поймете, как обрабатывать переходы в новое состояние. Узнаете 2 подхода к реализации, которые могут выручить в той или иной ситуации.

Читайте на Habr и делитесь своим опытом работы с жизненным циклом приложения в чате ⚙️

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

Hola, Amigos! Вот и дайджест января. Уже целый месяц нового года прошел!

🔵Видео-лекции с DevFest 2023
🔵Flutter 3.16 (часть 1)
🔵Flutter 3.16 (часть 2)
🔵Анимация и Flutter
🔵Интеграция видеоплеера во Flutter
🔵Жизненный цикл приложения

А еще напоминаем, что обзоры полезных пакетов вы можете найти по тэгу #пп.

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

Рассказывайте в чате, как начался ваш 2024-ый? И какими проектами вы сейчас увлечены?

Советы от Team Lead для подготовки к первому собеседованию

Hola, Amigos! На связи Сережа Климович, Mobile Team Lead Amiga. Сегодня вернемся к теме собеседований, хочу вам дать несколько советов от себя и напомнить о рекомендациях нашей Group Lead HR, Кати. Берите на вооружение!

Начну с того, что у начинающих мобильных разработчиков есть несколько грейдов: «стажер», «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.

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

Если вам интересна эта тема и есть вопросы, то пишите в чат. Пообщаемся 🙂