Skip to content

Corrupted striped image on physical iOS device #196

@NeatBee

Description

@NeatBee

The code below works perfectly on a physical android device and the iOS simulator, however when running on a physical iPhone, it captures the striped image seen below which is also stretched vertically (screenshot is a rectangle, not a square) instead of the plain square purple container that is rendered on-screen.

Device: iPhone 13 mini
iOS Version: 17.5.1

Screenshot captured
image 3

Visible on the iPhone
IMG_5062D5CFBD16-1

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:screenshot/screenshot.dart';
import 'package:share_plus/share_plus.dart';

class PurpleSquarePage extends StatelessWidget {
  PurpleSquarePage({super.key});

  final ScreenshotController screenshotController = ScreenshotController();
  
  void captureAndShare(pixelRatio) async {
    debugPrint('In captureAndShare');
    try {
      debugPrint('Starting delay');
      await Future.delayed(const Duration(milliseconds: 1000));
      debugPrint('Ending delay');
      debugPrint('pixelRatio: $pixelRatio');

      // Capture a screenshot with the given pixel ratio and a delay
      Uint8List? image = await screenshotController.capture(
        // pixelRatio: pixelRatio,
        delay: const Duration(milliseconds: 3000),
      );

      // Log the captured image's output
      debugPrint(image.toString()); // <--- This is where the strange output is displayed

      // Check if the captured image is not null
      if (image != null) {
        // Get the application's document directory
        final directory = await getApplicationDocumentsDirectory();

        // Create a new file in the directory for storing the image
        final imagePath = await File('${directory.path}/image.png').create();

        // Write the captured image bytes to the file
        await imagePath.writeAsBytes(image);

        // Use the Share Plugin to share the image file
        final result = await Share.shareXFiles(
          [XFile(imagePath.path)]
        );

        // Log the sharing result
        debugPrint('Share result: ${result.toString()}');
      }

    } catch (e) {
      debugPrint('Error capturing and sharing screenshot: $e');
    }
  }

  @override
  Widget build(BuildContext context) {

    final double pixelRatio = MediaQuery.of(context).devicePixelRatio;

    return Scaffold(
      body: 
      Screenshot(
        controller: screenshotController,
        child:       
          Container(
            width: 200.0,
            height: 200.0,
            color: Colors.purple,
          ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => captureAndShare(pixelRatio),
        child: const Icon(Icons.add)
      )
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions