How to zoom image in flutter with CachedNetworkImage widget - flutter

Question

can you suggest a way to zoom an image inside a CachedNetworkImage?
Here is my code
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
I tried to wrap CachedNetworkImage in a photo_view widget but it does not work
#override
Widget build(BuildContext context) {
return Container(
child: PhotoView(
imageProvider: CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
)
)
);
}

Answer 1

You can copy paste run full code below
Package Cached network image provide CachedNetworkImageProvider
code snippet
PhotoView(
imageProvider:
CachedNetworkImageProvider("http://via.placeholder.com/350x150"),
)
working demo
full code
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(flex: 1, child: PhotoViewTest()),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class PhotoViewTest extends StatefulWidget {
#override
_PhotoViewTestState createState() => _PhotoViewTestState();
}
class _PhotoViewTestState extends State<PhotoViewTest> {
#override
Widget build(BuildContext context) {
return Container(
child: PhotoView(
imageProvider:
CachedNetworkImageProvider("http://via.placeholder.com/350x150"),
),
);
}
}

Answer 2

You can wrap Photo view inside Cached Network image like this code, so you can use advantages of both cached network image and photo view
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
imageBuilder: (context, imageProvider) => PhotoView(
imageProvider: imageProvider,
),
placeholder: (context, url) =>
CircularProgressIndicator(),
errorWidget: (context, url, error) =>
Icon(Icons.error),
)

Answer 3

Widget build(BuildContext context) {
return Container(
child: CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
imageBuilder: (context, imageProvider) => PhotoView(
imageProvider: imageProvider,
)
),
);
}