Отслеживание видимости клавиатуры
Без каких-либо плагинов 😉

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

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

Решение:
Для отслеживания состояния клавиатуры мы можем использовать виджет KeyboardVisibility, который не требует установки дополнительных плагинов.

import 'package:flutter/material.dart';

// состояние клавиатуры
enum KeyboardVisibilityState { visible, hidden }

// определение функции слушателя
typedef OnKeyboardStateChanged = void Function(KeyboardVisibilityState state);

// stateful виджет для отслеживания изменения видимости клавиатуры
class KeyboardVisibility extends StatefulWidget {
  final Widget child;
  final OnKeyboardStateChanged onKeyboardStateChanged;

  const KeyboardVisibility({
    super.key,
    required this.child,
    required this.onKeyboardStateChanged,
  });

  @override
  State<KeyboardVisibility> createState() => _KeyboardVisibilityState();
}

class _KeyboardVisibilityState extends State<KeyboardVisibility> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    checkState();
  }

  void checkState() {
    final value = WidgetsBinding.instance.platformDispatcher.views.first.viewInsets.bottom;
    switch (value != 0.0) {
      case true:
        widget.onKeyboardStateChanged(KeyboardVisibilityState.visible);
      case false:
        widget.onKeyboardStateChanged(KeyboardVisibilityState.hidden);
    }
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

Использование:
Виджет KeyboardVisibility можно использовать следующим образом:

KeyboardVisibility(
  onKeyboardStateChanged: (state) => _showOrHideBottomAction(state),
  child: Form(...),
)

Оцените новую рубрику и напишите свое мнение в комментариях! 👍

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #UIUX #CodingTips #AppDev #DevTips

Создание изображения из виджета

Привет, Flutter-разработчики! 👋 Сегодня мы рассмотрим интересную и полезную тему: создание изображения из любого виджета в вашем приложении. 📸✨

Шаг 1: Добавьте RepaintBoundary поверх виджета, который хотите экспортировать

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

final GlobalKey _repaintBoundaryKey = GlobalKey();

RepaintBoundary(
  key: _repaintBoundaryKey,
  child: CustomPaint(
    painter: MyPainter(),
    ...
  ),
)

Этот ключ позволит нам найти объект рендеринга и вызвать метод toImage. 📚 Для более глубокого понимания можно изучить, что такое Widget tree, Element tree и RenderObject tree.

Шаг 2: Вызовите метод для экспорта изображения в галерею телефона

Теперь напишем функцию, которая будет экспортировать изображение:

import 'package:image_gallery_saver/image_gallery_saver.dart';

Future<void> exportImage() async {
  try {
    RenderRepaintBoundary boundary = _repaintBoundaryKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
    ui.Image image = await boundary.toImage(pixelRatio: 3.0);
    ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData!.buffer.asUint8List();

    final directory = await getDownloadsDirectory();
    final imgName = 'myapp-${DateTime.now().microsecondsSinceEpoch}';
    final result = await ImageGallerySaver.saveImage(pngBytes, quality: 100, name: imgName);

    if (result['isSuccess']) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Изображение экспортировано')),
      );
    }
  } catch (e) {
    // Обработайте ошибку (покажите сообщение пользователю, сохраните отчет о сбое)
  }
}

Мы используем пакет image_gallery_saver, чтобы сохранить изображение в галерею телефона. 📁📸

Оцените новую рубрику и напишите в комментариях, что хотите видеть в следующих постах! 💬

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #AppDev #CodingTips #UIUX #FlutterTips

🚀 Архитектура Flutter-приложения: Управление зависимостями и жизненным циклом с yx_scope

Привет, Flutter-энтузиасты! 👋 Сегодня делимся суперполезным видео, которое перевернет ваше представление о Dependency Injection (DI) и управлении жизненным циклом в Flutter. Не пропустите разбор библиотеки yx_scope от эксперта Яндекс.Практикума! 💡

👉 Смотреть видео

🔥 Почему это важно?
Устали от:
- Громоздкого кода внедрения зависимостей?
- Проблем с масштабированием модулей?
- "Утечек" памяти из-за неправильного жизненного цикла?

yx_scope решает эти боли! Библиотека:
✅ Гарантирует безопасность DI на этапе компиляции
✅ Работает без генерации кода
✅ Управляет жизненным циклом компонентов "из коробки"
✅ Интегрируется с виджетами Flutter

