Effects Flutter
Effects / Guides / Backgrounds / Flutter

Replace a camera background in Flutter with Nosmai Effects

Updated August 22, 2026

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

Prerequisites

  • A working Flutter quickstart
  • Advanced filters enabled for both native projects
  • An asset declared in pubspec.yaml

Load and apply an image

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

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

Clear it

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

SymptomCauseFix
Unable to load assetAsset is missing from pubspec.yamlDeclare the path, run flutter pub get, and rebuild
Video does not applyA bundle URI or remote URL was passedCopy it to a readable local file and pass the absolute path
Result works on one platform onlyNative feature or project capability differsVerify both app-bound keys and native artifact versions

Next steps

References

Nosmai

An AR and AI company. Founded on the idea that the next decade of software will be visual, and that the tools for it should be within reach of anyone building.

Newsletter

Product updates and release notes. No spam.

© 2026 nosmai, inc · all rights reserved