AutoScroll to a offset in interactive viewer in flutter

user_7973386 0
Viewed 1686

With the Interactive viewer documentation i came to know that we can autoscroll to a particular position in Interactive viewer with toScene method.But i tried but everything in vain.How to autoscroll to an offset given the positions in interactive viewer

 import 'dart:async';

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

class MyPlanet extends StatefulWidget {
  @override
  _MyPlanetState createState() => _MyPlanetState();
}

class _MyPlanetState extends State<MyPlanet> {
  final TransformationController transformationController =
      TransformationController();

  @override
  void initState() {
    SchedulerBinding.instance.addPostFrameCallback((_) async {
      Timer(Duration(seconds: 5), () {
        setState(() {
          transformationController.value = Matrix4.identity()
            ..translate(800, 0.0);
          transformationController.toScene(Offset(800, 0.0));
        });
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return InteractiveViewer(
      minScale: 0.5,
      maxScale: 1,
      constrained: false,
      transformationController: transformationController,
      child: Container(
        height: 896,
        width: 2000,
        child: Image.asset(
          'assets/images/rain_forest.png',
          fit: BoxFit.cover,
          height: double.infinity,
        ),
      ),
    );
  }
}
flutter-animation flutter-layout flutter
2 Answers

Thanks @pskink. Autoscroll in interactive viewer can be achieved by using TransformationController and matrix4

@override
void initState() {
TransformationController transformationController =
      TransformationController();
transformationController.value = Matrix4.identity()
        ..translate(-200.0, 0.0); // translate(x,y);
}
user_79733860

Above solution not work for me - it move whole image on the screen, not only set needed position. I resolve issue with this example https://api.flutter.dev/flutter/widgets/InteractiveViewer/transformationController.html

Define end point for scroll for example by link:

Matrix4 scrollEnd = Matrix4.identity();
scrollEnd.setEntry(1, 3, -700); // y = 700

_controllerReset.reset();
_animationReset = Matrix4Tween(
  begin: Matrix4.identity(),
  end: scrollEnd,
).animate(_controllerReset);
  _animationReset!.addListener(_onAnimateReset);
  _controllerReset.forward();
user_87182040
Related