🎯 Что в видео?
На примере интернет-магазина разбираем:
- Внедрение зависимостей без boilerplate-кода
- Структурирование приложения с независимыми фича-модулями
- Контроль состояния на разных экранах
- Организацию жизненного цикла при навигации
- Сравнение с Kiwi, Injector, Auto Injector, Riverpod, Get_it, и YX_Scope

💡 Вы узнаете:
- Как избежать "мучительно больно" при связывании компонентов (© Дмитрий Золотов)
- Почему глобальные синглтоны — не панацея
- Когда yx_scope выигрывает у аналогов

🚀 Автор: Дмитрий Золотов и Сергей Кольцов (Яндекс-ПРО, Flutter разработчики).

👉 Не просто смотрите — внедряйте! Готовые решения из видео можно сразу применять в своих проектах.

💬 P.S. Любите Flutter? Подписывайтесь на канал → Flutter Pulse! Еще больше лайфхаков ищите по хэштегу #FlutterPulseYoutube

#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube #yxscope #yx_scope

🚀 Изоляты в Dart: Глубокое Погружение в Параллельный Мир!

Привет, Flutter-энтузиасты! 👋 Сегодня мы делимся 🔥горячим видео, которое перевернет ваше представление о многозадачности в Dart. Глеб (@Gleb) на Школе Мобильной Разработки 2025 детально разобрал изоляты — мощный инструмент для параллельных вычислений!

🔍 Что внутри?
👉 Основы параллелизма в Dart: Узнаете, почему Dart называют "однопоточным, но с оговорками".
👉 Секреты изолятов: Как они устроены в Dart VM, группы изолятов и их жизненный цикл.
👉 Практика: Создание изолятов, обмен сообщениями через порты, обработка ошибок.
👉 Flutter-специфика: Работа с Platform Channels, FFI и Background Isolates (да-да, даже в Flutter 3.7+!).
👉 Опасные грабли: Распространенные ошибки и оптимизация производительности.

💡 Почему это важно?
Хотите, чтобы UI не лагал при тяжелых вычислениях? Мечтаете распараллелить обработку изображений или JSON? Это видео — ваш ключ к решению! Глеб наглядно показывает, как избежать EventLoop и повысить отзывчивость приложений.

🎯 Смотрите и учитесь:
Изоляты в Dart — ШМР Flutter 2025

💬 "Теперь я понимаю, почему изоляты — не потоки, а акторная модель рулит!" — вот лишь один из отзывов. Не упустите шанс прокачаться!

👉 Подписывайтесь на Flutter Pulse — каждый день новые лайфхаки, туториалы и разборы. Ищите другие видео по хэштегу #FlutterPulseYoutube!

#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube

Создаём изображение из виджета с помощью пакета

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

Шаг 1: Установка пакета screenshot
Для начала необходимо установить пакет screenshot. Для этого добавьте следующую строку в файл pubspec.yaml и выполните команду flutter pub get:

import 'package:screenshot/screenshot.dart';

Шаг 2: Создание изображения из виджета
Теперь вы можете создать изображение из любого виджета, указав его размер и соотношение пикселей. Вот пример кода:

final controller = ScreenshotController();
final imgBytes = await controller.captureFromWidget(
  widget, // ваш виджет
  targetSize: const Size(320, 520), // размер изображения
  pixelRatio: 3, // соотношение пикселей
);

Этот код позволяет вам программно создавать изображения любых виджетов, что может быть полезно для различных задач, например, для создания скриншотов или генерации контента. 📱💻

Оцените нашу новую рубрику и оставьте свои комментарии! 💬 Нам важно ваше мнение. 👍

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #FlutterTips #CodingTips #AppDevelopment

🔥 Git: как большие команды пишут код вместе

Привет, коллеги! 👋 Работать в одиночку — одно дело. Но когда над проектом трудится целая команда, всё меняется! 💼✨ Как синхронизировать код, избежать хаоса и не мешать друг другу? Ответ — в новом полезном видео!

🚀 Что внутри?
👉 Системы контроля версий (спасибо, Git!) — ваш щит от хаоса.
👉 Базовые команды для повседневной работы: коммиты, ветвление, слияние.
👉 Рабочие процессы в больших командах: от пул-реквестов до CI/CD.
👉 Реальные кейсы: как избежать конфликтов и сохранить историю кода чистой.
👉 Фишки для профессионалов: ребейс, теги и секреты эффективного код-ревью.

