Flutter Question posted in
The official Flutter documentation can be found here.

how to zoom container in flutter

i have to make that type zoom effect to container how use in flutter without any package.

enter image description here

if use interactive view that time red container padding 20 not set as constant if green zoom that time red also zoom.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Container Layout'),
        ),
        body: Container(
          color: Colors.red, // Red container in full screen
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: InteractiveViewer(
            boundaryMargin: EdgeInsets.all(double.infinity),
            minScale: 0.1,
            maxScale: 4,
            child: Center(
              child: Padding(
                padding: EdgeInsets.all(20.0), // Padding of 20 on all sides for green container
                child: Container(
                  width: 200.0,
                  height: 200.0,
                  color: Colors.green, // Green container
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    You can use Transform.scale inside GestureDetector like below instead use of
    InteractiveViewer.

    double _scale = 1.0;

    GestureDetector(
            onScaleStart: (details) {
              setState(() {
                _scale = 1.0;
              });
            },
            onScaleUpdate: (details) {
              setState(() {
                _scale = details.scale.clamp(1.0, 4.0);
              });
            },
            child: Transform.scale(
              scale: _scale,
              child: Image.asset('assets/your_image.png'), 
            ),
          )
    Login or Signup to reply.
  2. 0

    If your issue just with padding wrap the InteractiveViewer widget itself with padding :

    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Container Layout'),
      ),
      body: Container(
        color: Colors.red, // Red container in full screen
        width: double.infinity,
        height: double.infinity,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: InteractiveViewer(
            boundaryMargin: const EdgeInsets.all(double.infinity),
            minScale: 0.1,
            panEnabled: false,
            maxScale: 4,
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(
                    20.0), // Padding of 20 on all sides for green container

                child: Container(
                  margin: const EdgeInsets.all(20),
                  width: 200.0,
                  height: 200.0,
                  color: Colors.green,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

    I create this method to zoom Image with specific action :

    void zoomImage() {
    matrixAnimation = Matrix4Tween(
      begin: Matrix4.identity(),
      end: Matrix4(
        2, 0, 0, 0,
        0, 2, 0, 0,
        0, 0, 2, 0,
        0, 0, 0, 1,
      ),
    ).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.easeInOut,
      ),
    );
    _animationController.forward(from: 1.0);
  }

    and this method to reset the original image:

     void resetAnimation() {
    matrixAnimation = Matrix4Tween(
      begin: _transformationController.value,
      end: Matrix4.identity(),
    ).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.easeInOut,
      ),
    );
    _animationController.forward(from: 0);

    controllers :

    late TransformationController _transformationController;
  late AnimationController _animationController;
  late Animation<Matrix4> matrixAnimation;
  @override
  void initState() {
    _transformationController = TransformationController();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(
        milliseconds: 300,
      ),
    )
      ..addListener(
        () {
          _transformationController.value = matrixAnimation.value;
        },
      )
      ..addStatusListener(
        (AnimationStatus status) {
          if (status == AnimationStatus.completed) {
            log("Animation State done");
          }
        },
      );
    super.initState();
  }

    Hope that helps !!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search