Flutter package for image editing

Overview

BC Image Editor

You can edit image using this package and also you can create flex preview image by setting foreground to null. For now, you can use only asset files.

likes MIT

Features

  • Background and Foreground(optional) image
  • Resize images
  • Set x,y position them
  • 3D rotate image image on x, y axis (Foreground only)
  • 2D rotate foreground image
  • Scale for detail view
  • Use on device files or asset files
  • Edit foreground image with gesture detector moves.
    • Size and position.
    • 3D rotate Horizontal and Vertical
    • 2D rotate
    • View mode (Scale)

Getting started

Import:

    import 'package:bc_image_editor/bc_image_editor.dart';

Using:

    BcImageEditor(
            frontImage: "image/path",
            bgImage: "image/path",
            frontWidth: 200,
            frontHeight: 300,
            bgWidth: 300,
            bgHeight: 200, //If one of variable of width and height not setted or set to null, the other one will auto scale
            frontLeft: 10,
            frontTop: 10,
            bgLeft: 10,
            bgTop: 10,
            frontBoxFit: BoxFit.fill,
            bgBoxFit: BoxFit.fill,
            rotateX: 0, //rotateX and y are on 3D axis
            rotateY: 0,
            rotate2D: 0,
        ),


Edit image with gesture detector

Import:

    import 'package:bc_image_editor/edit_with_gesture.dart';

Using:

    EditWithGesture(
      frontImage: frontFilePath,
      bgImage: bgFilePath,
      editMode: EditMode.verticalRotate,
    );

Gesture Editing Modes:

Editing Mode Function
size Resize and change position image.
horizontalRotate Rotate image horizontal on 3D axis.
verticalRotate Rotate image vertical on 3D axis.
rotate2D 2D rotation.
viewMode Zoom image for detail things (it doesn't do any editing).
noEdit Close the editing.

Using from asset folder image


First initialize your path name:

    String imagePath = "";

Then create a async function like below and use it in initState:

    void initFiles() async {
        File tempImg =
            await getImageFileFromAssets("assets/image/path");
        setState(() {
            imagePath = tempImg.path;
        });
  }

Example

For example; you wanna edit image with gesture detector and use image from asset file.

Import edit_with_gesture file

import 'package:bc_image_editor/bc_image_editor.dart';
import 'package:bc_image_editor/edit_with_gesture.dart';
    

Create file paths as variables:

String frontFilePath = "", bgFilePath = "";

Create a async variable to get image files. And get images from asset with "getImageFileFromAssets" function. (If you want use device image you can write path directly).

void initFiles() async {
    File frontTempFile =
        await getImageFileFromAssets("assets/images/example-front.png");
    File tempFileBg = await getImageFileFromAssets("assets/images/example-bg.jpg");
    setState(() {
        frontFilePath = frontTempFile.path;
        bgFilePath = tempFileBg.path;
    });
}

Use this function on initState:

@override
void initState() {
// TODO: implement initState
    super.initState();
    initFiles();
}

Use EditWithGesture widget:

EditWithGesture(
    frontImage: frontFilePath,
    bgImage: bgFilePath,
    editMode: EditMode.verticalRotate,
);

Edit With Gesture Detector Examples:

EditMode.size

EditMode.horizontalRotate

EditMode.verticalRotate

EditMode.rotate2D

EditMode.viewMode

Full Code:

_HomeState(); } class _HomeState extends State { String frontFilePath = "", bgFilePath = ""; void initFiles() async { File frontTempFile = await getImageFileFromAssets("assets/images/char-2.png"); File tempFileBg = await getImageFileFromAssets("assets/images/bg-2.jpg"); setState(() { frontFilePath = frontTempFile.path; bgFilePath = tempFileBg.path; }); } @override void initState() { super.initState(); initFiles(); } @override Widget build(BuildContext context) { return EditWithGesture( frontImage: frontFilePath, bgImage: bgFilePath, editMode: EditMode.verticalRotate, ); } } ">
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:bc_image_editor/bc_image_editor.dart';
import 'package:bc_image_editor/edit_with_gesture.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Test"),
        ),
        body: const Home(),
      ),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String frontFilePath = "", bgFilePath = "";

  void initFiles() async {
    File frontTempFile =
        await getImageFileFromAssets("assets/images/char-2.png");
    File tempFileBg = await getImageFileFromAssets("assets/images/bg-2.jpg");
    setState(() {
      frontFilePath = frontTempFile.path;
      bgFilePath = tempFileBg.path;
    });
  }

  @override
  void initState() {
    super.initState();
    initFiles();
  }

  @override
  Widget build(BuildContext context) {
    return EditWithGesture(
      frontImage: frontFilePath,
      bgImage: bgFilePath,
      editMode: EditMode.verticalRotate,
    );
  }
}

