Pinch Zoom Effect In Flutter
By: Naveen Srivastava
Tags: Flutter App Development, Mobile Apps, Flutter, Widgets, Dart

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: ^0.2.6

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 ❤❤