A flutter package for iOS and Android for applying filter to an image

Related tags

Media photofilters
Overview

Photo Filters package for flutter

A flutter package for iOS and Android for applying filter to an image. A set of preset filters are also available. You can create your own filters too.

Installation

First, add photofilters and image as a dependency in your pubspec.yaml file.

iOS

No configuration required - the plugin should work out of the box.

Android

No configuration required - the plugin should work out of the box.

Example

getImage(context), tooltip: 'Pick Image', child: new Icon(Icons.add_a_photo), ), ); } } ">
import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:path/path.dart';
import 'package:photofilters/photofilters.dart';
import 'package:image/image.dart' as imageLib;
import 'package:image_picker/image_picker.dart';

void main() => runApp(new MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String fileName;
  List<Filter> filters = presetFiltersList;
  File imageFile;

  Future getImage(context) async {
    imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
    fileName = basename(imageFile.path);
    var image = imageLib.decodeImage(imageFile.readAsBytesSync());
    image = imageLib.copyResize(image, width: 600);
     Map imagefile = await Navigator.push(
      context,
      new MaterialPageRoute(
        builder: (context) => new PhotoFilterSelector(
              title: Text("Photo Filter Example"),
              image: image,
              filters: presetFiltersList,
              filename: fileName,
              loader: Center(child: CircularProgressIndicator()),
              fit: BoxFit.contain,
            ),
      ),
    );
    if (imagefile != null && imagefile.containsKey('image_filtered')) {
      setState(() {
        imageFile = imagefile['image_filtered'];
      });
      print(imageFile.path);
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Photo Filter Example'),
      ),
      body: Center(
        child: new Container(
          child: imageFile == null
              ? Center(
                  child: new Text('No image selected.'),
                )
              : Image.file(imageFile),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () => getImage(context),
        tooltip: 'Pick Image',
        child: new Icon(Icons.add_a_photo),
      ),
    );
  }
}

UI Screen Shots

Sample Images of Filters

No Filter No Filter AddictiveBlue AddictiveBlue AddictiveRed AddictiveRed Aden Aden
Amaro Amaro Ashby Ashby Brannan Brannan Brooklyn Brooklyn
Charmes Charmes Clarendon Clarendon Crema Crema Dogpatch Dogpatch
Earlybird Earlybird 1977 1977 Gingham Gingham Ginza Ginza
Hefe Hefe Helena Helena Hudson Hudson Inkwell Inkwell
Juno Juno Kelvin Kelvin Lark Lark Lo-Fi Lo-Fi
Ludwig Ludwig Maven Maven Mayfair Mayfair Moon Moon
Nashville Nashville Perpetua Perpetua Reyes Reyes Rise Rise
Sierra Sierra Skyline Skyline Slumber Slumber Stinson Stinson
Sutro Sutro Toaster Toaster Valencia Valencia Vesper Vesper
Walden Walden Willow Willow X-Pro II X-Pro II

Sample Images of Convolution Filters

Identity Identity Emboss Emboss Sharpen Sharpen Colored Edge Detection Colored Edge Detection
Blur Blur Edge Detection Medium Edge Detection Medium Edge Detection Hard Edge Detection Hard Guassian Blur Guassian Blur
Low Pass Low Pass High Pass High Pass Mean Mean

Filters

There are two types of filters. ImageFilter and ColorFilter.

Image Filter

Image filter applies its subfilters directly to the whole image one by one. It is computationally expensive since the complexity & time increases as the number of subfilters increases.

You can create your own custom image filter as like this:

    import 'package:photofilters/filters/image_filters.dart';

    var customImageFilter = new ImageFilter(name: "Custom Image Filter");
    customImageFilter.subFilters.add(ConvolutionSubFilter.fromKernel(
      coloredEdgeDetectionKernel,
    ));
    customImageFilter.subFilters.add(ConvolutionSubFilter.fromKernel(
      gaussian7x7Kernel,
    ));
    customImageFilter.subFilters.add(ConvolutionSubFilter.fromKernel(
      sharpenKernel,
    ));
    customImageFilter.subFilters.add(ConvolutionSubFilter.fromKernel(
      highPass3x3Kernel,
    ));
    customImageFilter.subFilters.add(ConvolutionSubFilter.fromKernel(
      lowPass3x3Kernel,
    ));
    customImageFilter.subFilters.add(SaturationSubFilter(0.5));

You can also inherit the ImageFilter class to create another image filter.

class MyImageFilter extends ImageFilter {
  MyImageFilter(): super(name: "My Custom Image Filter") {
    this.addSubFilter(ConvolutionSubFilter.fromKernel(sharpenKernel));
  }
}

Color Filter

Color filter applies its subfilters to each pixel one by one. It is computationally less expensive than the ImageFilter. It will loop through the image pixels only once irrespective of the number of subfilters.

You can create your own custom color filter as like this:

    import 'package:photofilters/filters/color_filters.dart';

    var customColorFilter = new ColorFilter(name: "Custom Color Filter");
    customColorFilter.addSubFilter(SaturationSubFilter(0.5));
    customColorFilter
        .addSubFilters([BrightnessSubFilter(0.5), HueRotationSubFilter(30)]);

You can inherit the ColorFilter class too

class MyColorFilter extends ColorFilter {
  MyColorFilter() : super(name: "My Custom Color Filter") {
    this.addSubFilter(BrightnessSubFilter(0.8));
    this.addSubFilter(HueRotationSubFilter(30));
  }
}

