Repository: flutter
Issue: Incorrect cropping of Image widget when panned / zoomed via transformations
Labels: framework,a: images,has reproducible steps,P2,found in release: 3.10,team-framework,triaged-framework,found in release: 3.13

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)

### Steps to reproduce

1. Create a widget that displays an image without fitting (BoxFit.none)
2. Add some transformation around the widget via Transform (e.g. scale down a bit or pan some)
3. Notice that the resulting image is cropped as if it was not transformed (hard to notice at first, but don't worry I provide working example)

Notes:
- working example: https://dartpad.dev/?id=aef80389ebb2f4de57091f0f9511e167
- I only tried the web target
- the issue is present using html renderer as well as canvaskit renderer
- the issue is not present if I show the image via Custom Painter instead of an Image widget

### Expected results

I'd expect the image to not be cropped (demonstrated by the CustomPainter mode in my example).

### Actual results

The image gets cropped as if there were no transformation.

### Code sample

<details><summary>Code sample available at https://dartpad.dev/?id=aef80389ebb2f4de57091f0f9511e167</summary>

```dart
// Sample app that illustrates the incorrect cropping of images
// when rendered as Image widgets and panned / zoomed via transformations.

// The sample can also render the image via custom painter in which case
// the incorrect cropping doesn't happen.
// (For this mode switch the '_usePainter' variable to 'true')

// --- !!! ---
// To see the effect of the unwanted cropping run the app and then adjust
// the splitter between the code area and the runtime area.
// You'll see parts of the image disappearing (on the right) when rendering via Image widget. 
// --- !!! ---

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' hide Colors;
import 'package:http/http.dart' as http;
import 'dart:ui' as ui;
import 'dart:async';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
const String imgUrl = 'https://picsum.photos/800/600';
ui.Image? uiImage;

// Crude workaround to load the image asynchronously and access it from a stateless widget.
// This is only needed for the custom painter mode.
Future init() async {
  http.Response response = await http.get(Uri.parse(imgUrl));
  var imgData = response.bodyBytes;
  final completer = Completer<ui.Image>();
  ui.decodeImageFromList(imgData, completer.complete);
  uiImage = await completer.future;
}

void main() async {
  await init();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  final bool _usePainter = false; // <== switch this to 'true' to see correct behavior
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            color: const Color(0xFF0000FF),
            child:
            SizedBox(
              width: 800,
              height: 600,
              child:
              ClipRect(
                child:
                Transform(
                  // pan to the left-bottom and scale down a bit
                  transform: Matrix4.translation(Vector3(-200, 100, 0)).scaled(0.8),
                  child: (_usePainter) ? PainterWidget() : const ImageWidget(imgUrl)
                )
              )
            )
          )
        )
      )
    );
  }
}

class ImageWidget extends StatelessWidget {
  final String _url;
  const ImageWidget(this._url);
  
  @override
  Widget build(BuildContext context) {
    return Image.network(_url, fit: BoxFit.none);
  }
}

class PainterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: _ImagePainter(uiImage));
  }
}

class _ImagePainter extends CustomPainter {
  final ui.Image? uiImage;
  _ImagePainter(this.uiImage);
  
  @override
  void paint(Canvas canvas, Size size) {
    if (uiImage != null) {
      canvas.drawImage(uiImage!, Offset.zero, Paint());
    }
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
```

</details>


### Screenshots or Video

<details>
<summary>Screenshots / Video demonstration</summary>

[Upload media here]

</details>
![flutter_wrong](https://github.com/flutter/flutter/assets/70334968/25d8763e-c936-4cfa-a2c0-078d0162d325)
![flutter_right](https://github.com/flutter/flutter/assets/70334968/a7502cc5-6da4-4b7a-b436-ba2b9c5457b8)


### Logs

<details><summary>Logs</summary>

```console
[Paste your logs here]
```

</details>


### Flutter Doctor output

<details><summary>Doctor output</summary>

```console
Irrelevant since I provided a DartPad example.
DartPad says "Based on Flutter 3.10.5 Dart SDK 3.0.5"
I only tested the Web target. The issue is present using the html renderer as well as using the canvaskit renderer.
I can reproduce this on my machine as well using the stable 3.0.6 sdk version.
```

</details>