💡 Почему это must-watch?
Видео — не сухая теория! Автор (технический руководитель платформы Sourcecraft) показывает всё на практике, объясняет сложное простыми словами и делится опытом Яндекса. Вы узнаете:
- Как работать с Git, даже если интернет «умер» 🚇
- Почему ветки должны жить недолго ⏳
- Зачем нужны осмысленные коммиты (и как они спасают в будущем!) 🔍

🎬 Смотрите и учитесь:
👉 Git: как большие команды пишут код вместе

💬 «Понимание Git — не про запоминание команд, а про ментальную карту работы системы» — главный посыл ролика.

🔔 Хотите больше полезного?
Подписывайтесь на канал и ищите другие видео по хэштегу #FlutterPulseYoutube! Новые лайфхаки — каждую неделю.

#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube

Рисуем текст на холсте
Холст - это интерфейс для рисования непосредственно на экране 🤩

В этом совете мы рассмотрим, как использовать CustomPaint и TextPainter для рисования текста на холсте во Flutter. Это полезно для создания пользовательских виджетов и сложных визуализаций 🎨

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

// Класс виджета, который рисует текст на холсте
class TextOnCanvas extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Текст на холсте')),
      body: CustomPaint(
        painter: TextPainterExample(),
        child: Container(),
      ),
    );
  }
}

// Класс, который расширяет CustomPainter для рисования текста
class TextPainterExample extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Определяем стиль текста
    final textStyle = TextStyle(
      color: Colors.black,
      fontSize: 40,
    );

    // Создаем TextSpan с текстом и стилем
    final textSpan = TextSpan(
      text: 'Привет, холст!',
      style: textStyle,
    );

    // Создаем TextPainter для рисования текста
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: ui.TextDirection.ltr,
    );

    // Вычисляем размер текста
    textPainter.layout();

    // Определяем позицию, где будет нарисован текст
    final offset = Offset(50, 100);

    // Рисуем текст на холсте в указанной позиции
    textPainter.paint(canvas, offset);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Оцените новую рубрику и напишите в комментариях, какие темы вам наиболее интересны! 💬👍
Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #CodingTips

🚀 Flutter-архитектура: как избежать хаоса в проектах? Смотрите лекцию от Яндекс Маркета!

Привет, коллеги! Только что наткнулся на 🔥горячее видео, которое перевернёт ваше представление о проектировании приложений. Лектор Саша из команды Яндекс Маркета на Школе мобильной разработки 2025 разложил по полочкам всё, о чем мы часто спорим в кулуарах.

✨ Почему стоит посмотреть?
▫️ Архитектура ≠ холивар — автор честно предупреждает: нет "серебряной пули", но есть работающие принципы
▫️ SOLID, DRY, KISS — не просто буквы, а инструменты выживания в больших проектах
▫️ State-менеджмент на практике — сравнение 6 подходов (от setState до Riverpod) на живом ToDo-приложении
▫️ Ошибки, которые дорого стоят — например, почему циклические зависимости в DI могут "убить" ваше приложение

💡 Особенно зацепило:
"Архитектура — это про будущее. Если думать только о 'здесь и сейчас', бизнес вас быстро заменит". Автор показывает, как проектировать системы, которые:
✅ Легко масштабируются
✅ Позволяют быстро добавлять фичи
✅ Упрощают онбординг новых разработчиков

📽 Полная версия лекции с живыми примерами кода, сравнением Bloc vs Provider и демкой работы с DI:
Flutter-архитектура — ШМР Flutter 2025

👉 P.S. Хотите больше практики? Ищите другие полезные ролики по хэштегу #FlutterPulseYoutube в нашем канале! Подписывайтесь, чтобы не пропустить разборы сложных кейсов.

#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube

🔍 Детали видео: Лекция разделена на 2 части (теория + практика), упоминаются Clean Architecture, MVC/MVVM, Dependency Injection, Backend-Driven UI. Автор акцентирует: слепое следование SOLID так же вредно, как и полный хаос в коде.

Приостановка потока, когда нет подписчиков

Не теряйте события, когда некому их слушать 😉

В Flutter и Dart при работе с потоками (Stream) важно уметь правильно управлять подпиской и событиями. Один из полезных советов - приостанавливать поток, когда нет подписчиков, чтобы не терять важные события.

Пример реализации:

