Coders In C

This article will show you how to develop Background removal app in Flutter with source code. Simple app developed in flutter to remove background from any image. i have used vscode as my development IDE and i always use latest version for Flutter and dart.

Watch Videos tutorial on : Flutter Background Removal App

---

Library used in this project :

1. provider: ^6.0.5
2. image_picker: ^0.8.6+4
3. remove_background: ^0.0.1

---

User interface :

User interface is very simple where 2 image view and 2 buttons on the screen. From one button user can select image and show image in one image view. and click and second button to start removing object from image. after removal processed image will be shown in the second image view.

Code of Layout – removebg.dart

import 'dart:io';
import 'dart:typed_data';

import 'package:ex_imagecal/helpers/imgpicker.dart';
import 'package:ex_imagecal/helpers/imgremovebg.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

enum ProcessingStatus {
  notstarted,
  processing,
  done;
}

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

  @override
  State<RemoveBG> createState() => _RemoveBGState();
}

class _RemoveBGState extends State<RemoveBG> {
  ImgPicker imgPicker = ImgPicker();
  XFile? xFile;

  ProcessingStatus processingStatus = ProcessingStatus.notstarted;
  Uint8List? imgInBytes;

  ImgRemoveBg imgRemoveBg = ImgRemoveBg();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(12),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [Text('Upload Image')],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(12),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                      onPressed: () {
                        imgPicker.getImageFromGallery().then((value) {
                          setState(() {
                            xFile = value;
                          });
                        });
                      },
                      child: const Text('Gallery'))
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(12),
              child: SizedBox(
                height: 160,
                width: double.infinity,
                child: xFile == null
                    ? const Placeholder()
                    : Image.file(File(xFile!.path)),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(12),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                      onPressed: xFile == null
                          ? null
                          : () {
                              //for loading
                              setState(() {
                                processingStatus = ProcessingStatus.processing;
                              });

                              imgRemoveBg
                                  .removeBg(context, xFile!)
                                  .then((value) {
                                setState(() {
                                  processingStatus = ProcessingStatus.done;
                                  imgInBytes = value;
                                });
                              });
                            },
                      child: const Text('Remove Bg'))
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(12),
              child: SizedBox(
                height: 160,
                width: double.infinity,
                child: processingStatus == ProcessingStatus.notstarted
                    ? const Placeholder()
                    : processingStatus == ProcessingStatus.processing
                        ?
                        //circular progress
                        Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: const [
                              SizedBox(
                                height: 45,
                                width: 45,
                                child: CircularProgressIndicator(),
                              )
                            ],
                          )
                        : imgInBytes == null
                            ? Container()
                            : Image.memory(imgInBytes!),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

removebg.dart ( code for removing background / function to remove background )

//imports
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';
import 'package:remove_background/remove_background.dart';

class ImgRemoveBg {
  ui.Image? image;
  ByteData? pngBytes;

//function for removing background
  Future<Uint8List> removeBg(context, XFile xFile) async {
    image = await decodeImageFromList(await xFile.readAsBytes());
    pngBytes = await cutImage(context: context, image: image!);
    return Uint8List.view(pngBytes!.buffer);
  }
}

---