zoom_hover_pinch_image 1.0.4

An image zoom package with easy integration, pinch-to-zoom interaction, and customizable border radius.

Zoom functionality: Enables pinch-to-zoom interaction on the child widget. Border radius customization: Allows you to specify the border radius for clipping the child widget. Aspect ratio customization: Specifies the aspect ratio of the widget. Min and max scale limits: Sets the minimum and maximum allowed zoom levels for the child widget. Clip behavior: Determines whether clipping behavior should be applied to the child widget. By customizing these properties, you can control the zoom level, aspect ratio, clipping behavior, and scale limits, tailoring the interaction experience to your specific requirements.

Features

Zoom(
child: Image.network("https://i.pravatar.cc/300"),
clipBehavior: false,
),

copied to clipboard

import 'package:flutter/material.dart';
import 'package:zoom_hover_pinch_image/zoom_hover_pinch_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Zoom Example')),
        body: Center(
          child: ZoomExample(),
        ),
      ),
    );
  }
}

class ZoomExample extends StatefulWidget {
  @override
  _ZoomExampleState createState() => _ZoomExampleState();
}

class _ZoomExampleState extends State<ZoomExample> {
  final ZoomManager zoomManager = ZoomManager();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Zoom(
          zoomManager: zoomManager,
          minScale: 1.0,
          maxScale: 4.0,
          width: 300.0,
          height: 300.0,
          child: Image.asset('assets/image.jpg'),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            zoomManager.zoomIn(scale: 2.0);
          },
          child: Text('Zoom In'),
        ),
        ElevatedButton(
          onPressed: () {
            zoomManager.zoomOut();
          },
          child: Text('Zoom Out'),
        ),
      ],
    );
  }
}

copied to clipboard

Zoom(
child: Image.network("https://i.pravatar.cc/300"),
clipBehavior: true,
),

copied to clipboard

Zoom.pinch(
child: Image.network("https://i.pravatar.cc/300"),
clipBehavior: false,
borderRadius: BorderRadius.circular(8.0),
),

copied to clipboard

class PinchExample extends StatefulWidget {
  @override
  _PinchExampleState createState() => _PinchExampleState();
}

class _PinchExampleState extends State<PinchExample> {
  final ZoomManager zoomManager = ZoomManager();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Pinch(
          zoomManager: zoomManager,
          minScale: 1.0,
          maxScale: 4.0,
          width: 300.0,
          height: 300.0,
          child: Image.asset('assets/image.jpg'),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            zoomManager.zoomIn(scale: 2.0);
          },
          child: Text('Zoom In'),
        ),
        ElevatedButton(
          onPressed: () {
            zoomManager.zoomOut();
          },
          child: Text('Zoom Out'),
        ),
      ],
    );
  }
}

copied to clipboard

use web && windows && mac && linux

Zoom.hover(
child: Image.network("https://i.pravatar.cc/300"),
zoomedScale: 3.0
),

copied to clipboard

class HoverExample extends StatefulWidget {
  @override
  _HoverExampleState createState() => _HoverExampleState();
}

class _HoverExampleState extends State<HoverExample> {
  final ZoomManager zoomManager = ZoomManager();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Hover(
          zoomManager: zoomManager,
          initialScale: 1.0,
          hoverScale: 2.0,
          width: 300.0,
          height: 300.0,
          child: Image.asset('assets/image.jpg'),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            zoomManager.zoomIn(scale: 2.0);
          },
          child: Text('Zoom In'),
        ),
        ElevatedButton(
          onPressed: () {
            zoomManager.zoomOut();
          },
          child: Text('Zoom Out'),
        ),
      ],
    );
  }
}

copied to clipboard

use web && windows && mac && linux

Zoom.hoverMouseRegion(
child: Image.network("https://i.pravatar.cc/300"),
 zoomedScale: 3.0
),

copied to clipboard

Zoom.zoomOnTap(
child: Image.network("https://i.pravatar.cc/300"),
zoomedScale: 3.0,
clipBehavior: true,
),

copied to clipboard

Zoom.zoomOnTap(
child: Image.network("https://i.pravatar.cc/300"),
zoomedScale: 3.0,
clipBehavior: false,
),

copied to clipboard

Zoom.zoomOnTap(
child: Image.network("https://i.pravatar.cc/300"),
zoomedScale: 3.0,
clipBehavior: true,
oneTapZoom: true,
doubleTapZoom: false,
),

copied to clipboard

Getting started

dependencies:
  zoom_hover_pinch_image: ^1.0.4

copied to clipboard

How to use

import 'package:zoom_hover_pinch_image/zoom_hover_pinch_image.dart';

copied to clipboard

Usage

/example.

Zoom.zoomOnTap(
child: Image.network("https://i.pravatar.cc/300"),
zoomedScale: 3.0,
clipBehavior: true,
oneTapZoom: true,
doubleTapZoom: false,
),

copied to clipboard

Additional information

If you have any issues, questions, or suggestions related to this package, please feel free to contact us at [e-mail]. We welcome your feedback and will do our best to address any problems or provide assistance. For more information about this package, you can also visit our GitHub repository where you can find additional resources, contribute to the package's development, and file issues or bug reports. We appreciate your contributions and feedback, and we aim to make this package as useful as possible for our users. Thank you for using our package, and we look forward to hearing from you!.