PhotoView library not being able to zoom in / zoom out of image

Question

I am trying to do a simple task with PhotoView. I have an AssetImage and I am trying to display the image and the user can zoom the scale in / out.

i am using the Pubspec dependency:

photo_view: ^0.9.2

I found this test code online but doesn't seem to work either :(

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';



class KodetrApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo View',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Photo View'),
        ),
        body: Center(
          child: AspectRatio(
            aspectRatio: 16 / 9,
            child: ClipRect(
              child: PhotoView(
                imageProvider: NetworkImage(
                  'https://kodetr.herokuapp.com/banners/post/flutter/flutter_photoview.webp',
                ),
                minScale: PhotoViewComputedScale.contained * 0.8,
                maxScale: PhotoViewComputedScale.covered * 2,
                enableRotation: true,

              ),
            ),
          ),
        ),
      ),
    );
  }
}

score 0 · Answer 1 · answered Dec 17 '20 at 17:46

0

I tried your test code and it gave me an error, but I made a few changes and if it worked fine

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';



class KodetrApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo View',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Photo View'),
        ),
        body: Center(
          child: AspectRatio(
            aspectRatio: 16 / 9,
            child: ClipRect(
              child: PhotoView(
                imageProvider: AssetImage(ADD IMAGE HERE),
                minScale: PhotoViewComputedScale.contained * 0.8,
                maxScale: PhotoViewComputedScale.covered * 2,
                enableRotation: true,

              ),
            ),
          ),
        ),
      ),
    );
  }
}

answered Dec 17 '20 at 17:46

Jessica Cespedes

1

1

It would be nice to add a description of what you changed to the original code, it isn't very clear what you edited to make this work. – Tom Myddeltyn Dec 17 '20 at 18:27
just change the part of the image.. this imageProvider: NetworkImage('https://kodetr.herokuapp.com/banners/post/flutter/flutter_photoview.webp',), ... for this imageProvider: AssetImage(ADD IMAGE HERE), – Jessica Cespedes Dec 18 '20 at 15:17
Please add that to your answer (vs comment), it would make your answer much clearer to understand. In general, it is good to include descriptions of what you did to help convey your answer. Thanks! – Tom Myddeltyn Dec 18 '20 at 16:22

score 0 · Answer 2 · answered Mar 25 '21 at 13:47

0

If you want to add a network image and not from assets use PhotoView.customChild:

PhotoView.customChild(
child: Image.network('yourImageUrl')),

answered Mar 25 '21 at 13:47

SilkeNL

398
1
5
22

PhotoView library not being able to zoom in / zoom out of image

2 Answers2