// Этот класс отвечает за рассылку уведомлений приложению
// Он также отвечает за прослушивание уведомлений
class AppEventsDispatcher {
  final StreamController<AppEvent> _controller;
  late final Stream<AppEvent?> _stream;

  Stream<AppEvent?> get stream => _stream;

  final List<AppEvent> _onNotificationEventsSubscriber;

  AppEventsDispatcher()
      : _onNotificationEventsSubscriber = [],
        _controller = StreamController() {
          _stream = _controller.stream.asBroadcastStream(
            onCancel: (c) => c.pause(),
            onListen: (el) {
              if (el.isPaused) {
                el.resume();
              }
            },
          );
        }

  void dispose() {
    _onNotificationEventsSubscriber.clear();
    _controller.close();
  }

  void publish(AppEvent event) {
    _controller.add(event);
  }
}

final dispatcher = AppEventsDispatcher();
// Публикуем событие
dispatcher.publish(AppEvent('Новое уведомление'));
// Ждём немного
await Future.delayed(Duration(seconds: 1));
// Подписываемся на поток
final subscription = dispatcher.stream.listen((event) {
  print('Получено событие: $event'); 
  // так как мы приостановили поток, мы получим события
});

В этом примере мы создаём класс AppEventsDispatcher, который управляет потоком событий AppEvent. Когда нет подписчиков, поток приостанавливается, а при появлении нового подписчика - возобновляется с последнего события.

👍 Оцените нашу новую рубрику FlutterPulseTips и напишите в комментариях, что хотите видеть в следующих постах! 🤔

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #StreamManagement #AppDevelopment #CodingTips

🚀 Глубокое погружение в Router и диплинки Flutter 2025!

Привет, Flutter-энтузиасты! 👋 Только что наткнулся на 🔥суперполезное видео от Шакири Аваса (Flutter-разработчик из Яндекс Pro), которое перевернет ваше представление о навигации в приложениях. Если вы хотите освоить Router и диплинки — это must-watch!

📺 О чём видео?
👉 Router vs Navigator 1.0: Почему старый подход устарел и как Router решает его проблемы.
👉 Диплинки на практике: Настройка глубоких ссылок под Android, iOS и особенности Flutter Web 🌐.
👉 Nested Navigation: Как сохранять состояние вложенных экранов (например, в табах).
👉 Guard-логика: Защита роутов для авторизованных пользователей.
👉 Реальный кейс: Пошаговая реализация приложения с маршрутизацией «под ключ».

💡 Почему стоит посмотреть?
«Разбор такой детализированный, что даже новички поймут, а опытные найдут нюансы для своих проектов». Автор не просто объясняет теорию — он показывает код, тестирует решения и делится фишками, которых нет в документации!

🔗 Смотрите видео здесь:
Router и прямые ссылки в приложении — ШМР Flutter 2025

👇 Не пропустите!
Это ваш шанс прокачать скиллы в навигации — тема критически важная для сложных приложений. После просмотра вы сможете:
✔️ Настраивать диплинки за минуты,
✔️ Оптимизировать переходы между экранами,
✔️ Избежать типичных ошибок в Router.

👉 Подписывайтесь на Flutter Pulse, чтобы не пропустить новые полезные материалы! Исследуйте другие видео по хэштегу #FlutterPulseYoutube.

#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube

Автоматическое перерисовывание холста с помощью ChangeNotifier

Привет, подписчики! 👋 Сегодня мы рассмотрим полезный совет по Flutter, который поможет вам оптимизировать процесс отрисовки пользовательского интерфейса. 📱💻

Вы когда-нибудь сталкивались с ситуацией, когда ваш CustomPainter не обновлялся автоматически при изменении данных? 🤔 Это может быть раздражающим, особенно когда вы работаете с динамическим содержимым. Но не волнуйтесь, у нас есть решение! 😊

Использование ChangeNotifier для автоматического обновления

Один из способов обеспечить автоматическое перерисовывание холста — использовать ChangeNotifier. Давайте разберемся, как это работает: 🔍

class WaveModel extends ChangeNotifier {
  // ...
  void notify() => notifyListeners(); // Уведомляем слушателей об изменении
}

class WorldPainter extends CustomPainter {
  final WaveModel model;

  WorldPainter({required this.model}) : super(repaint: model);

  @override
  bool shouldRepaint(covariant WorldPainter oldDelegate) => false;
}

