Add Filters to Images In Flutter

In this blog, we will Add Filters to Images In Flutter.

Note:-Using photo filter package, we can add filters to our images and we can create

own filters too.

Introduction:

Photo filters can add a creative touch to the images, enhancing their visual appeal and conveying a specific mood.

It facilitates the process of enhancing, modifying, and transforming images within we Flutter applications.

You may also check our flutter app development services.

Before applying photo filters we will learn about filters:

Filters :-

There are two categories of filters: Image Filter and color Filter.

1.Image Filter:

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.

2.Color Filter:

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.

Implementation:-

1.Adding Dependencies:

Open the pubspec.yaml file and add the following packages:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.4+4
  image: ^3.0.1
  photofilters: ^2.0.0

Run flutter pub get to fetch the new dependencies.

2.Implement Image Picker:

Use the image_picker package to allow users to choose an image from their gallery or take a new photo.

import 'package:image_picker/image_picker.dart';

final picker = ImagePicker();

Future<void> pickImage() async {
  final pickedFile = await picker.getImage(source: ImageSource.gallery);

  if (pickedFile != null) {
    // Process the picked image
  }
}

3.Add Filters:

Make use of the image package to implement filters on the chosen image.

var imageFile = await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => PhotoFilterSelector(
            title: const Text("Photo Filter Example"),
            image: image!,
            filters: presetFiltersList,
            filename: fileName!,
            loader: const Center(child: CircularProgressIndicator()),
            fit: BoxFit.contain,
          ),
        ),
      );

      if (imageFile != null && imageFile.containsKey('image_filtered')) {
        setState(() {
          selectedImage = imageFile['image_filtered'];
        });
      }

Completed code:-

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:photofilters/photofilters.dart';
import 'dart:async';
import 'dart:io';
import 'package:path/path.dart';
import 'package:image/image.dart' as img;


void main() => runApp(
    const MaterialApp(debugShowCheckedModeBanner: false, home: PhotoFilter()));

class PhotoFilter extends StatefulWidget {
  const PhotoFilter({super.key});

  @override
  State<PhotoFilter> createState() => _PhotoFilterState();
}

class _PhotoFilterState extends State<PhotoFilter> {
  String? fileName;
  List<Filter> filters = presetFiltersList;
  final picker = ImagePicker();
  File? selectedImage;

  Future getImage(context) async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      selectedImage = File(pickedFile.path);
      fileName = basename(selectedImage!.path);
      var image = img.decodeImage(await selectedImage!.readAsBytes());
      image = img.copyResize(image!, width: 600);
      var imageFile = await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => PhotoFilterSelector(
            title: const Text("Photo Filter Example"),
            image: image!,
            filters: presetFiltersList,
            filename: fileName!,
            loader: const Center(child: CircularProgressIndicator()),
            fit: BoxFit.contain,
          ),
        ),
      );

      if (imageFile != null && imageFile.containsKey('image_filtered')) {
        setState(() {
          selectedImage = imageFile['image_filtered'];
        });
      }
    }
  }

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

Output:-

Here you can see that we are applying the filter on the selected image.

Conclusion:-

We have done with our implementation of Add Filters to Images In Flutter.

Check here for more interesting blogs – https://mobikul.com/blog/

Hope this blog helped you to better understand the implementation of Add Filters to Images in flutter.

To explore more of my blogs, please visit the following link.

https://webkul.com/blog/author/sakshirai-mk754/

Thanks for reading this blog.

References:-

https://pub.dev/packages/photofilters#image-filter