Flutter. Много

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

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

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

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

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

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

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

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

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

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

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

Обновления 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, то делитесь своими впечатлениями в чате!

Обзор пакета 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() для более корректного отображения таймеров плеера. Докрутил виджету слайдер громкости.

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

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

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

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

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

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

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

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

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

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

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

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

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

Практическое применение 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: 'Кнопка'),
),
),
),
);
}

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

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

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

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

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

🔵Камера и Flutter

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Да, конечно!

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

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

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

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

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

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

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

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? На чём раньше кодили? Поделитесь в чате ⚙️

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

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. А пока рассказывайте в чате, был ли у вас подобный опыт?

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

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

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

Параметры:
imageUrl — ссылка на изображение.
httpHeaders — параметр, для передачи http заголовков при запросе.
Placeholder — виджет, который отображается, пока изображение не загружено.
errorWidget — виджет, который отображается в случае, если при загрузке изображения произошла ошибка.
ProgressIndicatorBuilder — виджет, который будет отображаться во время загрузки.
imageBuilder — параметр, который позволяет настроить отображение картинки под себя.

Пример:

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

Я использовал данный пакет для загрузки картинок в каталоге интернет-магазина продукции для праздников.

Всем хорошего кода! Делитесь в чате, пользовались ли вы cached_network_image и в каких проектах?

Hola, Amigos! Понедельник — день тяжелый, поэтому не грузим вас сегодня кодом, а предлагаем посмотреть обновления операционной системы iOS 17.

Новшества, которые вы сможете задействовать в своих проектах:

1️⃣ WidgetKit улучшения: Повышенная гибкость и возможности для кастомизации виджетов. Новые API для более креативного дизайна.

2️⃣ SwiftUI 4.0: Еще больше удобства в построении интерфейсов. Новые компоненты и возможности для экспрессивного кода.

3️⃣ Мощные инструменты AR: Расширены возможности дополненной реальности. Откройте новые сценарии взаимодействия с пользователем!

Продолжение карусели по ссылке.

Как вам iOS 17? Какие возможности для себя открыли? Делитесь в комментариях!