flutter_image_editor 1.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 83

flutter_image_editor #

A plugin to edit brightness, contrast and rotate the image.

What this plugin does #

It's a plugin to demonstrat how to edit the contrast and the brightness of a image. Work for android and IOS

Example #

See the example file.

The best way to use #

Always try to put compress images, images with a huge size will let the reender effect slow.

0.0.1 #

First version only supports edit the brightness and contrast of images for android, you just have to call PictureEditor.editImage passing the image as Uint8List. Future we will release new funcionalities like a method that receive a file and display a widget with the filters to you and implementation for IOS.

0.0.2 #

Method to rotate the image and some changes in the files names and example.

0.0.3 #

Correcting errors.

0.0.4 #

Release change brightness, contrast and rotate image for IOS.

##1.0.1 Correcting pod error for IOS builds.

#1.1.1 Adjusting the brightness for IOS.

#1.1.2 Changing the description.

#1.2.0 Rotate image for IOS.

example/lib/main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:typed_data';
import 'package:flutter_image_editor/flutter_image_editor.dart';
import 'package:flutter/services.dart';

void main() async {
  ByteData bytes = await rootBundle.load('assets/naruto.jpg');
  final buffer = bytes.buffer;
  var image = buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);

  runApp(WidgetEditableImage(imagem: image));
}

class WidgetEditableImage extends StatefulWidget {
  final Uint8List imagem;

  WidgetEditableImage({
    Key key,
    @required this.imagem,
  }) : super(key: key);

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

class _WidgetEditableImage extends State<WidgetEditableImage> {
  StreamController<Uint8List> _pictureStream;
  double _contrast;
  double _brightness;
  ByteData pictureByteData;
  Uint8List picture;

  @override
  void initState() {
    super.initState();
    _pictureStream = new StreamController<Uint8List>();
    _brightness = 0;
    _contrast = 1;
    pictureByteData = ByteData.view(widget.imagem.buffer);
    picture = pictureByteData.buffer.asUint8List(
        pictureByteData.offsetInBytes, pictureByteData.lengthInBytes);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: containerEditableImage(_pictureStream, picture, _contrast,
              _brightness, setBrightness, setContrast, updatePicutre)),
    );
  }

  void updatePicutre(double contrast, double brightness) async {
    var retorno = await PictureEditor.editImage(picture, contrast, brightness);
    _pictureStream.add(retorno);
  }

  void setBrightness(double valor) {
    setState(() {
      _brightness = valor;
    });
  }

  void setContrast(double valor) {
    setState(() {
      _contrast = valor;
    });
  }
}

Widget rotateImage(Uint8List picture, StreamController picutreStream) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      Text("If you want to rotate the image, use this on sccafold body"),
      Container(
          height: 300,
          width: 300,
          child: StreamBuilder(
            stream: picutreStream.stream,
            builder: (BuildContext context, snapshot) {
              if (snapshot.connectionState == ConnectionState.active) {
                return Image.memory(
                  snapshot.data,
                  gaplessPlayback: true,
                  fit: BoxFit.contain,
                );
              } else {
                return Image.memory(
                  picture,
                  gaplessPlayback: true,
                  fit: BoxFit.contain,
                );
              }
            },
          ),
          padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0)),
      RaisedButton(
        onPressed: () async {
          var retorno = await PictureEditor.rotateImage(picture, 90);
          picutreStream.add(retorno);
        },
      )
    ],
  );
}

Widget containerEditableImage(
    StreamController picutreStream,
    Uint8List picture,
    double contrast,
    double brightness,
    Function setBrightness,
    Function setContrast,
    Function updatePicutre) {
  return Container(
    padding: EdgeInsets.only(top: 50),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Text(
            "If you want to change the brightness and contrast of the image, use this on the body of sccafold"),
        Container(
            height: 300,
            width: 300,
            child: StreamBuilder(
              stream: picutreStream.stream,
              builder: (BuildContext context, snapshot) {
                if (snapshot.connectionState == ConnectionState.active) {
                  return Image.memory(
                    snapshot.data,
                    gaplessPlayback: true,
                    fit: BoxFit.contain,
                  );
                } else {
                  return Image.memory(
                    picture,
                    gaplessPlayback: true,
                    fit: BoxFit.contain,
                  );
                }
              },
            ),
            padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0)),
        Row(
          children: <Widget>[
            Column(
              children: <Widget>[
                Text("Contraste"),
                Slider(
                  label: 'Contraste',
                  min: 0,
                  max: 10,
                  value: contrast,
                  onChanged: (valor) {
                    setContrast(valor);
                    updatePicutre(contrast, brightness);
                  },
                ),
                Text("Brilho"),
                Slider(
                  label: 'Brilho',
                  min: -255,
                  max: 255,
                  value: brightness,
                  onChanged: (valor) {
                    setBrightness(valor);
                    updatePicutre(contrast, brightness);
                  },
                )
              ],
            )
          ],
        ),
      ],
    ),
  );
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_image_editor: ^1.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_image_editor/flutter_image_editor.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
68
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
83
Learn more about scoring.

We analyzed this package on Apr 1, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health issues and suggestions

Document public APIs. (-1 points)

5 out of 5 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test