CODEWITHSUNDEEP
flutter
Giovanny
Giovanny

Reputation: 131

How to add zoom in an image?

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}',
      ),
    );
  }
}

Upvotes: 2

Views: 2904

Answers (1)

Bruno Kinast
Bruno Kinast

Reputation: 1168

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}',
  ),
),

Upvotes: 6

Related Questions