{"id":397852,"date":"2023-08-30T07:34:35","date_gmt":"2023-08-30T07:34:35","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=397852"},"modified":"2025-05-20T13:44:41","modified_gmt":"2025-05-20T13:44:41","slug":"add-filters-in-images","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/add-filters-in-images\/","title":{"rendered":"Add Filters to Images In Flutter"},"content":{"rendered":"\n

In this blog, we will Add Filters to Images In Flutter.<\/p>\n\n\n\n

Note:-Using photo filter package, we can add filters to our images and we can create<\/p>\n\n\n\n

own filters too.<\/p>\n\n\n\n

Introduction:<\/h2>\n\n\n\n

Photo filters can add a creative touch to the images, enhancing their visual appeal and conveying a specific mood.<\/p>\n\n\n\n

It facilitates the process of enhancing, modifying, and transforming images within we Flutter applications.<\/p>\n\n\n\n

You may also check our\u00a0flutter app development<\/a> services.<\/p>\n\n\n\n

Before applying photo filters we will learn about filters:<\/p>\n\n\n\n

Filters :-<\/h2>\n\n\n\n

There are two categories of filters: Image Filter and color Filter.<\/p>\n\n\n\n

1.Image Filter:<\/strong><\/h4>\n\n\n\n

An image filter is a technique that sequentially applies its sub filters to the entire image. Managing this process can be challenging due to the simultaneous growth of complexity and time requirements with the inclusion of additional sub-filters.<\/p>\n\n\n\n

2.Color Filter:<\/h4>\n\n\n\n

Color filter applies its sub filters sequentially to individual pixels in an image. It involves reduced computational expense compared to ImageFilter. The traversal of image pixels happens only once, regardless of the count of sub-filters.<\/p>\n\n\n\n

Implementation:-<\/strong><\/h2>\n\n\n\n

1.Adding Dependencies: <\/h4>\n\n\n\n

Open the pubspec.yaml<\/code> file and add the following packages:<\/p>\n\n\n\n

dependencies:\n  flutter:\n    sdk: flutter\n  image_picker: ^0.8.4+4\n  image: ^3.0.1\n  photofilters: ^2.0.0<\/pre>\n\n\n\n
Run flutter pub get<\/code> to fetch the new dependencies.<\/p>\n\n\n\n
2.Implement Image Picker:<\/h4>\n\n\n\n
Use the image_picker package to allow users to choose an image from their gallery or take a new photo.<\/p>\n\n\n\n
import 'package:image_picker\/image_picker.dart';\n\nfinal picker = ImagePicker();\n\nFuture<void> pickImage() async {\n  final pickedFile = await picker.getImage(source: ImageSource.gallery);\n\n  if (pickedFile != null) {\n    \/\/ Process the picked image\n  }\n}<\/pre>\n\n\n\n
3.Add Filters: <\/h4>\n\n\n\n
Make use of the image package to implement filters on the chosen image.<\/p>\n\n\n\n
var imageFile = await Navigator.push(\n        context,\n        MaterialPageRoute(\n          builder: (context) => PhotoFilterSelector(\n            title: const Text("Photo Filter Example"),\n            image: image!,\n            filters: presetFiltersList,\n            filename: fileName!,\n            loader: const Center(child: CircularProgressIndicator()),\n            fit: BoxFit.contain,\n          ),\n        ),\n      );\n\n      if (imageFile != null && imageFile.containsKey('image_filtered')) {\n        setState(() {\n          selectedImage = imageFile['image_filtered'];\n        });\n      }<\/pre>\n\n\n\n
Completed code:-<\/h2>\n\n\n\n
import 'package:flutter\/material.dart';\nimport 'package:image_picker\/image_picker.dart';\nimport 'package:photofilters\/photofilters.dart';\nimport 'dart:async';\nimport 'dart:io';\nimport 'package:path\/path.dart';\nimport 'package:image\/image.dart' as img;\n\n\nvoid main() => runApp(\n    const MaterialApp(debugShowCheckedModeBanner: false, home: PhotoFilter()));\n\nclass PhotoFilter extends StatefulWidget {\n  const PhotoFilter({super.key});\n\n  @override\n  State<PhotoFilter> createState() => _PhotoFilterState();\n}\n\nclass _PhotoFilterState extends State<PhotoFilter> {\n  String? fileName;\n  List<Filter> filters = presetFiltersList;\n  final picker = ImagePicker();\n  File? selectedImage;\n\n  Future getImage(context) async {\n    final pickedFile = await picker.getImage(source: ImageSource.gallery);\n    if (pickedFile != null) {\n      selectedImage = File(pickedFile.path);\n      fileName = basename(selectedImage!.path);\n      var image = img.decodeImage(await selectedImage!.readAsBytes());\n      image = img.copyResize(image!, width: 600);\n      var imageFile = await Navigator.push(\n        context,\n        MaterialPageRoute(\n          builder: (context) => PhotoFilterSelector(\n            title: const Text("Photo Filter Example"),\n            image: image!,\n            filters: presetFiltersList,\n            filename: fileName!,\n            loader: const Center(child: CircularProgressIndicator()),\n            fit: BoxFit.contain,\n          ),\n        ),\n      );\n\n      if (imageFile != null && imageFile.containsKey('image_filtered')) {\n        setState(() {\n          selectedImage = imageFile['image_filtered'];\n        });\n      }\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: const Text('Photo Filter Example'),\n      ),\n      body: Center(\n        child: Container(\n          child: selectedImage == null\n              ? const Center(\n                  child: Text('No image selected.'),\n                )\n              : Image.file(File(selectedImage!.path)),\n        ),\n      ),\n      floatingActionButton: FloatingActionButton(\n        onPressed: () => getImage(context),\n        tooltip: 'Pick Image',\n        child: const Icon(Icons.add_a_photo),\n      ),\n    );\n  }\n}<\/pre>\n\n\n\n
Output:-<\/h2>\n\n\n\n
Here you can see that we are applying the filter on the selected image.<\/p>\n\n\n\n