Issue

I am capturing a screenshot of a widget using RenderRepaintBoundary in Flutter. However, on some devices (e.g., Tecno BE8), the captured image appears mirrored (flipped vertically).

Flutter SDK Version:

• Flutter SDK: 3.29.0
• Package Tried: screenshot: ^3.0.0 (but same issue)

Code I Am Using

I am using the following code to capture and display the image:

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

final GlobalKey _globalKey = GlobalKey();

Future<Uint8List?> _captureWidget() async {
  try {
    // Find the RenderRepaintBoundary
    RenderRepaintBoundary boundary =
        _globalKey.currentContext!.findRenderObject() as RenderRepaintBoundary;

    // Convert the widget to an image
    ui.Image image = await boundary.toImage(pixelRatio: 3.0); // Adjust pixelRatio for quality

    // Convert the image to a byte array (Uint8List)
    ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List uint8List = byteData!.buffer.asUint8List();

    return uint8List;
  } catch (e) {
    print('Error capturing widget: $e');
    return null;
  }
}

// Display the captured image
void _showCapturedImage(BuildContext context, Uint8List image) {
  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        content: Image.memory(image),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Close'),
          ),
        ],
      );
    },
  );
}

UI Structure

RepaintBoundary(
  key: _globalKey,
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.blue,
    child: Text(
      'Hello, World!',
      style: TextStyle(color: Colors.white, fontSize: 24),
    ),
  ),
),

Problem

• The screenshot appears mirrored only on some devices (like Tecno BE8).
• Other devices capture the image correctly.
• The mirroring seems to be a GPU rendering issue.

What I Have Tried

• Changing pixelRatio in toImage().
• Using the screenshot package instead of RenderRepaintBoundary (same issue).
• Checking Flutter versions, but the issue persists.

Possible Solution?

I suspect the image needs to be flipped manually before displaying. If anyone has encountered this issue, how can I fix it?

The issue is that the captured image appears flipped vertically on some devices.

Issue

I am capturing a screenshot of a widget using RenderRepaintBoundary in Flutter. However, on some devices (e.g., Tecno BE8), the captured image appears mirrored (flipped vertically).

Flutter SDK Version:

• Flutter SDK: 3.29.0
• Package Tried: screenshot: ^3.0.0 (but same issue)

Code I Am Using

I am using the following code to capture and display the image:

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

final GlobalKey _globalKey = GlobalKey();

Future<Uint8List?> _captureWidget() async {
  try {
    // Find the RenderRepaintBoundary
    RenderRepaintBoundary boundary =
        _globalKey.currentContext!.findRenderObject() as RenderRepaintBoundary;

    // Convert the widget to an image
    ui.Image image = await boundary.toImage(pixelRatio: 3.0); // Adjust pixelRatio for quality

    // Convert the image to a byte array (Uint8List)
    ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List uint8List = byteData!.buffer.asUint8List();

    return uint8List;
  } catch (e) {
    print('Error capturing widget: $e');
    return null;
  }
}

// Display the captured image
void _showCapturedImage(BuildContext context, Uint8List image) {
  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        content: Image.memory(image),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Close'),
          ),
        ],
      );
    },
  );
}

UI Structure

RepaintBoundary(
  key: _globalKey,
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.blue,
    child: Text(
      'Hello, World!',
      style: TextStyle(color: Colors.white, fontSize: 24),
    ),
  ),
),

Problem

• The screenshot appears mirrored only on some devices (like Tecno BE8).
• Other devices capture the image correctly.
• The mirroring seems to be a GPU rendering issue.

What I Have Tried

• Changing pixelRatio in toImage().
• Using the screenshot package instead of RenderRepaintBoundary (same issue).
• Checking Flutter versions, but the issue persists.

Possible Solution?

I suspect the image needs to be flipped manually before displaying. If anyone has encountered this issue, how can I fix it?

The issue is that the captured image appears flipped vertically on some devices.

• flutter
• screenshot

1 Answer 1

You can't resolve this issue on your own, as it originates from Flutter itself. This issue not only occurs when creating a screenshot, but also when applying a shader. However, I have already submitted a bug report in Flutter here.

Btw just for your information, the screenshot package also uses RenderRepaintBoundary under the hood. So, even if you use that package, the outcome would remain the same.