CODEWITHSUNDEEP
flutterdart
Pencen
Pencen

Reputation: 13

How to make scrollable image (vertical) and can pinch to zoom images

I want to display a list of images that I can scroll through vertically and can zoom the image. I can scroll the images but I can't zoom the images.


class ScrollVertical extends StatefulWidget {
    @override
  _ScrollVerticalState createState() => _ScrollVerticalState();
}

class _ScrollVerticalState extends State<ScrollVertical>  {
  double _scale = 1.0;
  double _previousScale = 1.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Column Layout"),
        backgroundColor: Colors.purple,
      ),

Here where the list of images can be scroll

      body: SingleChildScrollView(   //to scroll images
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(bottom:30),
            ),
          InteractiveViewer(
            clipBehavior: Clip.none,
            minScale: 1,
            maxScale: 4,
            child: Image.asset("assets/imgs/chalkboard.png"), // first image
          ),
          Padding(
              padding: EdgeInsets.only(bottom:30),
          ),

This will be followed by the next images.

           
          InteractiveViewer(
            clipBehavior: Clip.none,
            minScale: 1,
            maxScale: 4,
            child: Image.asset("assets/imgs/Gojo.png"),    //second image
          ),
          Padding(
              padding: EdgeInsets.only(bottom:30),
            ),

          InteractiveViewer(
            clipBehavior: Clip.none,
            minScale: 1,
            maxScale: 4,
            child: Image.asset("assets/imgs/Equations.png"),    third image
          ),
          Padding(
              padding: EdgeInsets.only(bottom:30),
            ),
          ]
      ),
      ),
    );
  }
}

I use InteractiveViewer to implement pinch to zoom but it not work. Is it possible to do this?

Upvotes: 1

Views: 5900

Answers (3)

Rush tomato
Rush tomato

Reputation: 26

ScrollBar

To move vertical use scrollbar, put image in container and wrap with photoview and it should wrap with ScrollBar

ScrollBar(container(photoview("Image")))

Upvotes: 0

Anmol Mishra
Anmol Mishra

Reputation: 332

import 'package:photo_view/photo_view.dart';

install command: flutter pub add photo_view

https://pub.dev/packages/photo_view/install

body: SingleChildScrollView(   //to scroll images
                       child: Column(
                         children: <Widget>[
                           Padding(
                             padding: EdgeInsets.only(bottom:30),
                           ),
           PhotoView(
                 imageProvider: AssetImage("assets/imgs/chalkboard.png"),
               )
                      
                         Padding(
                             padding: EdgeInsets.only(bottom:30),
                         ),
        PhotoView(
                 imageProvider: AssetImage("assets/imgs/Gojo.png"),
               )
         Padding(
                             padding: EdgeInsets.only(bottom:30),
                         ),
        PhotoView(
                 imageProvider: AssetImage("assets/imgs/Equations.png"),
               )
       Padding(
                             padding: EdgeInsets.only(bottom:30),
                         ),

Upvotes: 1

Ruchit
Ruchit

Reputation: 2740

you can use photo_view package from pub.dev, link

install command: flutter pub add photo_view

import 'package:photo_view/photo_view.dart';
.
.
.
@override
Widget build(BuildContext context) {
  return Container(
    child: PhotoView(
      imageProvider: AssetImage("assets/large-image.jpg"),
    )
  );
}

Upvotes: 0

Related Questions