How to add zoom in an image?

user_16484597 0
Viewed 352

I need to add zooming to my image, I haven't been able to make it work. If anyone could help me, I would appreciate it.

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ImageScreen extends StatelessWidget {
  final url;

  ImageScreen({
    Key key,
    @required this.url,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: CachedNetworkImage(
        imageUrl: '${this.url}',
      ),
    );
  }
}
flutter
1 Answers

You can try wrapping your image in the InteractiveViewer widget, like this:

InteractiveViewer(
  child: CachedNetworkImage(
    imageUrl: '${this.url}',
  ),
),

This widget provides pan and zoom interactions with its child, check out the Flutter's Widget of the Week video about it here.

Please note that to use CachedNetworkImage you need to have the cached_network_image plugin installed in you Flutter project.

If you don't have it installed, you can use the Image.network widget:

InteractiveViewer(
  child: Image.network(
    '${this.url}',
  ),
),
user_156510350
Related