Обработка ошибок с Future
Catch them all 🎯

Неправильная функция

Future<void> functionInError() async {
  throw "I am failing"; // Выбрасываем ошибку
}

Неправильный способ обработки

functionInError()
  .catchError((err) => print("error catched")) // Перехватываем ошибку
  .then(
    (value) => print("success"), // Успешное выполнение
    onError: (err) => print("I failed"), // Обработка ошибки
  );

// Результат:
// error catched
// success

catchError перехватывает ошибку, но не возвращает её. Поэтому then выведет success вместо "I failed".

Правильный способ обработки

functionInError()
  .catchError((err) { 
    print("error catched"); // Печатаем сообщение об ошибке
    throw err; // Пробрасываем ошибку дальше
  })
  .then(
    (value) => print("success"), // Успешное выполнение
    onError: (err) => print("I failed"), // Обработка ошибки
  );

// Результат:
// error catched
// I failed

Лучше обрабатывать ошибки в колбэке onError. Но если хотите цеплять функции друг за другом, не забудьте пробросить ошибку дальше.

Цепочка нескольких Future и обработка ошибок

void main() {
  functionInError()
    .then((res) => workingFuture()) // Продолжаем цепочку
    .then((res) => print("ended")) // Завершаем цепочку
    .onError((err) => print("error catched")); // Обрабатываем ошибку
}

Future<void> functionInError() async {
  throw "I am failing"; // Выбрасываем ошибку
}

Future<void> workingFuture() async {
  print("working future"); // Печатаем сообщение о работе
}

// Результат:
// error catched

Ошибка передаётся в последний onError.

Или обработка ошибок через try-catch с await

main() async {
  try {
    await functionInError(); // Ждём завершения функции
  } catch (err) {
    print("I failed"); // Обрабатываем ошибку
  }
}

Оцените новую рубрику! 👍💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #Future #ErrorHandling #FlutterTips #MobileDev #CodingTips

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

Зачем сравнивать версии приложения?
Сравнение версий приложения необходимо для того, чтобы убедиться, что пользователи используют последнюю версию вашего приложения. Это важно для обеспечения безопасности, исправления ошибок и добавления новых функций. 🔄

Как сравнить версии приложения?
Для сравнения версий приложения мы будем использовать пакеты package_info_plus и version. Вот пример кода:

// получаем текущую установленную версию приложения
import 'package:package_info_plus/package_info_plus.dart';
// пакет version для сравнения версий
import 'package:version/version.dart';

Future<void> checkAppVersion(Version minVersion) {
  final info = await PackageInfo.fromPlatform();
  final currentVersion = Version.parse(info.version);

  if (currentVersion < minVersion) {
    throw UpdateRequired();
  }
}

В этом примере мы получаем текущую версию приложения, используя PackageInfo.fromPlatform(), а затем сравниваем ее с минимальной требуемой версией, используя класс Version из пакета version. Если текущая версия меньше минимальной, мы бросаем исключение UpdateRequired. 🚀

Вы можете напрямую сравнивать две версии, такие как "1.0.1" и "2.40.1". 👍

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #mobiledevelopment #appdevelopment #codingtips

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

В разработке 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! 👋 Сегодня мы рассмотрим полезный совет по созданию изображения из виджета без его отображения на экране, используя пакет 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

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

В этом совете мы рассмотрим, как использовать 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