Вложенная навигация во Flutter

Hola, Amigos! Сегодня вышла новая статья на Habr нашего руководителя мобильной разработки Тимура Моисеева. Материал посвящен вложенной навигации на основе пакета go_router.

Читайте, ставьте «+» и оставляйте комментарии здесь. Дайте знать, если было полезно!

Где учиться Flutter?

Hola, Amigos! Вы часто нам задаете этот вопрос, и сегодня мы хотим вам рассказать о бесплатном хендбуке по Flutter от Академии Яндекса. В этом онлайн-учебнике эксперты компании собрали теорию и кейсы из практики — всё, что поможет вам изучить Flutter с разных сторон и эффективно применять новые знания в рабочих задачах.

Чтобы начать заниматься, достаточно знать любой С-подобный язык или владеть Dart на уровне написания базовых алгоритмов. Пока что на сайте доступна только первая глава учебника, но Академия Яндекса обещает совсем скоро опубликовать и другие части.

«Авторы книги действительно вложили много усилий в создание структурированной информации. Они кратко описали ключевые концепции и функции Flutter, предоставив читателю основы для начала работы. Можно отметить, насколько хорошо книга сбалансирована для разных уровней опыта. Даже если вы новичок, объяснения просты и понятны, приводятся примеры, а для более опытных разработчиков есть практические советы, благодаря которым можно усилить свою экспертизу. Ждем открытие следующих глав», — вот что говорит наш Flutter-разработчик, Данила Попов.

Ловите хендбук по ссылке! Надеемся, что вам будет полезно. Не забывайте подписаться на новости, чтобы не пропустить выход новых материалов.

Нововведения фреймворка Flutter 3.13. Часть 1

Hola, Amigos! На связи Тимур Моисеев, руководитель мобильной разработки Amiga. Подготовили для вас большой перевод статьи об изменениях во фреймворке Flutter 3.13: двумерный скроллинг, более быстрая графика, обновленный модуль Material 3 и многое другое.

Делюсь с вами переводом первой части, в которой будет идти речь про:

– Улучшения в графическом движке рендеринга Impeller.
– Новый API для улучшения поддержки складных устройств.
– Фреймворк Material.

Переходите по ссылке, оставляйте комментарии и ставьте лайки, если было полезно! Через пару дней выложу вторую часть, to be continued😉

Нововведения фреймворка Flutter 3.13. Часть 2

Hola, Amigos! На связи Тимур Моисеев, руководитель мобильной разработки Amiga. Как и обещал, делюсь второй частью перевода статьи про обновления во Flutter 3.13, в котором:

– изменения в жизненном цикле приложения;
– скроллинг;
– новые сливеры;
– доступность;
– платформы;
– обновления игр;
– новые функции DevTools.

Ссылка здесь, приятного чтения! Пишите в комментариях, чего ждали больше всего?

Подборка других важных новостей

Hola, Amigos! Обычно здесь мы пишем только про Flutter, и это навело нас на мысль, что некоторые из вас могут даже и не догадываться, что Amiga — это агентство web и mobile разработки полного цикла. Кроме большой Flutter-команды у нас есть аналитики, дизайнеры, web-разработчики, тестировщики и другие ребята, которые чаще всего за кулисами, но имеют огромное значение для всей компании.

Amiga появилась в 2021 году, мы стартовали с 3 человек, сейчас нас 70. За 2 года существования компания завоевала топовые награды за проекты и верхние позиции рейтинга digital-подрядчиков Москвы по версии Рейтинга Рунета.

Новости не про Flutter, но это не делает их скучными:

1. Статья от frontend разработчика Amiga — Игоря Мельникова «5 новинок CSS в адаптивной верстке».

2. Кейс «Шахтинская плитка». Рассказываем, зачем бизнесу имиджевый сайт.

3. Статья от руководителя проектного офиса Amiga — Маши Воробьевой «Управление отношениями с клиентом».

4. Кейс Easy «Как мы сэкономили клиенту 2🍋 и разработали приложение VK».

5. Статья PHP-разработчика Amiga — Жени Шмулевского «Организация кода в Laravel. Личный опыт».

Если было интересно, жмите реакцию и пишите в комментариях, что хотели бы узнать о нас?

Возможности и ограничения FlutterFlow

Hola, Amigos! Рассказываем, как упростить процесс создания мобильных приложений на Flutter с помощью платформы FlutterFlow.

В чем особенность FlutterFlow?

FlutterFlow — это инструмент, который позволяет создавать мобильные приложения на базе фреймворка Flutter без необходимости писать много кода. Он предоставляет визуальный интерфейс для создания макетов, добавления функциональности и интеграции сторонних сервисов.

Плюсы FlutterFlow:

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

📲 Легкая интеграция сторонних сервисов (Firebase, Stripe, и др.) без необходимости писать сложный код.

📲 Генерация кода на основе дизайна и конфигурации, что значительно ускоряет процесс разработки.

Ограничения FlutterFlow:

– Некоторые сложные пользовательские интерфейсы могут потребовать ручной доработки.

– За расширенные функции придется платить.

FlutterFlow отлично подходит для MVP проектов с ограниченным бюджетом.

Делитесь в комментариях своим опытом использования FlutterFlow📬

Камера во Flutter

Hola, Amigos! С вами Саша Чаплыгин, Flutter-dev Amiga. Работаю над улучшением NDA-проекта — приложение, в котором используется камера для сканирования определенных элементов на товаре. Делюсь с вами обзором, как начать использовать камеру в приложении Flutter.

