Top & Bottom Parts of the image is "lost" when zooming in

[wooldridgetm]

I discovered that when the height of the PhotoView isn't set to full-screen, then after zooming in, the top & bottom parts of the image aren't visible to the user.

I think it's because in _PhotoViewImageWrapperState, Fx _clampPosition(Offset), we're using the screen's width & height instead of the UI Component's width & height.

final screenHeight = MediaQuery.of(context).size.height needs to be final screenHeight = context.size.height (and likewise for width).

Hopefully that all makes sense.
Great job on this, btw. Works great.

[renancaraujo]

You are right. I think we should include an example when photo view isn't used as a full-screen widget.

[wooldridgetm]

I can provide you a link to a repo with an example if you'd like.

[renancaraujo]

I will see what we can do to avoid that. Further PR is coming.

[sgon00]

This problem does not only happen when zooming in, PhotoViewScaleBoundary.contained will also make the top and bottom parts lost. Check the following screenshots:

[renancaraujo]

Could you upload the code of this example perhaps?
It would help me to figure out what is causing this weird behavior.

[sgon00]

@renancaraujo sure, the code is very simple.

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bug Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(''),
        ),
        body: Container(
          child: PhotoView(
            minScale: PhotoViewScaleBoundary.contained,
            maxScale: 3.0,
            backgroundColor: Color.fromRGBO(255, 255, 255, 1.0),
            loadingChild: Center(child: CircularProgressIndicator()),
            imageProvider: AssetImage('assets/100x500.png'),
          )
        ),
      ),
    );
  }
}

pubspec.yaml

dependencies:
  photo_view: ^0.0.4

  assets:
   - assets/100x500.png

assets/100x500.png

[renancaraujo]

In order to be used inside a sized box, PhotoView widget must know is size. And that is a hard thing to do. This is a known issue in Flutter. So, I had to install After Layout to make things work right.

Instead of adding this dependency to the main PhotoView class, I've created a new one wrapping it, PhotoViewInline. In this way, anyone who doesn't want to use PhotoView in the inline mode, can take advantage of the tree shaking compiler and not carry After Layout's code into the packaged app.

Sample code:

        body: Container(
          child: PhotoViewInline(
            minScale: PhotoViewScaleBoundary.contained,
            maxScale: 3.0,
            backgroundColor: Color.fromRGBO(255, 255, 255, 1.0),
            loadingChild: Center(child: CircularProgressIndicator()),
            imageProvider: AssetImage('assets/100x500.png'),
          )
        ),

This feature will be available at the 0.0.5 release