# Replace the background in Flutter

> Replace NosmaiCameraPreview with a color, image bytes, or local video using the Flutter background segmentation API.

> For AI agents: the complete documentation index is at https://nosmai.com/llms/effects.txt

Product: Nosmai Effects
Group: guide
Source: https://nosmai.com/docs/effects/guides/background/replace-the-background/flutter/

## Prerequisites

- A working [Flutter quickstart](/docs/effects/quickstart/flutter/)
- Advanced filters enabled for both native projects
- An asset declared in `pubspec.yaml`

## Load and apply an image

```dart
final data = await rootBundle.load(
  'assets/backgrounds/studio.jpg',
);
final bytes = Uint8List.sublistView(data);

await NosmaiFlutter.instance.setBackgroundSegmentation(
  NosmaiBackgroundSegmentationConfig.image(bytes),
);
```

Use `NosmaiBackgroundSegmentationConfig.color` for a solid color or
`NosmaiBackgroundSegmentationConfig.video(localPath)` for a readable local
video.

## Declare the asset

```yaml
flutter:
  assets:
    - assets/backgrounds/studio.jpg
```

## Clear it

```dart
await NosmaiFlutter.instance.clearBackgroundSegmentation();
```

## Verify it worked

The background should change while the same preview widget remains mounted.
Test iOS and Android separately because asset decoding and memory limits differ.

## Common errors

| Symptom | Cause | Fix |
| --- | --- | --- |
| `Unable to load asset` | Asset is missing from `pubspec.yaml` | Declare the path, run `flutter pub get`, and rebuild |
| Video does not apply | A bundle URI or remote URL was passed | Copy it to a readable local file and pass the absolute path |
| Result works on one platform only | Native feature or project capability differs | Verify both app-bound keys and native artifact versions |

## Next steps

- [Use an authored blur package in Flutter](/docs/effects/guides/background/blur-the-background/flutter/)
- [Record video in Flutter](/docs/effects/guides/output/record-video/flutter/)
- [Review Flutter support](/docs/effects/platforms/flutter/)

## References

- [Flutter package](https://pub.dev/packages/nosmai_effects_sdk)
- [Rendering pipeline](/docs/effects/concepts/how-the-pipeline-works/)