LICENSE

MIT License

You might also like...

A simple and easy flutter demo to crop image

flutter_image_crop A simple demo to crop image on flutter easily. A Chinese version of this document can be found here Flutter_image_crop Plugin will

Jul 8, 2021

A flutter tool to generate beautiful code snippets in the form of an image.

A flutter tool to generate beautiful code snippets in the form of an image.

A flutter tool to generate beautiful code snippets in the form of an image.

Jan 18, 2022

Simple and effective cross platform image saver for flutter, supported web and desktop

Simple and effective cross platform image saver for flutter, supported web and desktop

Oct 5, 2022

Flutter Image Upload From Gallery

Image Upload From Gallery Image upload from gallery to Backend Dependencies image_picker: ^0.8.4+1 http: ^0.13.3 dio: ^4.0.0 Getting Started Image upl

Oct 6, 2021

flutter image demo 主要展示图片与动画处理的案例。比如:网络图片加载、图片预览、图片缩放、json动画处理等等。

flutter image demo 主要展示图片与动画处理的案例。比如:网络图片加载、图片预览、图片缩放、json动画处理等等。

flutter_image_demo flutter image demo 主要展示图片与动画处理的案例。 比如:网络图片加载、图片预览、图片缩放、json动画处理等等。 本项目使用到以下插件: cached_network_image、 photo_view 、 lottie 、 flutter_

Feb 27, 2022

Flutter gallery - Image, Audio, Video & File.

Flutter gallery  - Image, Audio, Video & File.

Flutter Gallery Getting Started For help getting started with Flutter, view our online documentation.

Sep 26, 2022

A Flutter image editor with support for paint, text, filters, emojis, stickers and more

A Flutter image editor with support for paint, text, filters, emojis, stickers and more

Flutter Image Editor Plugin with simple, easy support for image editing using Paints, Text, Filters, Emoji and Sticker like stories.

Dec 22, 2022

Flutter BlurHash - Compact representation of a placeholder for an image.

Flutter BlurHash - Compact representation of a placeholder for an image.

Compact representation of a placeholder for an image. Encode a blurry image under 30 caracters for instant display like used by Medium. Maintainer: @Solido

Dec 30, 2022

Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.

Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.

crop A Flutter package for cropping any widget, not only images. This package is entirely written in Dart and supports Android, iOS, Web and Desktop.

Jan 6, 2023
Owner
Berkay CEYLAN
Frontend supported backend developer. Recently, Flutter and Django and some web frontend :)
Berkay CEYLAN
A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network, zoom pan image, photo view, slide out page, editor(crop,rotate,flip), paint custom etc.

extended_image Language: English| 中文简体 A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network

FlutterCandies 1.6k Dec 31, 2022
A simple Flutter Package to Mimic iMessage Image Picker for Flutter

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

Paras Jain 64 Dec 26, 2022
A flutter package to convert any widget to an Image.

Davinci A package to convert any widget to an image which can be saved locally or can be shared to other apps and chats. ?? Preview ℹ️ Usage Prerequis

Sai Gokula Krishnan 37 Dec 20, 2022
Multi image pixker using the image_picker package in flutter

multi_image_selection A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Ambaliya Avnit Karshanbhai 1 Oct 13, 2021
Flutter Package to Pick Image From Gallery or Camera

image_picker_gallery_camera Flutter Package to Pick Image From Gallery or Camera Getting Started A Flutter plugin for iOS and Android for picking imag

Sayandh KP 8 Oct 5, 2022
A flutter package for image carousels.

flutter_image_carousel A flutter package for image carousels. Supports both Asset and Network images. Example new ImageCarousel( <ImageProvider>[

Theo Bouwman 53 Aug 9, 2021
A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content.

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content. Installation Add dependency to your pubspec.yaml

Anatoly Pulyaevskiy 272 Dec 23, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Flutter Photo View A simple zoomable image/content widget for Flutter. PhotoView enables images to become able to zoom and pan with user gestures such

Fire Slime Games 1.7k Jan 3, 2023
Flutter plugin that allows you to display multi image picker on iOS and Android. 👌🔝🎉

IMPORTANT: This repository has been archived and no longer mantained. As I don't have time anymore to work on the package it became very outdated. For

Radoslav Vitanov 898 Apr 29, 2021
Image caching system for flutter

image_cacheing image_cacheing is an image caching package. It is currently tested for Android applications. ImageCacheing widget takes url as a param.

evolving_kid 3 May 31, 2021