This guide shows how to use the ByByBG Background Removal API in a Flutter app. You will upload an image, send it to the API, and receive a transparent background image.
Open pubspec.yaml and add these packages:
dependencies:
http: ^1.1.0
image_picker: ^1.0.4
Create a new file called remove_bg_api.dart. This file talks to the ByByBG API.
👉 IMPORTANT:
Replace YOUR_API_KEY_HERE with your real API key.
import 'dart:typed_data';
import 'package:http/http.dart' as http;
class BgRemoveApi {
static const String apiUrl =
"https://bybybg.com/v1/remove-bg";
// 🔴 PASTE YOUR API KEY HERE
static const String apiKey =
"YOUR_API_KEY_HERE";
/// Sends image to API and returns transparent PNG
static Future<Uint8List?> removeBackground(
Uint8List imageBytes) async {
try {
var request = http.MultipartRequest(
"POST",
Uri.parse(apiUrl),
);
request.headers["X-API-Key"] = apiKey;
request.files.add(
http.MultipartFile.fromBytes(
"file",
imageBytes,
filename: "image.png",
),
);
var response = await request.send();
if (response.statusCode == 200) {
return await response.stream.toBytes();
} else {
throw Exception(
"API Error: ${response.statusCode}");
}
} catch (e) {
return null;
}
}
}
This screen lets the user pick an image and remove its background. No backend work is needed on the Flutter side.
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'remove_bg_api.dart';
class RemoveBgScreen extends StatefulWidget {
@override
State<RemoveBgScreen> createState() =>
_RemoveBgScreenState();
}
class _RemoveBgScreenState
extends State<RemoveBgScreen> {
Uint8List? originalImage;
Uint8List? resultImage;
bool loading = false;
Future<void> pickImage() async {
final picker = ImagePicker();
final image =
await picker.pickImage(source: ImageSource.gallery);
if (image != null) {
originalImage = await image.readAsBytes();
setState(() {
resultImage = null;
});
}
}
Future<void> removeBackground() async {
if (originalImage == null) return;
setState(() => loading = true);
final output =
await BgRemoveApi.removeBackground(
originalImage!);
setState(() {
loading = false;
resultImage = output;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:
AppBar(title: Text("Remove Background")),
body: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
if (originalImage != null)
Image.memory(originalImage!, height: 200),
SizedBox(height: 20),
ElevatedButton(
onPressed: pickImage,
child: Text("Upload Image"),
),
ElevatedButton(
onPressed: removeBackground,
child: Text("Remove Background"),
),
SizedBox(height: 20),
if (loading)
CircularProgressIndicator(),
if (resultImage != null)
Expanded(
child: Container(
color: Colors.grey[300],
child: Image.memory(resultImage!),
),
),
],
),
),
);
}
}