Нам понадобится пакет camera. Добавьте его в файл pubspec.yaml вашего проекта:

yaml
dependencies:
camera: ^0.9.4+5

После этого запустите flutter pub get для установки зависимостей.

Создадим свою собственную страницу.
Используем виджет CameraPreview для отображения камеры на экране. Для этого в initState инициализируем наш CameraController c использованием CameraDescription (полученным из availableCameras).

*код нашего виджета*
late CameraController _controller;

@override
void initState() {
super.initState();
_controller = CameraController(
widget.camera, // CameraDescription
ResolutionPreset.high,
);

_controller.initialize().then((_) {
if (!mounted) {
return;
}
setState(() {});
});
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
if (!_controller.value.isInitialized) {
return Container();
}
return AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: CameraPreview(_controller), // кастомизируем тут
);
}
}

Теперь у нас есть экран камеры, добавим функционал для запуска и остановки камеры. Например, вы можете добавить кнопку «Сделать фото» и кнопку «Записать видео», добавив их в ваш кастомный виджет с экраном камеры.

FloatingActionButton(
onPressed: () async {
try {
if (!_controller.value.isInitialized) {
return;
}
final image = await _controller.takePicture();
// Обработка сохраненной фотографии
} catch (e) {
// Обработка ошибок
}
},
child: Icon(Icons.camera),
),
FloatingActionButton(
onPressed: () async {
try {
if (!_controller.value.isInitialized) {
return;
}
if (!_controller.value.isRecordingVideo) {
await _controller.startVideoRecording();
} else {
final video = await _controller.stopVideoRecording();
// Обработка сохраненного видео
}
} catch (e) {
// Обработка ошибок
}
},
child: Icon(
_controller.value.isRecordingVideo
? Icons.stop
: Icons.videocam,
),
),

Не забудьте добавить разрешение на доступ к камере в файлах Info.plist на iOS и в AndroidManifest.xml на Android. И обрабатывайте исключения, дабы не попасть впросак🙂 Удачи!

Пишите в комментариях было ли полезно и рассказывайте о своих проектах Flutter с камерой!

Hola, Amigos! В этом году мы участвуем в конкурсе «Рейтинга Рунета» с 3-мя крутейшими проектами. Мы врываемся в него впервые, поэтому можете представить, насколько для нас это важно💜

В ежегодном всероссийском конкурсе участвуют 3 наших сайта:

– Gigoo. Маркетплейс, который помогает руководителям бизнесов получить быстрый доступ к качественной экспертизе.

– Шахтинская плитка. Сайт-каталог, который поддерживает имидж ведущего отечественного производителя на рынке.

– Академия Талантов. Государственный образовательный портал, который хранит в себе всю информацию об образовательных программах и является оператором взаимодействия студентов и преподавателей.

До 20 сентября идет народное голосование, 22 сентября к оценке работ приступит экспертная комиссия и члены жюри — ведущие профессионалы веб- и мобильной разработки, а также представители бизнеса.

Сейчас самое время поставить «отлично» нашим проектам! Регистрация не требуется, поэтому понадобится всего 3 минуты на доброе дело. Вам не сложно, нам приятно🥰

Всем посылаем лучики благодарности!

Hola, Amigos! Делимся Flutter-пакетами, которые улучшат ваши приложения:

📌carousel_slider: Если вам нужно добавить красивый карусельный слайдер с изображениями или контентом, этот пакет для вас. Он предоставляет легкий и гибкий способ создания интерактивных каруселей.

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

📌auto_size_text: Управление текстовым контентом может быть сложной задачей, особенно когда вы не знаете, сколько места он займет. Этот пакет автоматически подстраивает размер текста под доступное пространство, облегчая вам жизнь при работе с разнообразными макетами.

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

Делитесь популярными пакетами в комментариях или пишите, про какой нам рассказать подробнее?

Основы CI/CD

Hola, Amigos! Рассказываем про важный инструмент в создании приложений, который позволяет улучшить процесс разработки, ускорить доставку обновлений и снизить риски — непрерывная интеграция (CI) и доставка (CD).

Что это такое?

Непрерывная интеграция (CI) — это практика, при которой код разработчиков регулярно (обычно несколько раз в день) интегрируется в общую ветвь. Каждый раз, когда новый код добавляется, автоматически запускаются тесты, чтобы убедиться, что новый код не сломал существующую функциональность.

Непрерывная доставка (CD) — это практика, при которой каждое успешное завершение цикла CI автоматически запускает процесс доставки приложения в целевую среду (например, на сервере или в магазинах приложений).

Основные преимущества CI/CD:

💫 Автоматизация: CI/CD интегрирует автоматическую сборку, тестирование и развертывание, что позволяет разработчикам концентрироваться на коде, а не на рутинных операциях.

💫 Улучшенное качество: Регулярная интеграция и тестирование помогают выявлять и устранять ошибки на ранних этапах разработки.

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

💫 Надежность: CI/CD позволяет уделять больше внимания контролю качества и безопасности кода.

💫 Улучшенная совместная работа: Разработчики могут легко сотрудничать, так как изменения в коде интегрируются и тестируются непрерывно.

С основами разобрались! Оставьте реакцию под постом, если эта методология вам уже была знакома👍🏻

В следующих постах поговорим о этапах, инструментах и конфигурации CI/CD для мобильных приложений.