Как создать приложение для обрезки изображений во Flutter?

Flutter — это надежная платформа, которая позволяет разработчикам создавать красивые и отзывчивые мобильные приложения. Изображения являются неотъемлемой частью любого мобильного приложения, и разработчики должны иметь возможность эффективно ими манипулировать. Обрезка изображения — распространенная задача при работе с изображениями, и пакет image_cropper — отличный инструмент для этого. Этот пакет имеет такие функции, как обрезка, масштабирование и поворот изображения. В этой статье мы познакомим вас с процессом выбора и обрезки изображения с помощью пакетов image_cropper и image_picker во Flutter. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Поэтапная реализация

Чтобы начать создание приложения для обрезки изображений во Flutter, нам нужно создать новый проект Flutter. Вот шаги для создания нового проекта Flutter с помощью интерфейса командной строки Flutter:

Шаг 1: Откройте окно терминала и перейдите в каталог, в котором вы хотите создать проект.

Шаг 2: Запустите следующую команду, чтобы создать новый проект Flutter:

flutter create my_image_cropper

Шаг 3: Дождитесь завершения процесса создания проекта. Это создаст новый проект Flutter в каталоге «my_image_cropper».

Установить пакет

Шаг 1: Откройте свой проект Flutter в IDE или редакторе кода по вашему выбору.

Шаг 2. Добавьте image_cropper и image_picker в файл pubspec.yaml в качестве зависимости. Вы можете сделать это, добавив следующую строку в раздел зависимостей:

dependencies:
  image_cropper: ^3.0.1
  image_picker: ^0.8.6+1

Обязательно замените вышеуказанные версии последней доступной версией.

ИЛИ

Откройте окно терминала и перейдите в корневой каталог вашего проекта Flutter. Выполните следующую команду, чтобы добавить вышеуказанные пакеты в качестве зависимости в ваш проект:

flutter pub add image_cropper
flutter pub add image_picker

Шаг 3: Сохраните изменения в файле pubspec.yaml.

Шаг 4: Запустите flutter pub get в своем терминале или интерфейсе командной строки IDE, чтобы загрузить и установить пакеты image_cropper и image_picker и их зависимости.

Шаг 5: Импортируйте пакеты в свой код Dart, добавив следующую строку в начало файла:

import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';

Теперь вы можете использовать в своем коде классы и функции, предоставляемые пакетами image_cropper и image_picker. Обратите внимание, что после добавления новых пакетов в файл pubspec.yaml вам может потребоваться выполнить очистку флаттера и пересобрать приложение, чтобы убедиться, что новые пакеты правильно связаны с вашим проектом.

Выберите изображение

Первым шагом в использовании пакета image_cropper является выбор изображения с помощью пакета image_picker. Вы можете сделать это, используя экземпляр ImagePicker, предоставляемый пакетом image_picker, где вы можете выбрать или выбрать изображение из галереи или камеры по вашему выбору. Он возвращает загруженное изображение в формате XFile. Для этого мы используем функцию _pickImage(). Вот пример того, как выбрать и отобразить изображение во Flutter:

Dart

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';

 

class HomeScreen extends StatefulWidget {

  const HomeScreen({Key? key}) : super(key: key);

 

  @override

  State<HomeScreen> createState() => _HomeScreenState();

}

 

class _HomeScreenState extends State<HomeScreen> {

  File? imageFile;

   

  Future _pickImage() async {

    final pickedImage =

        await ImagePicker().pickImage(source: ImageSource.gallery);

 

    if (pickedImage != null) {

      setState(() {

        imageFile = File(pickedImage.path);

      });

    }

  }

   

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('My Image Editor'),

      ),

      body: Column(

          children: [

            Expanded(

                flex: 3,

                child: imageFile != null

                    ? Container(

                        alignment: Alignment.center,

                        padding: const EdgeInsets.symmetric(vertical: 10),

                        child: Image.file(imageFile!))

                    : const Center(

                        child: Text("Add a picture"),

                      )),

            Expanded(

                child: Center(

              child: Container(

        width: 50,

        height: 50,

        decoration: BoxDecoration(

            color: Colors.black, borderRadius: BorderRadius.circular(10)),

        child: IconButton(

          onPressed: _pickImage,

          icon: Icon(Icons.add),

          color: Colors.white,

                ))

            ))

          ],

        ),

    );

  }

}

В этом примере мы создаем экземпляр ImagePicker для вызова функции pickImage для загрузки изображения из галереи. Мы также можем выбрать изображение из мгновенного захвата, изменив источник на ImageSource.camera вместо ImageSource.gallery. Как только изображение выбрано, мы конвертируем формат XFile в формат File. Затем мы используем setState для обновления переменной imageFile выбранными данными изображения. Мы отображаем выбранное изображение с помощью виджета Image.file. При нажатии кнопки добавления значка запускается средство выбора изображений, чтобы выбрать изображение из галереи.

Обрезать изображение

Теперь, когда мы выбрали изображение с помощью пакета image_picker, давайте посмотрим, как мы можем использовать пакет image_cropper, чтобы обрезать изображение до определенного размера или соотношения сторон, а также поворачивать и масштабировать его. Для этого мы используем функцию _cropImage() для выполнения функций обрезки. Вот пример функции, которую мы будем использовать для реализации функций:

Dart

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:image_cropper/image_cropper.dart';

 

// Add the below function inside your working class

