Flutter Pulse
514 subscribers
320 photos
688 links
На канале будут новости про flutter с сайтов, информация об обновлении пакетов, а также авторский контент.
Download Telegram
🚀 Flutter Deep Linking & State Restoration: возвращаем пользователей туда, где они остановились!

Привет, коллеги! 👋 Сегодня делимся 🔥горячим видео, которое перевернет ваше представление о навигации и UX во Flutter. Хотите, чтобы пользователи возвращались в тот самый экран даже после перезапуска приложения или перехода по ссылке? Тогда вам сюда!

💡 Что внутри?
Открытый урок от Дмитрия Золотова (Flutter Developer, Yandex) для курса «Flutter Mobile Developer». На практике разбираем:
- Диплинки во Flutter: схема, Universal Links, App Links — чем отличаются и где применять.
- Навигация: когда брать Navigator 1.0, а когда переходить на мощный Router API (Navigator 2.0).
- State Restoration: как сохранять состояние UI (скроллы, формы, данные) даже после выгрузки приложения.
- Restorable Routes: автоматическое восстановление стека навигации — пользователь всегда возвращается в нужное место.
- Живая демо: создаем приложение, которое запоминает путь пользователя и открывается по диплинку на правильном экране.

🎯 После просмотра вы научитесь:
- Внедрять диплинки в мобильные и веб-приложения.
- Выбирать оптимальную навигацию для сложных сценариев.
- Сохранять и восстанавливать состояние интерфейса.
- Использовать Restorable Routes для бесшовного UX.
- Делать приложения, где пользователи никогда не теряются.

👨‍💻 Это must-see для:
- Разработчиков сложных multi-screen приложений.
- Тех, кто хочет повысить удержание пользователей.
- Всем, кто боролся с "сбросом" состояния или диплинками.

💬 "Flutter — это не только UI, но и умный контроль над пользовательским опытом!" — Дмитрий Золотов.

👉 Смотрите и внедряйте:
Youtube или VkVideo
🔔 Подписывайтесь на Flutter Pulse — впереди еще больше экспертных материалов! Ищите другие полезные ролики по хэштегу #FlutterPulseYoutube.

#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube
👍3
Самые лучшие обновлённые пакеты за последние 24 часа

google_sign_in_android 7.0.3
Пакет google_sign_in_android используется для реализации входа в систему Google на Android-устройствах. В новой версии добавлены более подробные сведения и инструкции по устранению неполадок для настройки serverClientId через Firebase.
👍 Лайки: 11, 📥 Скачиваний: 906К
https://pub.dev/packages/google_sign_in_android

camera_avfoundation 0.9.7+1
Пакет camera_avfoundation используется для реализации камеры в приложениях для iOS. Теперь он разделен от пакета camera как федеративная реализация.
👍 Лайки: 11, 📥 Скачиваний: 190К
https://pub.dev/packages/camera_avfoundation

liquid_glass_renderer 0.1.1-dev.10
Пакет liquid_glass_renderer позволяет создавать потрясающий эффект "жидкого стекла" или "матового стекла" в ваших Flutter-приложениях. В новой версии исправлены ошибки, добавлены новые функции, такие как насыщенность и яркость, улучшено рассеивание света и многое другое.
👍 Лайки: 428, 📥 Скачиваний: 3.4К
https://pub.dev/packages/liquid_glass_renderer

very_good_cli 0.26.2
Пакет very_good_cli - это инструмент командной строки для Dart, позволяющий создавать новые проекты, запускать тесты и управлять зависимостями. В новой версии исправлены ошибки, улучшена работа с шаблонами и зависимостями.
👍 Лайки: 682, 📥 Скачиваний: 84.7К
https://pub.dev/packages/very_good_cli

pdfrx 2.0.3
Пакет pdfrx - быстрый и функциональный плагин для просмотра PDF-файлов в приложениях Flutter. В новой версии улучшен API контекстного меню для выделения текста, добавлена поддержка адаптивного toolbar и улучшено позиционирование якорей.
👍 Лайки: 235, 📥 Скачиваний: 183К
https://pub.dev/packages/pdfrx

