Flutterexperts

In this article, we will explore the Pinch Zoom Effect in a flutter Using the pinch-zoom-image package. With the help of the package, we can easily achieve flutter pinch_zoom_image.In which we can rotate and zoom the image. and it achieves its position easily.

---

Table Of Contents :

Flutter

Pinch Zoom Image

Code Implementation

Code File

Conclusion

---

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”

Pinch Zoom Image :

A Pinch Zoom Image is a widget based on flutter’s new interactive viewer that zooms to a picture pinch and returns to its initial shape position upon release. This package is only on the most recent interactive image viewer. that it has been introduced since Flutter’s new version 1.20. We use this flutter package to zoom pictures.

Demo Module :

Implementation :

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:
   pinch_zoom_image_updated: ^latest version

Step 2: import the package :

import 'package:pinch_zoom_image_updated/pinch_zoom_image_updated.dart';

Step 3: Run flutter package get

Code Implement :

Create a new dart file is called custom_progress_indicator.dart inside the lib folder

PinchZoomImage(
  image: ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(10)),
    child: Image.asset(
      items.img,
    ),
  ),
  zoomedBackgroundColor: Color.fromRGBO(240, 240, 240, 1.0),
  hideStatusBarWhileZooming: true,
  onZoomStart: () {
    print('Zoom started');
  },
  onZoomEnd: () {
    print('Zoom finished');
  },
),

In this screen, we have used the Pinch Zoom Image widget. In this, we have a list of an image which displays the image. Pinch zoom image will have an image type widget in which we will initialize the image. And the option of zoomedBackgroundColor .In which the color shows in the background after the rotating image.

ListView.builder(
    itemCount: pinchZoomModelList.length,
    scrollDirection: Axis.vertical,
    //shrinkWrap: true,
    itemBuilder: (BuildContext context, int index) {
      return _buildPinchModelList(pinchZoomModelList[index], index);
    }),

We have taken a screen ListView.Builder widget from this screen, which shows the data in the form of a list.

class PinchZoomModelList{
  String _img;
  PinchZoomModelList(this._img,);

  String get img=>_img;
}

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_pinch_zoom_effect_demo/Constants/Constants.dart';
import 'package:flutter_pinch_zoom_effect_demo/model/pinch_zoom_list_model.dart';
import 'package:pinch_zoom_image_updated/pinch_zoom_image_updated.dart';

class PinchZoomEffectDemo extends StatefulWidget {
  @override
  _PinchZoomEffectDemoState createState() => _PinchZoomEffectDemoState();
}

class _PinchZoomEffectDemoState extends State<PinchZoomEffectDemo> {
  double _height;
  double _width;
  List<PinchZoomModelList> pinchZoomModelList;

  PageController pageController;

  @override
  void initState() {
    pinchZoomModelList = Constants.getPinchZoomModelList();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _height = MediaQuery.of(context).size.height;
    _width = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.grey[50],
        title: Text(
          'Pinch Zoom Effect',
          style: TextStyle(color: Colors.black, fontSize: 18),
        ),
        centerTitle: true,
        elevation: 1.0,
      ),
      body: Container(
        margin: EdgeInsets.only(left: 0, right: 10),
        child: ListView.builder(
            itemCount: pinchZoomModelList.length,
            scrollDirection: Axis.vertical,
            //shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              return _buildPinchModelList(pinchZoomModelList[index], index);
            }),
      ),
    );
  }

  Widget _buildPinchModelList(PinchZoomModelList items, int index) {
    return Container(
      padding: EdgeInsets.only(top: 15.0, left: 15, right: 15),
      child: PinchZoomImage(
        image: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          child: Image.asset(
            items.img,
          ),
        ),
        zoomedBackgroundColor: Color.fromRGBO(240, 240, 240, 1.0),
        hideStatusBarWhileZooming: true,
        onZoomStart: () {
          print('Zoom started');
        },
        onZoomEnd: () {
          print('Zoom finished');
        },
      ),
    );
  }
}

Conclusion :

In this article, I have explained a Pinch Zoom Effect demo, you can modify and experiment according to your own, this little introduction was from the pinch-zoom image effect from our side.

I hope this blog helps will provide you with sufficient information in Trying up the Pinch Zoom Effect in your flutter project. In this demo explain the Pinch Zoom Effect through the pinch_zoom_image_updated package in a flutter. So please try it.

❤ ❤ Thanks for reading this article ❤❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.