After capturing with RepaintBoundary, the background color of the image is distorted.

[BMWrc]

Steps to reproduce

I’m working on sharing images by capturing widgets. About five months ago, it worked fine, but now it converts the data to bytes and causes the image colors to be distorted. Here’s a snippet of my code

Could this issue be caused by the iOS version? Has anyone else encountered the same problem, or is there a way to fix it? Please help me.

Expected results

resolve problem and best practice

Actual results

share Image show right this,

Code sample

try {
final boundary = _key.currentContext!.findRenderObject()!
as RenderRepaintBoundary;
final image = await boundary.toImage(pixelRatio: 3);

  final byteData = await image.toByteData(
    format: ui.ImageByteFormat.png,
  );
  final pngBytes = byteData!.buffer.asUint8List();

} catch (e) {
  debugPrint('Share Image: $e');
}

Screenshots or Video

Logs

Logs

[Paste your logs here]

Flutter Doctor output

[✓] Flutter (Channel stable, 3.32.8, on macOS 15.5 24F74 darwin-arm64, locale en-TH)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.103.2)
[✓] Connected device (3 available)
! Error: Browsing on the local area network for iPhone ของ jarin. Ensure the device is unlocked and attached
with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

• No issues found!

[Sumat-Dev]

Summary

Captured images saved from RenderRepaintBoundary.toImage() (or ui.Image.toByteData(format: ImageByteFormat.rawRgba)) sometimes appear green or colour-shifted. This is frequently caused by a mismatch between the pixel channel order returned by the engine (e.g. BGRA) and the order expected when encoding/viewing (RGBA), or by color-space gamut differences when converting extendedSRGB to sRGB.

Why this happens

toByteData(format: rawRgba) returns raw bytes but the underlying platform/engine may produce bytes in a different channel order (BGRA/BGRX/etc.), so interpreting them as RGBA yields green/blue shifts.

Suggested fix

If possible, use toByteData(format: ImageByteFormat.png) — PNG preserves color/format and avoids manual channel handling.

If performance requires rawRgba, detect or assume the platform’s channel order and swizzle the bytes before re-creating/encoding an image (swap R ↔ B for BGRA → RGBA). I include a small, self-contained example below (capture → raw → swizzle → decode → png) that works across platforms.

Example

import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:intl/intl.dart';
import 'package:share_plus/share_plus.dart';
import 'package:cross_file/cross_file.dart';

/// Capture a widget, request rawRgba, swizzle BGRA->RGBA (if needed),
/// convert back to ui.Image and encode to PNG.
Future<void> captureAndSaveSwizzledPng(GlobalKey boundaryKey) async {
  final context = boundaryKey.currentContext;
  if (context == null) throw Exception('context null');

  final renderObject = boundaryKey.currentContext!.findRenderObject();
  if (renderObject == null || renderObject is! RenderRepaintBoundary) {
    throw Exception('RenderRepaintBoundary not found');
  }

  // Choose a safe pixelRatio to avoid OOM; adjust as needed.
  final pixelRatio = (MediaQuery.of(context).devicePixelRatio * 2).clamp(1.0, 3.0) as double;
  final ui.Image captured = await renderObject.toImage(pixelRatio: pixelRatio);

  // Request raw RGBA bytes (platform may produce BGRA though)
  final bd = await captured.toByteData(format: ui.ImageByteFormat.rawRgba);
  if (bd == null) throw Exception('toByteData returned null');

  final raw = bd.buffer.asUint8List();

  // If you observe green images, swap R <-> B for each pixel (BGRA -> RGBA).
  final fixed = _swizzleBgraToRgba(raw);

  // Recreate ui.Image from fixed RGBA bytes
  final ui.Image fixedImage = await _decodeImageFromPixels(fixed, captured.width, captured.height);

  // Encode to PNG (safe to save/share)
  final pngBd = await fixedImage.toByteData(format: ui.ImageByteFormat.png);
  if (pngBd == null) throw Exception('png toByteData returned null');

  final pngBytes = pngBd.buffer.asUint8List();

  final tempDir = await getTemporaryDirectory();
  final fileName = 'CAP_${DateFormat('yyMMddHHmmss').format(DateTime.now())}.png';
  final file = File('${tempDir.path}/$fileName');
  await file.writeAsBytes(pngBytes);
  await file.flush();

  // Optional: share
  await Share.shareXFiles([XFile(file.path)], text: fileName);
}

/// Swizzle BGRA -> RGBA (swap byte 0 and 2 for every pixel).
Uint8List _swizzleBgraToRgba(Uint8List bytes) {
  final out = Uint8List.fromList(bytes); // copy
  for (int i = 0; i + 3 < out.length; i += 4) {
    final tmp = out[i];
    out[i] = out[i + 2];
    out[i + 2] = tmp;
    // G (i+1) and A (i+3) unchanged
  }
  return out;
}

