Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang How to Zoom Image on Double Tap in Flutter.

Step 1. Buat Preview Image

Buat class dengan nama PreviewImage lalu tambahkan code sebagai berikut

import ‘package:flutter/material.dart’; class PreviewImage extends StatefulWidget {   const PreviewImage({Key? key}) : super(key: key);   @override   _PreviewImageState createState() => _PreviewImageState(); } class _PreviewImageState extends State<PreviewImage>     with SingleTickerProviderStateMixin {   late TransformationController controller;   TapDownDetails? tapDownDetails;   late AnimationController animationController;   Animation<Matrix4>? animation;   @override   void initState() {     controller = TransformationController();     animationController = AnimationController(       vsync: this,       duration: Duration(milliseconds: 300),     )..addListener(() {         controller.value = animation!.value;       });     super.initState();   }   @override   void dispose() {     controller.dispose();     animationController.dispose();     super.dispose();   }   @override   Widget build(BuildContext context) {     return Scaffold(         backgroundColor: Colors.black,         body: Container(           alignment: Alignment.center,           padding: EdgeInsets.all(24),           child: buildImage(),         ));   } }

Step 2. Tambahkan Build Image

Tambahkan function buildImage() seperti berikut

Widget buildImage() => GestureDetector(       onDoubleTapDown: (details) => tapDownDetails = details,       onDoubleTap: (){         final position = tapDownDetails!.localPosition;         final double scale = 3;         final x = -position.dx * (scale – 1);         final y = -position.dy * (scale – 1);         final zoomed = Matrix4.identity()           ..translate(x, y)           ..scale(scale);         final value = controller.value.isIdentity() ? zoomed : Matrix4.identity();         controller.value = value;       },       child: InteractiveViewer(           clipBehavior: Clip.none,           transformationController: controller,           panEnabled: false,           scaleEnabled: false,                 child: Image.network(                   ‘https://www.clipartkey.com/mpngs/m/40-405500_cat-clipart-kawaii-cartoon-cute-cats-png.png’,                   fit: BoxFit.cover,                 )));

Hasil Run :

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