Repository: flutter
Issue: Distorted Raw RGBA Image Data if RepaintBoundary placed inside AspectRatio Widget -- using toImage().toByteData(format: ui.ImageByteFormat.rawRgba)
Labels: engine,a: images,c: proposal,P3,team-engine,triaged-engine

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

## Steps to Reproduce

<!-- Please include full steps to reproduce so that we can reproduce the problem. -->
1. Place RepaintBoundary widget with a GlobalKey within an AspectRatio widget
2. Call ByteData myData = myRendeRepaintBoundary.toImage(pixelRatio: 1)).toByteData(format: ui.ImageByteFormat.rawRgba);
3. RGBA data contains the widget image but it is slanted (distorted)

**Expected results:** <!-- what did you want to see? -->
Proper RGBA image data of the widget.

**Actual results:** <!-- what did you see? -->
Distorted RGBA image data of the widget.

<details>
<summary>Code sample</summary>
I wrote an example case below.  The code builds a widget with three squares of color red, green, and blue respectively.  Each square is 4x4 pixels.  


I then wrote a function to output each pixel of the RGBA data to a text file.  For convenience, it outputs "R" if the pixel is red, "G" if the pixel is green, and "B" if the pixel is blue.  For pixels of any other color it outputs "-".

# Good RGBA Image Data without AspectRatio widget from the writeBytesToFile function below:
<img width="669" alt="Screenshot 2023-04-01 at 3 56 13 PM" src="https://user-images.githubusercontent.com/47367/229320936-9b2d5658-b0af-4fa2-8636-09da1c29c46a.png">

# Distorted RGBA Image Data with AspectRatio widget from the writeBytesToFile function below:
<img width="627" alt="Screenshot 2023-04-01 at 4 02 37 PM" src="https://user-images.githubusercontent.com/47367/229320956-142376c0-23a0-422c-b87f-ddab7fb7efad.png">

```dart
// @dart=2.9
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:ui' as ui;

class ExampleSquares extends StatefulWidget {
  const ExampleSquares({
    Key key,
  }) : super(key: key);

  @override
  _ExampleSquaresState createState() => _ExampleSquaresState();
}

class _ExampleSquaresState extends State<ExampleSquares> {
  GlobalKey myKey = new GlobalKey();
  RenderRepaintBoundary myRepaintBoundary;

  @override
  void initState() {
    super.initState();
  }

  String getColorCharacter(int r, int g, int b) {
    if (r == 255 && g == 0 && b == 0) return " R ";
    if (r == 0 && g == 255 && b == 0) return " G ";
    if (r == 0 && g == 0 && b == 255) return " B ";

    return " - ";
  }

  Future<void> writeBytesToFile(ByteData myByteData) async {
    var widgetWidth = this.myRepaintBoundary.size.width.toInt();
    var widgetHeight = this.myRepaintBoundary.size.height.toInt();

    final directory = await getApplicationDocumentsDirectory();

    var file = await File('${directory.path}/image_bytes.txt').create();

    var bytes = myByteData.buffer.asUint8List();

    for (int i = 0; i < widgetHeight; i++) {
      var currentRowStr = "";
      for (int j = 0; j < widgetWidth * 4; j = j + 4) {
        int heightOffset = i * widgetWidth * 4;

        int red = bytes[heightOffset + j];
        int green = bytes[heightOffset + j + 1];
        int blue = bytes[heightOffset + j + 2];

        currentRowStr = currentRowStr + getColorCharacter(red, green, blue);
      }

      file.writeAsStringSync(currentRowStr + "\n", mode: FileMode.append);
    }
  }

  Future<ByteData> captureBytes() async {
    myRepaintBoundary = myKey.currentContext.findRenderObject();

    return await (await myRepaintBoundary.toImage(pixelRatio: 1))
        .toByteData(format: ui.ImageByteFormat.rawRgba);
  }

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 16 / 9,
      child: Column(
        children: [
          TextButton(
            onPressed: () async {
              await writeBytesToFile(await captureBytes());
            },
            child:
                const Text('Capture Bytes', textDirection: TextDirection.ltr),
          ),
          RepaintBoundary(
            key: myKey,
            child: Row(
              children: [
                Container(
                  width: 4,
                  height: 4,
                  color: Color.fromARGB(255, 255, 0, 0),
                ),
                Container(width: 4, height: 4),
                Container(
                  width: 4,
                  height: 4,
                  color: Color.fromARGB(255, 0, 255, 0),
                ),
                Container(width: 4, height: 4),
                Container(
                  width: 4,
                  height: 4,
                  color: Color.fromARGB(255, 0, 0, 255),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

```

</details>

<details>
  <summary>Logs</summary>

<!--
      Run your application with `flutter run --verbose` and attach all the
      log output below between the lines with the backticks. If there is an
      exception, please see if the error message includes enough information
      to explain how to solve the issue. If there is a crash, please include
      the entirety of the crash log including the backtrace.
-->


<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->


<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.9, on macOS 13.2.1 22D68 darwin-x64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.76.0)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

• No issues found!
```

</details>