flutter_polyline_points 3.0.1
Пакет flutter_polyline_points используется для декодирования polyline-пунктов из Google Maps Directions API и нового Google Routes API. В новой версии добавлена поддержка кастомных заголовков в запросах Routes API.
👍 Лайки: 632, 📥 Скачиваний: 63К
https://pub.dev/packages/flutter_polyline_points

#Flutter #Dart #PubDev #FlutterPulse #FlutterPulseBestPackages #google_sign_in_android #camera_avfoundation #liquid_glass_renderer #very_good_cli #pdfrx #flutter_polyline_points
🚀 Не используй StatefulWidget, пока не посмотришь это видео! Часть 2

🔥 Твой Flutter-код превращается в монолитного Франкенштейна? 🔥 Автор нового видео наглядно показывает, почему гигантские StatefulWidget'ы — это бомба замедленного действия 💣:

⚠️ Закидывая всё в один StatefulWidget, вы:
• Стреляете себе в ногу 🤯
• Обрекаете на ад мердж-конфликтов 😱
• Получаете side-эффекты в неожиданных местах


🎯 В этом туториале Руслан разбирает реальный сложный экран (не абстрактный счётчик!) и показывает универсальные шаги декомпозиции:

🔧 7 шагов к спасению кода:
1️⃣ Выносим методы из State в отдельные функции
2️⃣ Создаём класс-модель для состояния
3️⃣ Переносим логику в модель
4️⃣ Подключаем ChangeNotifier + ListenableBuilder
5️⃣ Заменяем setState на вызовы методов модели
6️⃣ Дробим на компоненты с передачей модели
7️⃣ Внедряем InheritedWidget + const виджеты

💡 Ключевой принцип: после каждого шага функциональность должна сохраняться! Автор аккуратно демонстрирует рефакторинг "на живом примере" с:
• Обработкой изображений 📸
• Диалоговыми окнами
• Динамическим обновлением данных

👉 СМОТРЕТЬ ВИДЕО С ПРИМЕРАМИ КОДА 👈

💬 "В завтрашнем ролике: почему структура папок ≠ архитектура, и как разделить приложение на слои!"

Подписывайтесь и смотрите другие кейсы по хэштегу #FlutterPulseYoutube!

#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube #Refactoring #CleanCode #FlutterArchitecture #StatefulWidget #ComponentBasedUI
Правило 8 для интервалов в дизайне

Генерация визуальной гармонии на подсознательном уровне

Вы когда-нибудь задумывались, что делает дизайн визуально приятным? 🤔 Одним из секретов является соблюдение правила 8 при проектировании интервалов между элементами! 📐

Что такое правило 8?

Теория довольно проста: все элементы в вашем дизайне кратны 8 по ширине и высоте, как и расстояния между ними. 📏 Это создает ощущение гармонии и порядка, делая интерфейс более интуитивным и комфортным для пользователя. 😌

Давайте рассмотрим пример реализации этого правила во Flutter:


class AppSpacer extends StatelessWidget {
final double? width;
final double? height;

const AppSpacer._({Key? key, this.width, this.height}) : super(key: key);

factory AppSpacer.p32() => const AppSpacer._(height: 32, width: 32);
factory AppSpacer.p24() => const AppSpacer._(height: 24, width: 24);
factory AppSpacer.p16() => const AppSpacer._(height: 16, width: 16);
factory AppSpacer.p8() => const AppSpacer._(height: 8, width: 8);

@override
Widget build(BuildContext context) {
return SizedBox(
width: width,
height: height,
);
}
}



Этот код определяет виджет AppSpacer, который можно использовать для создания интервалов, кратных 8. 📝 Просто используйте один из фабричных конструкторов, таких как AppSpacer.p8(), AppSpacer.p16() и т.д., чтобы добавить нужный интервал в вашем интерфейсе. 👍

Оцените новую рубрику лайком 👍, если считаете её полезной! 💬 Поделитесь своими мыслями в комментариях! 💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #SpacingDesign #DesignTips #FlutterTips #UIUX #MobileDev #AppDev
👍4
🚀 Упрощаем свою жизнь! 🚀
Узнайте, как подключить Dart MCP Server к VS Code и расширить возможности вашего AI-агента! 🤖
С помощью Dart MCP Server ваш AI-агент сможет получать полный контекст вашего приложения, включая runtime-контекст, анализ кода и управление зависимостями и тестами 📊.
Это значит, что агент сможет целенаправленно исправлять ошибки и вносить изменения в код, без необходимости делать предположения на основе ограниченных данных 🤩.
Хотите быть в курсе последних новостей и разработок в мире Flutter, Dart и FlutterPulse? 🤔
Тогда стоит подписаться на канал FlutterPulse, чтобы не пропустить ничего важного! 📣
#Flutter #Dart #FlutterPulse 🚀💻🔥
Самые лучшие обновлённые пакеты за последние 24 часа

easy_localization 3.0.8
Пакет easy_localization используется для быстрой и простой интернационализации приложений Flutter. Он поддерживает переводы на множество языков, загрузку переводов из файлов JSON, CSV, Yaml, Xml и многое другое.
В новой версии были проведены аудит и обновления кода, улучшена структура проекта и рабочие процессы CI/CD.
👍 Лайки: 3620, 📥 Скачиваний: 54.4К
https://pub.dev/packages/easy_localization

flutter_background_service_android 6.3.1
Используется для работы с фоновыми сервисами в Android-приложениях, созданных с помощью Flutter.
В этом обновлении исправлены проблемы с поддержкой AGP 8.0+ и разрешением Alarms & reminders на Android 12.
👍 Лайки: 27, 📥 Скачиваний: 76.1К
https://pub.dev/packages/flutter_background_service_android

purchases_flutter 9.1.0
Теперь доступна поддержка виртуальной валюты для iOS и Android.
Более 164К скачиваний и 818 лайков.
👍 Лайки: 818, 📥 Скачиваний: 164К
https://pub.dev/packages/purchases_flutter

freeRASP 7.2.1
Этот пакет обеспечивает защиту и мониторинг безопасности мобильных приложений.
В обновлении исправлена проблема с родным фреймворком для iOS.
👍 Лайки: 531, 📥 Скачиваний: 29.8К
https://pub.dev/packages/freeRASP

pro_image_editor 10.5.4
Этот пакет предназначен для редактирования изображений в приложениях Flutter.
В новой версии добавлена функция удаления редактируемых текстовых слоев, если новый текст пустой.
👍 Лайки: 432, 📥 Скачиваний: 25.5К
https://pub.dev/packages/pro_image_editor

tutorial_coach_mark 1.3.1
Этот пакет позволяет создавать красивые и простые туториалы для ваших приложений.
В обновлении добавлена анимация preserve и возможность отключить кнопку "Назад" по умолчанию.
👍 Лайки: 1450, 📥 Скачиваний: 168К
https://pub.dev/packages/tutorial_coach_mark

#flutter #dart #pubdev #FlutterPulse #FlutterPulseBestPackages #easy_localization #flutter_background_service_android #purchases_flutter #freeRASP #pro_image_editor #tutorial_coach_mark
🚀 Архитектура Flutter: Секрет гибкости и масштабируемости!

🔥 Устали от хаоса в коде? В новом видео на нашем канале эксперт Руслан Цицер разбирает ключевую разницу между архитектурой и структурой папок во Flutter — и это не одно и то же!

Почему это важно? Правильная архитектура позволяет:
Менять структуру проекта без боли (feature-first или layer-first — выбор за вами!)
Легко масштабировать приложение
Делать рефакторинг без страха всё сломать
Создавать чистый, поддерживаемый код для командной работы

📺 В видео детально разобрано:
🔹 Реальный проект (Rick and Morty API) с избранным и пагинацией
🔹 Как разделить "монолитный" StatefulWidget на логические слои (data, domain, presentation)
🔹 Практические шаги рефакторинга: от "одной папки" до feature-first структуры
🔹 Важность абстракций (репозитории!) для гибкости
🔹 Работа с зависимостями и state-менеджментом

💡 Главный инсайт:
«При хорошей архитектуре можно использовать ЛЮБУЮ удобную структуру проекта!»

👉 Смотрите разбор + live-кодинг здесь:
Выстроим архитектуру на простом примере и посмотрим разные структуры папок

❤️ Поддержите автора:
👍 Лайкните видео, если полезно!

