pinch zoom is clears when finger takes

Question

I am developing a flutter application. I want zoom image and want to work pinch. It working fine but when i taking my finger it is removing zoom. My need is want to drag and zoom using pinch when taking finger don't want to clear. I am using 'cached_network_image' for loading image. For zooming i am using my customize library from 'pinch_zoom_image' plugin.

The source code is https://github.com/YoussefKababe/pinch_zoom_image/blob/master/lib/src/pinch_zoom_image.dart

In this code i try to implement '_handleScaleEnd()' function. but i didn't solve my issue.

My code is shown below.

pubspec.yaml

cached_network_image: ^0.8.0 pinch_zoom_image: ^0.2.5

main.dart

import 'package:flutter/material.dart';
import 'pinch_zoom_image_custom.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return new MaterialApp(
    title: 'Pinch Zoom Image',
    theme: new ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: Scaffold(
        appBar: AppBar(
        title: Text('Pinch Zoom Image'),
        ),
        body: ListView(
        children: <Widget>[

            Container(
            padding: EdgeInsets.all(16.0),
            child: PinchZoomImage(
                image: CachedNetworkImage(
                imageUrl: 'https://i.imgur.com/tKg0XEb.jpg',
                ),
                zoomedBackgroundColor: Color.fromRGBO(240, 240, 240, 1.0),
                onZoomStart: () {
                print('Zoom started');
                },
                onZoomEnd: () {
                print('Zoom finished');
                },
            ),
            ),
        ],
        ),
    ),
    );
}
}

pinch_zoom_image_custom.dart

import 'package:flutter/material.dart';
import 'pinch_zoom_image_custom.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return new MaterialApp(
    title: 'Pinch Zoom Image',
    theme: new ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: Scaffold(
        appBar: AppBar(
        title: Text('Pinch Zoom Image'),
        ),
        body: ListView(
        children: <Widget>[

            Container(
            padding: EdgeInsets.all(16.0),
            child: PinchZoomImage(
                image: CachedNetworkImage(
                imageUrl: 'https://i.imgur.com/tKg0XEb.jpg',
                ),
                zoomedBackgroundColor: Color.fromRGBO(240, 240, 240, 1.0),
                onZoomStart: () {
                print('Zoom started');
                },
                onZoomEnd: () {
                print('Zoom finished');
                },
            ),
            ),
        ],
        ),
    ),
    );
}
}

from screen? when I pinch it zooming. but it is clearing after taking finger from screen. — Joe, Jul 17 '19 at 07:39

score 0 · Accepted Answer · answered Jul 18 '19 at 07:05

I solve the problem by using 'matrix_gesture_detector package' instead of , 'pinch_zoom_image' .

I got the answer from the below link. Here is what I expect. https://github.com/pskink/matrix_gesture_detector/blob/master/example/lib/transform_demo3.dart

In this code I am try to use matrix gesture library for pinch and zoom. It will detect the gesture detection.

My code is shown below.

    import 'package:flutter/material.dart';
    import 'package:cached_network_image/cached_network_image.dart';
    import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';


    void main() => runApp(new MyApp());

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
        title: 'Pinch Zoom Image',
        theme: new ThemeData(
            primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
            title: Text('Pinch Zoom Image'),
            ),
            body:TransformDemo3()

        ),
        );
    }
    }

    class TransformDemo3 extends StatefulWidget {
    @override
    _TransformDemo3State createState() => _TransformDemo3State();
    }

    class _TransformDemo3State extends State<TransformDemo3> {



    Matrix4 matrix = Matrix4.identity();
    ValueNotifier<int> notifier = ValueNotifier(0);


    @override
    Widget build(BuildContext context) {
        return Scaffold(
        body: LayoutBuilder(
            builder: (ctx, constraints) {
            Size s = constraints.biggest;
            double side = s.shortestSide * 0.666;
            matrix.leftTranslate((s.width - side) / 2, (s.height - side) / 2);
            return MatrixGestureDetector(
                onMatrixUpdate: (m, tm, sm, rm) {
                matrix = MatrixGestureDetector.compose(matrix, tm, sm, null);

                notifier.value++;
                },
                child: Container(
                width: double.infinity,
                height: double.infinity,
                alignment: Alignment.topLeft,
                color: Color(0xff444444),
                child: AnimatedBuilder(
                    animation: notifier,
                    builder: (ctx, child) {
                    return Transform(
                        transform: matrix,
                        child: Container(
                        width: side,
                        height: side,
                        child: CachedNetworkImage(
                            imageUrl: 'https://i.imgur.com/tKg0XEb.jpg',
                        ),
                        ),
                    );
                    },
                ),
                ),
            );
            },
        ),
        );
    }
    }

pinch zoom is clears when finger takes

1 Answers1