Sub filters

There are two types of subfilters. One can be added to the ColorFilter and the other can be added to the ImageFilter. You can inherit ColorSubFilter class to implement the former and you can use the ImageSubFilter mixin to implement the latter. You can create a same subfilter that can be used for both Image and Color Filters. The BrightnessSubFilter is an example of this.

class BrightnessSubFilter extends ColorSubFilter with ImageSubFilter {
  final num brightness;
  BrightnessSubFilter(this.brightness);

  ///Apply the [BrightnessSubFilter] to an Image.
  @override
  void apply(Uint8List pixels, int width, int height) =>
      image_filter_utils.brightness(pixels, brightness);

  ///Apply the [BrightnessSubFilter] to a color.
  @override
  RGBA applyFilter(RGBA color) =>
      color_filter_utils.brightness(color, brightness);
}

Getting Started

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

For help on editing package code, view the documentation.

You might also like...

A Flutter audio plugin (Swift/Java) to play remote or local audio files on iOS / Android / MacOS and Web

A Flutter audio plugin (Swift/Java) to play remote or local audio files on iOS / Android / MacOS and Web

AudioPlayer A Flutter audio plugin (Swift/Java) to play remote or local audio files on iOS / Android / MacOS and Web. Online demo Features Android / i

Dec 18, 2022

A Flutter media player plugin for iOS and android based on ijkplayer

A Flutter media player plugin for iOS and android based on ijkplayer

Flutter media player plugin for android/iOS based on ijkplayer.

Jan 4, 2023

Just_audio: a feature-rich audio player for Android, iOS, macOS and web

Just_audio: a feature-rich audio player for Android, iOS, macOS and web

just_audio just_audio is a feature-rich audio player for Android, iOS, macOS and web. Mixing and matching audio plugins The flutter plugin ecosystem c

Jun 28, 2022

Automatically generates native code for adding splash screens in Android and iOS.

Automatically generates native code for adding splash screens in Android and iOS.

Automatically generates native code for adding splash screens in Android and iOS. Customize with specific platform, background color and splash image.

Jan 2, 2023

Play simultaneously music/audio from assets/network/file directly from Flutter, compatible with android / ios / web / macos, displays notifications

Play simultaneously music/audio from assets/network/file directly from Flutter, compatible with android / ios / web / macos, displays notifications

🎧 assets_audio_player 🔊 Play music/audio stored in assets files (simultaneously) directly from Flutter (android / ios / web / macos). You can also u

Dec 24, 2022

A flutter plugin to handle Android / iOS camera

A flutter plugin to handle Android / iOS camera

🚀 Overview Flutter plugin to add Camera support inside your project. CamerAwesome include a lot of useful features like: ðŸ“ē Live camera flip ( switch

Jan 5, 2023

A Flutter plugin to use speech recognition on iOS & Android (Swift/Java)

A Flutter plugin to use speech recognition on iOS & Android (Swift/Java)

speech_recognition A flutter plugin to use the speech recognition iOS10+ / Android 4.1+ Basic Example Sytody, speech to todo app Installation Depend o

Dec 19, 2022

Tiwee - An IPTV player developed for android/ios devices with flutter

Tiwee - An IPTV player developed for android/ios devices with flutter

Tiwee An IPTV player developed for android/ios devices with flutter you can watc

Dec 27, 2022
Owner
Ansh rathod
Flutter developer
Ansh rathod
Image Extensions A wrapper library for image package with some extra functions.

A wrapper library for image package with some extra functions. Installation Add this to your package's pubspec.yaml file: dependencie

Vanxh 1 Jan 15, 2022
Image Picker Load image from camera and gallery

image_choose A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

MD TAMIM ISLAM KHAN 2 Sep 12, 2022
Image Editor Plugin with simple, easy support for image editing using Paints, Text, Filters, Emoji and Sticker like stories.

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

Zeeshan 206 Dec 2, 2022
Flutter plugin for selecting multiple images from the Android and iOS image library

Flutter plugin for selecting multiple images from the Android and iOS image library, taking new pictures with the camera, and edit them before using such as rotating, cropping, adding sticker/filters.

Weta Vietnam 91 Dec 19, 2022
Flutter package for creating a fully customizable and editable image widget.

EditableImage Flutter Package Flutter package for creating a fully customizable and editable image widget. The package has been written solely in Dart

Bulent Baris Kilic 5 Jun 13, 2022
A small image utils package for flutter written in dart.

flutter_simple_image_utils A small image utils package for flutter written in dart. Usage: import 'package:flutter_simple_image_utils/flutter_simple_i

Hamlet D'Arcy 1 Nov 18, 2021
A Flutter package for both android and iOS which provides Audio recorder

social_media_recorder A Flutter package for both android and iOS which provides

subhikhalifeh 16 Dec 29, 2022
Audio classification Tflite package for flutter (iOS & Android).

Audio classification Tflite package for flutter (iOS & Android). Can also support Google Teachable Machine models.

Michael Nguyen 47 Dec 1, 2022
A plugins pick Image & camera for Flutter

christian_picker_image Flutter plugin that allows you to upload multi image picker on iOS & Android. Getting Started ChristianImagePicker is an all-in

nguyen phuc nguyen 24 Apr 29, 2022
This app classifies images based on any TFLite image classification model

This app classifies images based on any TFLite image classification model. A sample model has been provided to classify cats vs. dogs.

Daniel Alexander 0 Feb 20, 2022