Future _cropImage() async {

    if (imageFile != null) {

      CroppedFile? cropped = await ImageCropper().cropImage(

          sourcePath: imageFile!.path,

          aspectRatioPresets: 

               [

                  CropAspectRatioPreset.square,

                  CropAspectRatioPreset.ratio3x2,

                  CropAspectRatioPreset.original,

                  CropAspectRatioPreset.ratio4x3,

                  CropAspectRatioPreset.ratio16x9

                ]

              

          uiSettings: [

            AndroidUiSettings(

                toolbarTitle: 'Crop',

                cropGridColor: Colors.black,

                initAspectRatio: CropAspectRatioPreset.original,

                lockAspectRatio: false),

            IOSUiSettings(title: 'Crop')

          ]);

 

      if (cropped != null) {

        setState(() {

          imageFile = File(cropped.path);

        });

      }

    }

  }

В этом примере мы используем функцию _cropImage для выполнения функций обрезки. При выполнении этой функции запускается редактор с именем «Обрезка» (или любым другим именем по вашему выбору), в котором вы можете выполнять такие функции, как обрезка, поворот и масштабирование изображения.

Для его использования мы создаем экземпляр ImageCropper и вызываем функциюcropImage с параметрами sourcePath, aspectRatioPresets и uiSettings. Функция cropImage обрезает изображение до указанного размера, как мы определили в наших параметрах aspectRatioPresets, а также поворачивает и масштабирует изображение. Вы можете изменить диалоговое окно, отредактировав параметр uiSettings, а также внести изменения в отношении конкретной платформы, на которой оно используется (например, Android и IOS). Он возвращает CroppedFile, содержащий данные обрезанного изображения. Затем мы используем setState для обновления файла изображения.переменную с преобразованными данными обрезанного изображения в формат файла и отобразите обрезанное изображение с помощью виджета Image.file. Обратите внимание, что существует больше параметров, которые вы можете изучить. Прочтите официальную документацию image_cropper для получения дополнительной информации.

Очистить изображение

После выбора и обрезки нам также необходимо очистить данные выбранного изображения, чтобы работать со следующими выбранными данными изображения. Для этого мы используем функцию _clearImage(). Вот пример функции:

Dart

import 'dart:io';

 

import 'package:flutter/material.dart';

import 'package:image_cropper/image_cropper.dart';

import 'package:image_picker/image_picker.dart';

 

// Add the below function to your working class

void _clearImage() {

    setState(() {

      imageFile = null;

    });

  }

В этом примере мы используем setState для обновления imageFile до нуля.

Полный рабочий код

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

Dart

import 'dart:io';

 

import 'package:flutter/material.dart';

import 'package:image_cropper/image_cropper.dart';

import 'package:image_picker/image_picker.dart';

 

class HomeScreen extends StatefulWidget {

  const HomeScreen({Key? key}) : super(key: key);

 

  @override

  State<HomeScreen> createState() => _HomeScreenState();

}

 

class _HomeScreenState extends State<HomeScreen> {

  File? imageFile;

 

  Future _pickImage() async {

    final pickedImage =

        await ImagePicker().pickImage(source: ImageSource.gallery);

 

    if (pickedImage != null) {

      setState(() {

        imageFile = File(pickedImage.path);

      });

    }

  }

 

  Future _cropImage() async {

    if (imageFile != null) {

      CroppedFile? cropped = await ImageCropper().cropImage(

          sourcePath: imageFile!.path,

          aspectRatioPresets: 

               [

                  CropAspectRatioPreset.square,

                  CropAspectRatioPreset.ratio3x2,

                  CropAspectRatioPreset.original,

                  CropAspectRatioPreset.ratio4x3,

                  CropAspectRatioPreset.ratio16x9

                ]

              

          uiSettings: [

            AndroidUiSettings(

                toolbarTitle: 'Crop',

                cropGridColor: Colors.black,

                initAspectRatio: CropAspectRatioPreset.original,

                lockAspectRatio: false),

            IOSUiSettings(title: 'Crop')

          ]);

 

      if (cropped != null) {

        setState(() {

          imageFile = File(cropped.path);

        });

      }

    }

  }

 

  void _clearImage() {

    setState(() {

      imageFile = null;

    });

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(

            backgroundColor: Colors.black,

            title: const Text("Crop Your Image")),

        body: Column(

          children: [

            Expanded(

                flex: 3,

                child: imageFile != null

                    ? Container(

                        alignment: Alignment.center,

                        padding: const EdgeInsets.symmetric(vertical: 10),

                        child: Image.file(imageFile!))

                    : const Center(

                        child: Text("Add a picture"),

                      )),

            Expanded(

                child: Center(

              child: Row(

                mainAxisAlignment: MainAxisAlignment.spaceAround,

                children: [

                  _buildIconButton(icon: Icons.add, onpressed: _pickImage),

                  _buildIconButton(icon: Icons.crop, onpressed: _cropImage),

                  _buildIconButton(icon: Icons.clear, onpressed: _clearImage),

                ],

              ),

            ))

          ],

        ));

  }

 

  Widget _buildIconButton(

      {required IconData icon, required void Function()? onpressed}) {

    return Container(

        width: 50,

        height: 50,

        decoration: BoxDecoration(

            color: Colors.black, borderRadius: BorderRadius.circular(10)),

        child: IconButton(

          onPressed: onpressed,

          icon: Icon(icon),

          color: Colors.white,

        ));

  }

}

Заключение

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