InteractiveViewer doesn't re-scroll child into view when child shrinks

[zathras]

If the child of an InteractiveViewer becomes smaller, it should change the scroll position(s), if necessary, so that the child is visible. It doesn't.

To reproduce with the attached code:
Size window to something smaller than 1000x1000 (e.g. on desktop)
Check checkbox (making child big)
Scroll child so lower-right corner is visible
Uncheck checkbox
Now the child is completely invisible, and can't be scrolled back into view.

This behavior was observed on the MacOS runtime.

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.1, on macOS 11.2.3 20D91 darwin-arm, locale
    en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] IntelliJ IDEA Community Edition (version 2021.1)
[✓] Connected device (2 available)

/// Flutter code sample for InteractiveViewer

// This example shows a simple Container that can be panned
// container size set via checkbox

minimal code sample

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool big = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: MyApp._title,
      home: Scaffold(
        appBar: AppBar(
            leading: Checkbox(
                value: big,
                onChanged: (_) => setState(() {
                      big = !big;
                    })),
            title: const Text(MyApp._title)),
        body: MyStatelessWidget(big: big),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  final double size;
  const MyStatelessWidget({Key? key, required bool big}) :
      size = big ? 1050 : 50,
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: InteractiveViewer(
        boundaryMargin: const EdgeInsets.all(20.0),
        constrained: false,
        scaleEnabled: false,
        panEnabled: true,
        child: Container(
          constraints: BoxConstraints.tight(Size(size, size)),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.orange, Colors.red],
              stops: <double>[0.0, 1.0],
            ),
          ),
        ),
      ),
    );
  }
}

[TahaTesser]

Hi @zathras
Thanks for filing the issue

Reproduced the issue using the following minimal code sample

minimal code sample

/// Flutter code sample for InteractiveViewer

// This example shows a simple Container that can be panned
// container size set via checkbox

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool big = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: MyApp._title,
      home: Scaffold(
        appBar: AppBar(
            leading: Checkbox(
                value: big,
                onChanged: (_) => setState(() {
                      big = !big;
                    })),
            title: const Text(MyApp._title)),
        body: MyStatelessWidget(big: big),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  final double size;
  const MyStatelessWidget({Key? key, required bool big}) :
      size = big ? 1050 : 50,
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: InteractiveViewer(
        boundaryMargin: const EdgeInsets.all(20.0),
        constrained: false,
        scaleEnabled: false,
        panEnabled: true,
        child: Container(
          constraints: BoxConstraints.tight(Size(size, size)),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.orange, Colors.red],
              stops: <double>[0.0, 1.0],
            ),
          ),
        ),
      ),
    );
  }
}

Reproduced on the following channels

stable	master
❌	❌

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.1, on macOS 11.4 20F71 darwin-x64, locale
    en-GB)
    • Flutter version 2.2.1 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 02c026b03c (4 days ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.56.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.22.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.4 20F71 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 91.0.4472.77

• No issues found!

[✓] Flutter (Channel master, 2.3.0-17.0.pre.121, on macOS 11.4 20F71 darwin-x64, locale en-GB)
    • Flutter version 2.3.0-17.0.pre.121 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 71e711547f (12 hours ago), 2021-05-30 19:31:03 -0700
    • Engine revision 73fe3dd31c
    • Dart version 2.14.0 (build 2.14.0-165.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.1.1)
    • IntelliJ at /Volumes/Extreme/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.56.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.22.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.4 20F71 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 91.0.4472.77

• No issues found!

✅ : No Issue ❌: has Issue

[darrenaustin]

cc @justinmc

[justinmc]

@zathras You could work around this by using TransformationController and resetting the matrix when the checkbox is checked.

I see what you mean that this is a bad experience and it would be nice if InteractiveViewer handled it automatically. There are plenty of cases where you wouldn't want InteractiveViewer to change the matrix when the child rebuilds, though... I'm not sure what the solution for all cases would be.

[gmkado]

I'm going to piggy-back on this since I have a similar use-case. I wanted to allow the user to zoom and pan an image, then save off that transform so it can be restored later to get the same view of that image. I noticed that when InteractiveViewer size was changed, the same transform does not result in the same portion of the image being shown.

I understand why that is (at least, I think I do), the transform is operating on pixels so it will translate an absolute screen distance regardless of how big the widget is.

If this is the case, maybe one solution would be to normalize the translation values of the transform based on the size of the widget? So instead of pixels you translate fractions of the widget size