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.
- 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.
Add the following dependency to your pubspec.yaml file:
dependencies: image_filter_pro: ^0.1.10
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
)
This package is distributed under the MIT License.