Image Filter Pro

Hi! This is my first package published to help you out!
Image Filter Pro is a Flutter package that provides a convenient way to apply color filters to images with preset filter options. The package is written purely in Dart, so no additional setup for specific platforms is required.

Features

Apply various preset color filters to images.
Easily integrate customisable filter UI into your Flutter app.
Inspired by popular filter presets found in other image editing apps.

Installation

Add the following dependency to your pubspec.yaml file:

dependencies: image_filter_pro: ^0.1.10

Usage

Import the package:

import 'package:flutter/material.dart'; import 'package:image_filter_pro/image_filter_pro.dart';
Use the ImageFilterWidget in your widget tree:

 class FilteredImageWidget extends StatefulWidget {      
 @override    
      _FilteredImageWidgetState createState() => _FilteredImageWidgetState();    
    }    
        
    class _FilteredImageWidgetState extends State<FilteredImageWidget> {    
      File? image;  
 
  void _showImagePicker() async {    
    // Implement your image picker logic here    
    // Set the selected image as the imageFile   
    // For example:   
    // var pickedImage = await ImagePicker.pickImage(source: ImageSource.gallery);   
    // setState(() {   
    //   imageFile = pickedImage;   
    // });    
  var updatedImage = await Navigator.of(context).push(    
      MaterialPageRoute(    
        builder: (context) => PhotoFilter(    
          image: imageFile,    
          presets: NamedColorFilter.defaultFilters(),    
          cancelIcon: Icons.cancel,    
          applyIcon: Icons.check,    
          backgroundColor: Colors.black,    
          sliderColor: Colors.blue,    
          sliderLabelStyle: TextStyle(color: Colors.white),    
          bottomButtonsTextStyle: TextStyle(color: Colors.white),    
          presetsLabelTextStyle: TextStyle(color: Colors.white),    
          applyingTextStyle: TextStyle(color: Colors.white),    
        ),    
      ),    
    );    
    
    if (updatedImage != null) {    
      setState(() {    
        this.image = updatedImage;    
      });    
    }    
  }    
    
  @override    
  Widget build(BuildContext context) {    
    return Scaffold(    
      appBar: AppBar(    
        title: Text('Image Filter App'),    
      ),    
      body: Center(    
        child: Column(    
          mainAxisAlignment: MainAxisAlignment.center,    
          children: [    
            ElevatedButton(    
              onPressed: _showImagePicker,    
              child: Text('Pick and Filter Image'),    
            ),    
            if (image != null)    
              Image.file(image!),    
          ],    
        ),    
      ),    
    );    
  }    
}

You can also provide your own set of presets like this:

 PhotoFilter( 
 filters: [ 
 // Always add the "default" one 
	     NamedColorFilter(
		     colorFilterMatrix: [],    
             name: "None"),    
         NamedColorFilter(    
             colorFilterMatrix: [    
                0.8, 0.1, 0.1, 0, 20,    
                0.1, 0.8, 0.1, 0, 20,    
                0.1, 0.1, 0.8, 0, 20,    
                0, 0, 0, 1, 0,    
               ],    
              name: "Vintage"),    
          NamedColorFilter(    
              colorFilterMatrix: [    
                1.2, 0.1, 0.1, 0, 10,    
                0.1, 1, 0.1, 0, 10,    
                0.1, 0.1, 1, 0, 10,    
                0, 0, 0, 1, 0,    
               ],    
              name: 'Mood'),    
          ]  
 )

Or if you want to extend:

 PhotoFilter( 
 //...the rest of the params 
	     filters:  NamedColorFilter.defaultFilters()
	     .toList()
	     .addAll([                   
	         NamedColorFilter(    
                        colorFilterMatrix: [    
                           0.8, 0.1, 0.1, 0, 20,    
                           0.1, 0.8, 0.1, 0, 20,    
                           0.1, 0.1, 0.8, 0, 20,    
                           0, 0, 0, 1, 0,    
                         ],    
                        name: "Vintage"),    
                       NamedColorFilter(    
                         colorFilterMatrix: [    
                           1.2, 0.1, 0.1, 0, 10,    
                           0.1, 1, 0.1, 0, 10,    
                           0.1, 0.1, 1, 0, 10,    
                           0, 0, 0, 1, 0,    
                         ],    
                         name: 'Mood'),    
                   ]  
 )

By default, the widget will just pop itself when tapping on apply icon and return a File where the filter has been applied to. It is also possible to trigger callback when tapping on cancel or on apply filter, the filter widget will pop instantly but the applying of the filter to image will run in background

 PhotoFilter( 
     //...the rest of the params 
     onCancel: () => // do something,
     onStartApplyingFilter: () => // show loader or something similar, 
     onFinishApplyingFilter: (File? file) => // do something with edited image
 )

Screenshots

License