INTRODUCTION
Hey there, adding pinch to zoom feature to an image is very simple in Flutter. In this tutorial, we will learn how to show cached network image and also how to add pinch to zoom feature to it.
PACKAGES WE WILL USE :
1. cached_network_image: ^1.1.3
https://pub.dev/packages/cached_network_image
2. pinch_zoom_image: ^0.2.5
https://pub.dev/packages/pinch_zoom_image
Showing cached network image :
For this, we need to use "cached_network_image" package. Let's add it to our pubspec.yaml as well and save(VS Code automatically runs 'flutter pub get' when you save')/run- 'flutter pub get' in the terminal.
Next, we import the package :
import 'package:cached_network_image/cached_network_image.dart';
Then, we write the new 'FullScreenPage' widget code :
class FullScreenPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CachedNetworkImage(
imageUrl: "https:// Your image URL",
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.fill,
),
),
),
placeholder: (context, url) =>
CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
);
}
}
That's it, you're done. This 'CachedNetworkImage' widget will cache the image automatically for you. 'Placeholder' and 'errorWidget' attributes are optional but they provide advance controls.
Adding Pinch To Zoom Feature to Image :
For this, we need to use "pinch_zoom_image" package. Let's add it to our pubspec.yaml as well and save(VS Code automatically runs 'flutter pub get' when you save')/run- 'flutter pub get' in the terminal.
Next, we import the package :
import 'package:pinch_zoom_image/pinch_zoom_image.dart';
Now let's update the above code :
class FullScreenPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PinchZoomImage(
image: CachedNetworkImage(
imageUrl: "https:// Your image URL",
imageBuilder: (context, imageProvider) => Container(
child: Center(
child: Text("Sample Text",
style: TextStyle(
color: Colors.black,
backgroundColor: Colors.white38,
fontSize: 18,
fontWeight: FontWeight.w500,
wordSpacing: 1.0,
fontStyle: FontStyle.italic),
)),
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.fill,
),
),
),
placeholder: (context, url) =>
CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
zoomedBackgroundColor: Color.fromRGBO(240, 240, 240, 1.0),
hideStatusBarWhileZooming: true,
);
}
}
We have just wrapped our 'CachedNetworkImage' widget with the 'PinchZoomImage' widget and Voila ! We have added pinch to zoom feature to our image.
No comments:
Post a Comment