Flutter ClipRect and Align : how to compute the Alignment values - flutter

Question

I want to display part of an image (a rectangle of 128 * 128 inside this image which is 512 * 512) in a rectangle in Flutter app.
Like this:
I want to select a specific zone in the source image, here from x=115, y=12 with width=128,height=128.
So here's my Flutter code to do this:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
var myWidth = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
width: myWidth,
height: myWidth,
color: Colors.yellow,
child: FittedBox(
fit: BoxFit.fill,
child: ClipRect(
child: Align(
alignment: Alignment(2.0*115.0 / 512.0 - 1, 2.0*12.0 / 512.0 -1.0),
widthFactor: 0.25,
heightFactor: 0.25,
child: Image.network(
"https://homepages.cae.wisc.edu/~ece533/images/baboon.png"),
),
),
)));
}
}
I suppose that the widthFactor and heightFactor represent the percentage of the original image I want to display - so here, because I want to display 128 pixels, it's 25% of the original width/height.
However, I just can't figure out out to calculate the values for the alignment.
First I tried for x :
alignment: Alignment(2.0*115.0 / 512.0 - 1, 2.0*12.0 / 512.0 -1.0),
Which almost gives the desired result, but not quite, see below:
I tried many other combinations to calculate the Alignment values and read all I could find with the help of Google... Is this even possible to accomplish this with a ClipRect and an Align?
Any help is welcome ;-)
NOTE : I don't want to crop the original image (and hence produce a new image), I want to keep it as downloaded to avoid having N copies of the same bitmap in memory. What I want is a specific view on the image - something that is absolutely trivial to do with OpenGL/DirectX and UV coordinates for example, but not so with Flutter.

Answer 1

Based on pskink comment, provided a working solution in the original post.
import 'package:flutter/material.dart';
import 'package:network_to_file_image/image_for_canvas.dart';
import 'package:network_to_file_image/network_to_file_image.dart';
import 'dart:ui' as ui;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
var myWidth = MediaQuery.of(context).size.width;
User user = User(
filename: null,
url: "https://homepages.cae.wisc.edu/~ece533/images/baboon.png",
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
width: myWidth,
height: myWidth,
color: Colors.yellow,
child: CustomPaint(
painter: ImagePainter(user, loadCallback: (_, __, ___) {
setState(() {});
})),
));
}
}
class ImagePainter extends CustomPainter {
final User user;
final LoadCallback<User> loadCallback;
ImagePainter(
this.user, {
required this.loadCallback,
});
#override
void paint(Canvas canvas, Size size) {
canvas.save();
canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height),
Paint()..color = Colors.lightGreenAccent);
canvas.restore();
var imageForCanvas = _imageForCanvas();
ui.Image? image = imageForCanvas.image(user);
if (image != null) {
canvas.save();
canvas.drawImageRect(
image,
Rect.fromLTWH(
12,
12,
256,
256,
),
Rect.fromLTWH(
0,
0,
size.width,
size.height,
),
Paint()..imageFilter = ui.ImageFilter.blur(sigmaX: .5, sigmaY: .5),
);
canvas.restore();
}
}
ImageForCanvas<User> _imageForCanvas() => ImageForCanvas<User>(
imageProviderSupplier: (User user) => NetworkToFileImage(
file: null,
url: user.url,
),
keySupplier: (User user) => user.url!,
loadCallback: loadCallback,
);
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
class User {
final String? filename;
final String? url;
User({
this.filename,
this.url,
});
}