#Flutter #Dart #FlutterPulse #FlutterPulseTips
🔎 Ищите больше уроков по хэштегу #FlutterPulseYoutube!
Ждём... или используем скелетную анимацию?

При загрузке контента важно сделать ожидание для пользователя максимально комфортным. Есть два основных способа сделать это: использовать стандартный индикатор загрузки или скелетную анимацию.

Индикатор загрузки - простой и понятный способ показать, что контент загружается. Flutter предоставляет встроенный виджет CircularProgressIndicator.adaptive(), который адаптируется под разные платформы.

// Создает индикатор, который является 
// [CupertinoActivityIndicator] на iOS
// [CircularProgressIndicator] на других платформах
CircularProgressIndicator.adaptive();


Для более широких возможностей можно использовать пакеты, такие как:
- sleek_circular_slider
- flutter_spinkit

Скелетная анимация дает пользователю представление о том, какого типа контент загружается (изображение, текст, длинный текст и т.д.). Это воспринимается как более быстрое и плавное.

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

Для реализации скелетной анимации можно использовать пакет better_skeleton.

Оцените новую рубрику и напишите своё мнение в комментарии! 🤔💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #LoadingAnimation #AppDevelopment #FlutterTips
👍1
Обзор пакетов на тему "Изображения" для Flutter и Dart 📸

Image - пакет для загрузки, сохранения и обработки изображений в различных форматах! 📁
Поддерживает форматы: JPG, PNG, GIF, BMP, TIFF и многие другие.
Используется в командной строке, Flutter и веб-приложениях.
👍 Лайки: 1680, 📥 Скачиваний: 3.18М
Последнее обновление: 4 месяца назад
https://pub.dev/packages/image

Extended Image - популярный пакет для Flutter, расширяющий функциональность компонента Image! 📸
Добавляет поддержку кэширования изображений, зума, редактирования и многое другое.
👍 Лайки: 1960, 📥 Скачиваний: 239К
Последнее обновление: 3 месяца назад
https://pub.dev/packages/extended_image

Octo Image - библиотека для показа placeholder'ов, ошибок и преобразования изображений! 🔄
Рекомендуется использовать с CachedNetworkImage версии 2.2.0 или новее.
👍 Лайки: 748, 📥 Скачиваний: 2.3М
Последнее обновление: 11 месяцев назад
https://pub.dev/packages/octo_image

Blur - новый пакет для Flutter, позволяющий легко добавить эффект размытия к виджетам и изображениям! 🔮
Создайте красивые и стильные интерфейсы для ваших приложений.
👍 Лайки: 339, 📥 Скачиваний: 46.8К
Последнее обновление: 3 месяца назад
https://pub.dev/packages/blur

Cached Network Image - пакет для загрузки изображений из интернета и хранения их в кэше! 📈
Экономит трафик и ускоряет загрузку приложения.
👍 Лайки: 6710, 📥 Скачиваний: 2.22М
Последнее обновление: 11 месяцев назад
https://pub.dev/packages/cached_network_image

Flutter SVG - пакет для отрисовки SVG-файлов в Flutter! 🖼️
Легко добавляйте векторные изображения в ваши приложения.
👍 Лайки: 5660, 📥 Скачиваний: 3.25М
Последнее обновление: 38 дней назад
https://pub.dev/packages/flutter_svg

#Image #ExtendedImage #OctoImage #Blur #CachedNetworkImage #FlutterSVG #Flutter #Dart #PubDev #FlutterPulse #FlutterPulseThemedPackages
Новость из surf_flutter:

🔥 Новость для всех любителей Flutter и Dart! 🤩
У меня есть супер-крутая новость для вас! 🤓 Айнура, опытный Flutter-разработчик из Surf, написал статью о том, как оживить поиск с помощью эффекта «пишущей машинки» 📝!
Вы узнаете, как создать необычный виджет, который печатает и стирает подсказки, и даже сможете настроить анимацию 🎥! Это идеальная фича, чтобы сделать ваше приложение еще более интересным и интерактивным 🤩!
Читайте статью и добавляйте новую фичу в свой проект! 👉
Не забудьте подписаться на канал flutterpulse, чтобы быть в курсе всех последних новостей и обновлений в мире Flutter и Dart! 🚀
#flutter #dart #flutterpulse 🚀💻