📷 Реализация вставки изображений из буфера обмена в Flutter: кроссплатформенная демонстрация с PasteSnap

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Сложности с вставкой изображений в Flutter? Узнайте, как я создал кроссплатформенную демонстрацию с использованием MethodChannel и BLoC для вставки изображений из буфера обмена 🚀

Введение

Flutter отлично подходит для кроссплатформенных приложений, но его класс Clipboard поддерживает только текст, а не изображения. Для проекта мне нужно было, чтобы пользователи могли вставлять изображения в интерфейс чата — распространённая функция в мессенджерах. Поскольку у Flutter нет нативной поддержки, я использовал MethodChannel для интеграции кода, специфичного для iOS и Android. Чтобы продемонстрировать это, я создал PasteSnap, демонстрационное приложение, сосредоточенное на вставке изображений из буфера обмена в интерфейсе, похожем на чат.

Проблема: Буфер обмена Flutter поддерживает только текст

Класс Clipboard в Flutter (из пакета package:flutter/services) отлично справляется с текстом, но не поддерживает изображения. Мне нужно было реализовать вставку изображений в интерфейс чата, как в WhatsApp, чего Flutter не может сделать нативно. Я решил эту проблему, используя нативные API для iOS и Android, подключённые к Flutter через MethodChannel. Чтобы продемонстрировать это, не раскрывая основной проект, я создал PasteSnap — минимальное приложение, сосредоточенное на вставке изображений из буфера обмена.

Решение: Нативная интеграция с MethodChannel

Подход включает три ключевых компонента:

• iOS: Получение изображений из буфера обмена с использованием UIPasteboard в AppDelegate.swift.
• Android: Доступ к изображениям из буфера обмена с использованием ClipboardManager в MainActivity.kt.
• Flutter: Использование MethodChannel для связи между нативным слоем и слоем Dart, интеграция функции в ChatBloc и ChatScreen.

Это кроссплатформенное решение обеспечивает бесперебойную работу функции как на iOS, так и на Android, как показано в PasteSnap.

Пошаговая реализация

Настройка проекта Flutter

Я настроил проект Flutter с следующими зависимостями в pubspec.yaml. Эти пакеты предоставляют инструменты, необходимые для управления состоянием и работы с файлами.

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.1.0
  equatable: ^2.0.0
  path_provider: ^2.1.5

• flutter_bloc и equatable для реализации шаблона BLoC для управления состоянием.
• path_provider помогает с доступом к файловой системе (хотя в приведённых фрагментах он не используется напрямую, он является частью полного проекта).

Шаг 1: Определение MethodChannel в Flutter

В вашем проекте Flutter определите MethodChannel в классе ChatBloc. Этот канал будет использоваться для связи с нативным кодом для получения изображений из буфера обмена.

import 'dart:typed_data';
import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/services.dart';

part 'chat_bloc_event.dart';
part 'chat_bloc_state.dart';

class ChatBloc extends Bloc<ChatEvent, ChatState> {
  static const _imageChannel = MethodChannel('clipboard/image');

  ChatBloc() : super(const ChatState(text: '')) {
    on<PasteImageEvent>(_onPasteImage);
    on<UpdateTextEvent>(_onUpdateText);
    on<SendMessageEvent>(_onSendMessage);
  }

  Future<void> _onPasteImage(PasteImageEvent event, Emitter<ChatState> emit) async {
    try {
      final imageData = await _imageChannel.invokeMethod('getClipboardImage');
      if (imageData != null && imageData is Uint8List) {
        emit(ChatState(
          text: state.text,
          previewImage: imageData,
          messages: state.messages,
        ));
      } else {
        print('No image data found in clipboard');
      }
    } catch (e) {
      print('Failed to get clipboard image: $e');
    }
  }
}

Пояснение:

• Канал _imageChannel определён как MethodChannel для связи с нативным слоем.
• В _onPasteImage вызывается метод getClipboardImage, ожидается Uint8List (данные изображения). При успешном выполнении обновляется previewImage в состоянии.

Шаг 2: Реализация для iOS (AppDelegate.swift)

В AppDelegate.swift настройте обработчик вызовов методов для прослушивания вызовов методов из Flutter. Когда вызывается метод getClipboardImage, извлекайте изображение из буфера обмена и возвращайте его в виде массива байтов.

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        let controller = window?.rootViewController as! FlutterViewController
        let imageChannel = FlutterMethodChannel(name: "clipboard/image",
                                                binaryMessenger: controller.binaryMessenger)
        imageChannel.setMethodCallHandler { [weak self] (call, result) in
            if call.method == "getClipboardImage" {
                self?.getClipboardImage(result: result)
            } else {
                result(FlutterMethodNotImplemented)
            }
        }
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    private func getClipboardImage(result: FlutterResult) {
        if let image = UIPasteboard.general.image,
           let data = image.jpegData(compressionQuality: 0.9) {
            result(data)
        } else {
            result(nil)
        }
    }
}

Объяснение:

• UIPasteboard.general.image проверяет, содержит ли буфер обмена изображение.
• Если изображение найдено, оно преобразуется в JPEG-данные с качеством сжатия 0.9 для уменьшения размера.
• Массив байтов (Data) возвращается в Flutter через result. Если изображение отсутствует, возвращается nil.

Шаг 3: Реализация для Android (MainActivity.kt)

В MainActivity.kt настройте обработчик вызовов методов для прослушивания вызовов методов из Flutter. Когда вызывается метод getClipboardImage, извлекайте изображение из буфера обмена и возвращайте его в виде массива байтов.

package com.example.paste_snap_demo

import android.content.ClipboardManager
import android.content.Context
import android.graphics.Bitmap
import android.net.Uri
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import java.io.ByteArrayOutputStream

class MainActivity : FlutterActivity() {
    private val CHANNEL = "clipboard/image"

    override fun configureFlutterEngine(flutterEngine: io.flutter.embedding.engine.FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)
            .setMethodCallHandler { call, result ->
                if (call.method == "getClipboardImage") {
                    val imageBytes = getClipboardImage()
                    if (imageBytes != null) {
                        result.success(imageBytes)
                    } else {
                        result.success(null)
                    }
                } else {
                    result.notImplemented()
                }
            }
    }

    private fun getClipboardImage(): ByteArray? {
        val clipboard = getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
        if (!clipboard.hasPrimaryClip()) {
            return null
        }

        val clipData = clipboard.primaryClip
        if (clipData != null && clipData.itemCount > 0) {
            val item = clipData.getItemAt(0)
            val uri = item.uri

            if (uri != null) {
                try {
                    val inputStream = contentResolver.openInputStream(uri)
                    val bitmap = android.graphics.BitmapFactory.decodeStream(inputStream)
                    inputStream?.close()
                    if (bitmap != null) {
                        val stream = ByteArrayOutputStream()
                        bitmap.compress(Bitmap.CompressFormat.JPEG, 90, stream)
                        val byteArray = stream.toByteArray()
                        bitmap.recycle()
                        stream.close()
                        return byteArray
                    }
                } catch (e: Exception) {
                    e.printStackTrace()
                    return null
                }
            }
        }
        return null
    }
}

Объяснение:

• ClipboardManager проверяет, содержит ли буфер обмена основной клип.
• Если найден клип с URI, он преобразуется в Bitmap с использованием contentResolver.
• Битмап сжимается в JPEG с качеством 90% и возвращается в виде массива байтов. Если изображение отсутствует, возвращается null.

Шаг 4: Обновление интерфейса Flutter

В chat_screen.dart, обновите интерфейс для обработки вставки изображений через пользовательское контекстное меню в TextField, и метод _handlePaste, который запускает действие вставки изображения. Вот соответствующая часть интерфейса:

// Метод для обработки механизма вставки
void _handlePaste() {
  context.read<ChatBloc>().add(PasteImageEvent());
}

// TextField с пользовательским контекстным меню для вставки
TextField(
  controller: _messageController,
  decoration: const InputDecoration(
    hintText: 'Введите сообщение...',
    border: InputBorder.none,
    hintStyle: TextStyle(
      color: PasteSnapColors.textSecondary,
      fontSize: 15,
    ),
    contentPadding: EdgeInsets.symmetric(vertical: 10),
  ),
  maxLines: 5,
  minLines: 1,
  style: const TextStyle(
    color: PasteSnapColors.textPrimary,
    fontSize: 15,
  ),
  textCapitalization: TextCapitalization.sentences,
  contextMenuBuilder: (context, editableTextState) {
    return AdaptiveTextSelectionToolbar.buttonItems(
      anchors: editableTextState.contextMenuAnchors,
      buttonItems: [
        ContextMenuButtonItem(
          label: 'Вставить',
          onPressed: () {
            ContextMenuController.removeAny();
            _handlePaste();
          },
        ),
      ],
    );
  },
),

Объяснение:

• Метод _handlePaste: Отправляет событие PasteImageEvent в ChatBloc, который затем обрабатывает извлечение изображения из буфера обмена через MethodChannel.
• Контекстное меню TextField: Свойство contextMenuBuilder настраивает контекстное меню TextField, добавляя в него опцию Вставить, которая вызывает _handlePaste() при нажатии.
• Примечание: Свойство hintText динамически изменяется в зависимости от наличия предварительного просмотра изображения (не показано здесь для краткости, но доступно на GitHub).

Визуализация результата

Посмотрите, как работает PasteSnap:

Вывод: Мы справились! 🎉 Вперёд! 🚀

Реализация вставки изображений из буфера обмена в Flutter с использованием MethodChannel и BLoC была увлекательной задачей. PasteSnap демонстрирует, как эта функция может улучшить приложения с потребностью в обмене изображениями, при этом сохраняя чистую архитектуру. Посмотрите полный код в репозитории GitHub , попробуйте его и напишите свои мысли в комментариях — я не могу дождаться вашего ответа! 💬

Репозиторий кода

Изучите полный код PasteSnap на GitHub: PasteSnap GitHub