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.

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

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

Анимация и Flutter

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

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

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

В новой статье рассказываю, как использовать шейдеры в приложениях Flutter, открыв новые горизонты для креативной реализации дизайнерских идей ⚙️

Всем хорошего кода! Делитесь в чате своим опытом работы с анимацией в Flutter.

Обзор scroll_to_index

Hola, Amigos! Сегодня рассмотрим #пп scroll_to_index. Данный пакет облегчает управление скроллом у прокручиваемых наборов виджетов. Для этого нам нужно дочерние виджеты у скроллящегося списка обернуть в новый виджет AutoScrollTag.

Благодаря этому виджету, мы можем управлять поведением скролла через контроллер. А именно, проскроллить лист до нужного нам итема по индексу:

autoScrollController

.scrollToIndex(30, preferPosition: AutoScrollPosition.begin); //где 30 - это index у AutoScrollTag.

Настройки пакета:
– key ([Key] ключ виджета);
– controller ([AutoScrollController] контроллер, через который мы можем управлять прокруткой);
– index ([int] индекс виджета в скроллящемся списке);
– color ([Color?] цвет фона у дочернего виджета);
– highlightColor ([Color?] тоже должен был как-то влиять на визуал дочернего виджета, но изменений мы не обнаружили);
– disabled ([bool] включает/выключает контроллер для этого дочернего виджета);
– builder ([Widget Function(BuildContext, Animation<double>)?] билдер виджета);
– child ([Widget?] дочерний виджет).

Расскажите в чате использовали ли вы scroll_to_index в своих проектах? ⚙️

Кастомные иконки запуска приложения

Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня покажу, как сделать уникальную иконку запуска приложения⚙️

Нам понадобится пакет flutter_launcher_icons, добавляем его в проект:

flutter_launcher_icons:
android: "launcher_icon"
ios: true
image_path: "assets/images/launcher_icon.png"
min_sdk_android: 21 # android min sdk min:16, default 21
web:
generate: true
image_path: "assets/images/launcher_icon.png"
background_color: "#hexcode"
theme_color: "#hexcode"
windows:
generate: true
image_path: "assets/images/launcher_icon.png"
icon_size: 48 # min:48, max:256, default: 48
macos:
generate: true
image_path: "path/to/image.png"

Как вы уже заметили, иконку можно отдельно настроить для Web, Windows и MacOS. Рассмотрим ещё другие настройки пакета:

– min_sdk_android (определяет минимальную поддерживаемую версию SDK);
– generate (нужно ли переопределять иконку для данной платформы);
– image_path (путь до изображения, которое будет иконкой);
– image_path_android (путь до изображения, специфичного для платформы android, которое будет иконкой, только для Android);
– image_path_ios (путь до изображения, специфичного для платформы ios, которое будет иконкой, только для iOS);
– adaptive_icon_background (цвет или картинка, которая станет фоном для иконки, только для Android);
– adaptive_icon_foreground (цвет или картинка, которая станет передним планом иконки, только для Android);
– remove_alpha_ios (удаляет альфа-канал для значков iOS);
– background_color (цвет заднего фона иконки, только для Web);
– theme_color (обновляет theme_color в web/manifest.json, только для Web);
– icon_size (определяет размер значка, только для Windows).

Запускаем пакет командой flutter pub run flutter_launcher_icons 🦋

Ставьте реакцию, если было полезно! И пишите в чате, о чём ещё вам было бы интересно узнать?

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

Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня я поведаю о своём опыте интеграции штрих-кодов во Flutter-приложение.

Задача: сделать страницу с вертикальным штрих-кодом на весь экран. Слева от него надписи «номер карты» и сам номер карты.

Дополнительным усложнением был контроль яркости устройства. Если он меньше 80% на этой странице, то нужно повысить его искусственно.

Сначала создаю штрих-код с помощью пакета barcode_widget.

BarcodeWidget(
                      barcode: Barcode.ean13(drawEndChar: true),
                      data: data,
                      drawText: false,
                      errorBuilder: (context, error) => Center(
                        child: Text(error),
                      ),
                    )

Теперь разворачиваю этот виджет на 90 градусов, чтоб он принял вертикальное положение на весь экран. К сожалению, настройки ширины ограничены и пришлось всё делать через RotatedBox.

RotatedBox(
            quarterTurns: 1,
            child: Column(
              children: [
                Expanded(
                  flex: 8,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
                    child: BarcodeWidget(
<...>
                    ),
                  ),
                ),
              ],
            ),
          )

Штрих-код готов, осталось добавить записи и тоже вертикально.

RotatedBox(
            quarterTurns: 1,
            child: Column(
              children: [
                Expanded(
                  flex: 8,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
                    child: BarcodeWidget(
<...>
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          S.current.barCodePageCardNumber,
                          style: textStyle,
                        ),
                        Text(
                          widget.cardCode,
                          style: textStyle,
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          )

Перепробовал множество способов вёрстки, и это оптимальное решение, которое мне удалось найти. Если у вас был более удачный опыт, пишите в чате!

Осталось сделать регулирование яркости устройства. Я использовал пакет screen_brightness. Для работы с ним необходимо разрешение для Android: <uses-permission android:name="android.permission.WAKE_LOCK" />. Пакет позволяет менять яркость устройства через класс ScreenBrightness.

@override
void initState() {
  initBrightness();
  super.initState();
}
  
Future<void> initBrightness() async {
    final isRealDevice = await SafeDevice.isRealDevice;
    if (isRealDevice) {
      brightness = await ScreenBrightness().current;
      if (brightness < 0.8) {
        await ScreenBrightness().setScreenBrightness(0.8);
      }
    }
  }

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

Material(
  child: PopScope(
 onPopInvoked: (value) async {
   await ScreenBrightness().setScreenBrightness(brightness);
 },
 child: Scaffold(
   appBar: AppBar(
     backgroundColor: const Color(0xFF1A1A18),
     leading: InkWell(
       onTap: () async {
         await await ScreenBrightness().setScreenBrightness(brightness);
         if (mounted) {
           Navigator.of(context).pop();
         }
       },
       <…>

Был ли у вас подобные задачи? ➡️ Чат.

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

Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev Amiga. Мы уже касались темы Sliver'ов, а сегодня я предлагаю погрузиться в практику.

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

Будет много кода, поэтому переходите на Habr 🙂

Делитесь в чате своим опытом с Slivers!