/// Helper to decode raw RGBA bytes to ui.Image using pixelFormat.rgba8888.
Future<ui.Image> _decodeImageFromPixels(Uint8List rgbaBytes, int width, int height) {
  final completer = Completer<ui.Image>();
  ui.decodeImageFromPixels(
    rgbaBytes,
    width,
    height,
    ui.PixelFormat.rgba8888,
    (ui.Image img) => completer.complete(img),
  );
  return completer.future;
}

[BMWrc]

Summary

Captured images saved from RenderRepaintBoundary.toImage() (or ui.Image.toByteData(format: ImageByteFormat.rawRgba)) sometimes appear green or colour-shifted. This is frequently caused by a mismatch between the pixel channel order returned by the engine (e.g. BGRA) and the order expected when encoding/viewing (RGBA), or by color-space gamut differences when converting extendedSRGB to sRGB.

Why this happens

toByteData(format: rawRgba) returns raw bytes but the underlying platform/engine may produce bytes in a different channel order (BGRA/BGRX/etc.), so interpreting them as RGBA yields green/blue shifts.

Suggested fix

If possible, use toByteData(format: ImageByteFormat.png) — PNG preserves color/format and avoids manual channel handling.

If performance requires rawRgba, detect or assume the platform’s channel order and swizzle the bytes before re-creating/encoding an image (swap R ↔ B for BGRA → RGBA). I include a small, self-contained example below (capture → raw → swizzle → decode → png) that works across platforms.

Example

import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:intl/intl.dart';
import 'package:share_plus/share_plus.dart';
import 'package:cross_file/cross_file.dart';

/// Capture a widget, request rawRgba, swizzle BGRA->RGBA (if needed),
/// convert back to ui.Image and encode to PNG.
Future<void> captureAndSaveSwizzledPng(GlobalKey boundaryKey) async {
  final context = boundaryKey.currentContext;
  if (context == null) throw Exception('context null');

  final renderObject = boundaryKey.currentContext!.findRenderObject();
  if (renderObject == null || renderObject is! RenderRepaintBoundary) {
    throw Exception('RenderRepaintBoundary not found');
  }

  // Choose a safe pixelRatio to avoid OOM; adjust as needed.
  final pixelRatio = (MediaQuery.of(context).devicePixelRatio * 2).clamp(1.0, 3.0) as double;
  final ui.Image captured = await renderObject.toImage(pixelRatio: pixelRatio);

  // Request raw RGBA bytes (platform may produce BGRA though)
  final bd = await captured.toByteData(format: ui.ImageByteFormat.rawRgba);
  if (bd == null) throw Exception('toByteData returned null');

  final raw = bd.buffer.asUint8List();

  // If you observe green images, swap R <-> B for each pixel (BGRA -> RGBA).
  final fixed = _swizzleBgraToRgba(raw);

  // Recreate ui.Image from fixed RGBA bytes
  final ui.Image fixedImage = await _decodeImageFromPixels(fixed, captured.width, captured.height);

  // Encode to PNG (safe to save/share)
  final pngBd = await fixedImage.toByteData(format: ui.ImageByteFormat.png);
  if (pngBd == null) throw Exception('png toByteData returned null');

  final pngBytes = pngBd.buffer.asUint8List();

  final tempDir = await getTemporaryDirectory();
  final fileName = 'CAP_${DateFormat('yyMMddHHmmss').format(DateTime.now())}.png';
  final file = File('${tempDir.path}/$fileName');
  await file.writeAsBytes(pngBytes);
  await file.flush();

  // Optional: share
  await Share.shareXFiles([XFile(file.path)], text: fileName);
}

/// Swizzle BGRA -> RGBA (swap byte 0 and 2 for every pixel).
Uint8List _swizzleBgraToRgba(Uint8List bytes) {
  final out = Uint8List.fromList(bytes); // copy
  for (int i = 0; i + 3 < out.length; i += 4) {
    final tmp = out[i];
    out[i] = out[i + 2];
    out[i + 2] = tmp;
    // G (i+1) and A (i+3) unchanged
  }
  return out;
}

/// Helper to decode raw RGBA bytes to ui.Image using pixelFormat.rgba8888.
Future<ui.Image> _decodeImageFromPixels(Uint8List rgbaBytes, int width, int height) {
  final completer = Completer<ui.Image>();
  ui.decodeImageFromPixels(
    rgbaBytes,
    width,
    height,
    ui.PixelFormat.rgba8888,
    (ui.Image img) => completer.complete(img),
  );
  return completer.future;
}

I applied the code, and it does fix the issue, but the colors are no longer the same as the original. For example, purple turns into pink, and pink turns into red

[darshankawar]

@BMWrc
This seems similar to #173400 which is fixed and available in latest master and stable, so please upgrade and re-run your scenario to check that works correctly. If not, write in comments and I'll reopen it.

[BMWrc]

@BMWrc This seems similar to #173400 which is fixed and available in latest master and stable, so please upgrade and re-run your scenario to check that works correctly. If not, write in comments and I'll reopen it.

Is this an issue with Flutter version 3.32.8? The solution is that I need to either downgrade or upgrade the version.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.