I am using the PhotoView library in a Flutter project to allow users to enlarge images. Everything works fine, but I have a special requirement. When the user double taps on a portion of the image to zoom in, I want the tapped portion to be centered on the screen.
Currently, double tapping zooms in, but no matter where the user taps, only the center of the screen is zoomed in.
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TapTest(),
);
}
}
class TapTest extends StatefulWidget {
const TapTest({super.key});
@override
State<TapTest> createState() => _TapTestState();
}
class _TapTestState extends State<TapTest> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Tap event"),
),
body: Center(
child: PhotoView(
imageProvider: NetworkImage("https://onl.sc/1JPXTmB"),
maxScale: PhotoViewComputedScale.covered * 2,
minScale: PhotoViewComputedScale.contained,
)),
);
}
}
Has anyone faced a similar issue? How can I make the zoomed-in part center on the screen after a double tap?
Any help would be appreciated. Thanks!
What I tried. Using the default PhotoView implementation, we expected that double-tapping an image would center the enlarged portion of the image.
What I expected We expected that when we double-tapped on a specific part of the image, that part would be enlarged and centered on the screen.
What actually happened: Double tapping enlarged the image, but the focus was only in the center of the screen, and tapping anywhere only enlarged the center of the screen.