zoom_hover_pinch_image 1.0.4 copy "zoom_hover_pinch_image: ^1.0.4" to clipboard
zoom_hover_pinch_image: ^1.0.4 copied to clipboard

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

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Optional ZoomManager instance
  final ZoomManager? zoomManager = ZoomManager();

  late ZoomController zoomController;

  @override
  void initState() {
    zoomController = ZoomController(
      maxScale: 4.0,
      minScale: 1.0,
      animationDuration: const Duration(milliseconds: 400),
      animationCurve: Curves.easeOutQuart,
    );
    super.initState();
  }

  @override
  void dispose() {
    // Dispose the controller when not needed
    zoomController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.sizeOf(context);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter Demo Home Page'),
      ),
      body: SizedBox(
        width: size.width,
        height: size.height,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              const SizedBox(height: 10),
              Zoom(
                zoomManager: zoomManager,
                width: size.width,
                child: Image.network(
                  'https://salamdonya.com/assets/images/31/3123pacn7.jpg',
                ),
              ),
              const SizedBox(height: 10),
              Zoom.hover(
                zoomManager: zoomManager,
                width: size.width * 0.6, // Optional ZoomManager
                child: Image.network(
                  'https://salamdonya.com/assets/images/68/6894ugohl.jpg',
                ),
              ),
              const SizedBox(height: 10),
              Zoom.hoverMouseRegion(
                zoomController: zoomController, // Optional ZoomManager
                maxScale: 4,
                hoverWidth: 400,
                hoverHeight: 600,
                height: 600,
                width: size.width,
                child: Image.network(
                  'https://salamdonya.com/assets/images/54/5429725jv.jpg',
                ),
              ),
              const SizedBox(height: 10),
              Zoom.pinch(
                zoomManager: zoomManager,
                width: size.width, // Optional ZoomManager
                child: Image.network(
                  'https://salamdonya.com/assets/images/54/5429725jv.jpg',
                ),
              ),
              const SizedBox(height: 10),
              Zoom.zoomOnTap(
                zoomManager: zoomManager,
                width: size.width, // Optional ZoomManager
                child: Image.network(
                  'https://salamdonya.com/assets/images/45/4595h65r7.jpg',
                ),
              ),

              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const Screen()),
                  );
                },
                child: const Text('Click me'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
copied to clipboard
10
likes
160
points
461
downloads

Publisher

verified publisherswanflutterdev.com

Weekly Downloads

2024.10.07 - 2025.04.21

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

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on zoom_hover_pinch_image