Technique to contain jagged edges in side-by-side panoramas?

[codetricity]

I have two panoramas side by side to compare image transformation. The second Panorama in the row shows a jagged edge. What is the best way to constrain the edge?

          child: Row(
            children: [
              SizedBox(
                width: screenWidth / 2,
                height: screenHeight,
                child: PanoramaViewer(
                  key: _panoAKey,
                  child: Image.asset('assets/images/enhanced.jpg'),
                ),
              ),
              SizedBox(
                width: screenWidth / 2,
                height: screenHeight,
                child: PanoramaViewer(
                  child: Image.asset('assets/images/dark.jpg'),
                ),
              ),
            ],
          ),

[dariocavada]

I'll try ASAP. Did you find this issue for the web or for iOS/Android ?

[codetricity]

Android Pixel 3a

This example shows a blank square box on the left to make the jagged edge more visible. There may be a simple way to contain the PanoramaViewer with a standard Flutter widget constraint. I don't know Flutter that well. This might not be a problem with the panorama_viewer code. The solution might be a constraint that I could apply on a Flutter widget that has PanoramaViewer as a child. Maybe SizedBox has a better way to constrain the PanoramaViewer widget?

Row(
    children: [
      SizedBox(
        width: screenWidth / 2,
        height: screenHeight,
        child: PanoramaViewer(
          key: _panoAKey,
          child: Image.asset(
              'assets/images/public/ricoh_carlsbad.jpg'),
        ),
      ),
      SizedBox(
        width: screenWidth / 2,
        height: screenHeight,
        child: PanoramaViewer(
          key: _panoBKey,
          child: Image.asset(
              'assets/images/public/ricoh_carlsbad_oilify.jpg'),
        ),
      ),
    ],
  ),

[dariocavada]

I've tried with your code (using the panoramas I have in the example folder) and I don't see the error...

I've updated github examples with example5 side by side panoramas: example/lib/screens/example_screen_5.dart

And the screenshot of what I see on my Android Redmi Note 10:

Maybe is the format of the photos ? or something else in your code ? Could you please share the full code and the photos so I can check and replicate the error ?

[codetricity]

Do you see an edge if you rotate the right image

Here's another view of the problem.

Screencast from 04-26-2024 10:57:58 AM.webm

BTW, thank you again for keeping this project alive. It's a very useful viewer for the Flutter community. Also, thanks for the examples directory. It's really helpful for me.

[dariocavada]

Updated the example_screen_5 with ClipRect: https://github.com/dariocavada/panorama_viewer/blob/main/example/lib/screens/example_screen_5.dart

[codetricity]

thank you. I really appreciate your help. This has been bothering me for a while. I didn't know about ClipRect. You really helped out my project. Have a wonderful weekend. Really appreciate all your work.