In many application there is a lots of images in the Gallery, and now user wants to see the image in full mode. How to make image in full mode like zoom option. So How to make Image zoom option like gallery app.
In this example we are covering this Image Zoom option with photo_view library.
Photo_view is a zoomable image/content widget for Flutter.
PhotoView enables images to become able to zoom and pan with user gestures such as pinch, rotate and drag.
It also can show any widget instead of an image, such as Container, Text or a SVG.
Even though being super simple to use, PhotoView is extremely customizable though its options and the controllers
Let's get started
Step 1: Create Flutter Application
Step 2: Add photo_view library in pubspec.yaml file
dependencies:
flutter:
sdk: flutter
photo_view:
|
Step 3: Import photo_view classes in the main dart file
import 'package:photo_view/photo_view_gallery.dart';
|
Step 4: Add photo_view widget and pass our images to this widget
PhotoViewGallery.builder(
itemCount: imageList.length,
builder: (context, index) {
return PhotoViewGalleryPageOptions(
basePosition: Alignment.center,
imageProvider: NetworkImage(imageList[index]),
minScale: PhotoViewComputedScale.contained * 0.8,
maxScale: PhotoViewComputedScale.covered * 2,
);
},
scrollPhysics: BouncingScrollPhysics(),
backgroundDecoration: BoxDecoration(
color: Theme.of(context).canvasColor,
),
),
|
It will create the list of items with PhotoViewGallery.builder
We can set the options for the image like scaling image minscale, max scale
PhotoViewGalleryPageOptions({
Key key,
@required this.imageProvider,
this.heroAttributes,
this.minScale,
this.maxScale,
this.initialScale,
this.controller,
this.scaleStateController,
this.basePosition,
this.scaleStateCycle,
this.onTapUp,
this.onTapDown,
this.gestureDetectorBehavior,
this.tightMode,
this.filterQuality,
this.disableGestures,
})
|
Complete code
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, //primary theme color
),
home: MyHomePage(), //call to homepage class
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final imageList = [
'https://iso.500px.com/wp-content/uploads/2016/03/stock-photo-142984111.jpg',
'https://image.shutterstock.com/image-photo/3d-wallpaper-design-waterfall-sea-260nw-1380925703.jpg',
'https://m.economictimes.com/thumb/msid-68721417,width-1200,height-900,resizemode-4,imgsize-1016106/nature1_gettyimages.jpg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQus9rtXGG06QBn-Q13zk5oWKr-ryngXbTW-g&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyP2vktrvo9rlhz4jQDnSsI-D-WL92iX36Ig&usqp=CAU',
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey,
appBar: AppBar(
backgroundColor: Colors.red,
title: Text("Gallery View Zoomable widget"),
),
// add this body tag with container and photoview widget
body: Container(
child: Center(
child: Container(
height: 300,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
elevation: 20,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: PhotoViewGallery.builder(
itemCount: imageList.length,
builder: (context, index) {
return PhotoViewGalleryPageOptions(
basePosition: Alignment.center,
imageProvider: NetworkImage(imageList[index]),
minScale: PhotoViewComputedScale.contained * 0.8,
maxScale: PhotoViewComputedScale.covered * 2,
);
},
scrollPhysics: BouncingScrollPhysics(),
backgroundDecoration: BoxDecoration(
color: Theme.of(context).canvasColor,
),
),
),
),
),
),
),
),
);
}
}
|
|
Article Contributed By :
|
|
|
|
|
4832 Views |
|