Cylindar / Pill

[jtkeyva]

Very cool package! Is it possible to use a cylinder or pill shape rather than a sphere for the panning? This way we can use any image to pan around with no distortion which could be useful in other applications.

Could also have custom top and bottom images for a cylinder.

One challenge would be tilting on the Y axis would prob be better to pan up and down rather than tilt.

Thanks

[dariocavada]

I created this package because the original one was not compatible with the latest versions of Flutter. If there are integrations that you would like to make, you can submit a pull request with the code to be corrected or added. Unfortunately, I don't have the time to add further features, but I am currently only maintaining the package for the latest versions of Flutter and dependencies of the component from any updated packages.

[jtkeyva]

got it thx

[dariocavada]

If you would like to look inside a code to found a solution I will implement in a new version

[dariocavada]

If you like to add an image that you could just pan (not really a cylindrical panorama) you could see the following:

Implementing a cylindrical panorama viewer in Flutter, similar to the kind produced by smartphone panoramic photo features, involves rendering a wide image in a scrollable view that allows horizontal panning. For a basic implementation, you can use the InteractiveViewer widget, which supports both panning and zooming, making it suitable for viewing panoramic images.

The InteractiveViewer widget is a versatile tool in Flutter's widget library that can be easily adapted for different types of content viewing experiences, including cylindrical panoramas. Here's a simple example of how you might set it up for a cylindrical panorama:

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('Cylindrical Panorama Viewer'),
        ),
        body: PanoramaViewer(),
      ),
    );
  }
}

class PanoramaViewer extends StatelessWidget {
  @override
Widget build(BuildContext context) {
    return InteractiveViewer(
      panEnabled: true, // Enable panning
      boundaryMargin: EdgeInsets.all(100), // Optional margin for boundaries
      minScale: 0.5, // Minimum zoom scale
      maxScale: 4, // Maximum zoom scale
      child: Image.network(
        'https://example.com/your-panorama-image.jpg',
        fit: BoxFit.cover, // Use BoxFit.cover to maintain aspect ratio while filling the space
      ),
    );
  }
}

This example uses InteractiveViewer to display a panorama image from a network source. You can adjust panEnabled, minScale, and maxScale to fine-tune the user interaction. The boundaryMargin property is optional and adds extra space around the image when zoomed out, which can be useful depending on the desired user experience.

For more complex or specific panorama viewing needs (like truly simulating a cylindrical wrap-around effect), you might need a more specialized package or custom OpenGL rendering with flutter_gl or similar packages. These approaches would allow for more sophisticated effects but would also require a deeper dive into graphics programming.

Keep in mind that the URL in the Image.network widget should be replaced with the URL of your panoramic image. If your image is stored locally, consider using Image.asset instead.