CODEWITHSUNDEEP
flutterscreenshot
Mobarak Ali
Mobarak Ali

Reputation: 11

Flutter Screenshot Appears Mirrored on Some Devices (Tecno BE8)

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:

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

What I Have Tried

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.

Upvotes: 1

Views: 74

Answers (1)

Alex
Alex

Reputation: 445

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.

Upvotes: 0

Related Questions