В этом примере WaveModel расширяет ChangeNotifier и уведомляет своих слушателей при вызове метода notify(). 🔔

WorldPainter, который расширяет CustomPainter, принимает WaveModel в качестве параметра и передает его в конструктор суперкласса с параметром repaint. 🔄 Это означает, что всякий раз, когда WaveModel уведомляет своих слушателей, WorldPainter будет перерисовываться автоматически. 🎨

Преимущества этого подхода

* Автоматическое обновление холста при изменении данных 🔄
* Упрощение кода за счет использования встроенных механизмов Flutter 📚
* Повышение производительности приложения за счет оптимального управления отрисовкой 🚀

Оцените новую рубрику и напишите в комментариях, какие темы вам наиболее интересны! 👇

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #CodingTips #AppDevelopment

🚀 Глубокое погружение в хранение данных во Flutter: от Shared Preferences до ObjectBox!

Привет, Flutter-энтузиасты! Сегодня у нас суперполезное видео, которое точно стоит вашего внимания. Речь о надежном хранении данных — ключевом аспекте для любого приложения. Лектор Дмитрий (Яндекс Pro) на примере MoodTracker++ разбирает все тонкости Persistence.

🔥 Что внутри?
👉 Основные подходы:
- Shared Preferences для простых настроек (тема, счетчики).
- Secure Storage для токенов и паролей (аппаратное шифрование!).
- Работа с файлами (фото, CSV-экспорт) через path_provider.
- NoSQL: ObjectBox и Realm для сложных объектов.
- SQL-решения: Drift с миграциями и транзакциями.
- Облака: Firebase и Supabase для синхронизации.

💡 Фишки:
- Как выбрать инструмент под задачу?
- Тестирование хранилищ: моки, подмена путей.
- Offline-first архитектура: чтобы приложение не «забывало» данные.
- GDPR-совместимость: очистка данных по запросу.

📌 Практика:
На примере MoodTracker++ вы увидите:
- Сохранение настроек, записей, фото.
- Экспорт статистики в CSV.
- Синхронизацию между устройствами.

👉 Смотрите запись лекции с живыми примерами кода и лайфхаками от эксперта:
Хранение данных (Persistence) — ШМР Flutter 2025

💬 «Если приложение не хранит данные — оно как кот, который всё забывает. Наша цель — чтобы пользователь чувствовал заботу!» (Дмитрий, Яндекс Pro)

🔔 Подписывайтесь на Flutter Pulse — каждый день актуальные туториалы, кейсы и новости! Ищите другие видео по хэштегу #FlutterPulseYoutube.

#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube

Flutter Canvas: что делают canvas.save() и canvas.restore()?

Привет, разработчики Flutter! 👋 Сегодня мы рассмотрим важный аспект работы с Canvas во Flutter - методы save() и restore(). Эти методы крайне полезны при создании сложных графических элементов и анимаций. 🔍

Когда вы работаете с Canvas, вы часто выполняете различные трансформации, такие как вращение, масштабирование или перемещение. Эти трансформации изменяют текущее состояние Canvas, и иногда вам нужно временно сохранить это состояние, чтобы позже вернуться к нему. Именно здесь на помощь приходят save() и restore(). 🔄

canvas.save() сохраняет текущее состояние Canvas, включая все примененные трансформации и настройки отрисовки. Это позволяет вам временно изменить состояние Canvas, выполнив необходимые операции, а затем вернуться к сохраненному состоянию с помощью canvas.restore().

Рассмотрим пример кода:

class WorldPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.save(); // сохраняем текущее положение
    canvas.translate(size.width/2, size.height/2); // перемещаемся в центр
    ...
    canvas.drawLine(Offset(0, 0), model.offset, whitePainter); // выполняем необходимые действия
    canvas.restore(); // сбрасываем до последнего сохраненного положения
  }
}

В этом примере мы сохраняем текущее состояние Canvas перед тем, как переместиться в центр экрана. После выполнения необходимых операций мы восстанавливаем сохраненное состояние, возвращая Canvas в исходное положение.

Использование save() и restore() позволяет вам создавать сложные графические элементы, сохраняя чистоту и управляемость кода. 💻

Оцените нашу новую рубрику и оставьте свои комментарии! 💬 Все подобные новости вы можете найти по хэштегу #FlutterPulseTips. Не забудьте подписаться и следить за новыми советами и трюками! 😉

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #CanvasTips #FlutterTips #ProgrammingTips