the error message showed at the debug console :
The Android Gradle plugin supports only Kotlin Gradle plugin version 1.5.20 and higher.
The following dependencies do not satisfy the required version:
project ':motion_sensors' -> org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.50

can we rotate picture by rotating phone like facebook 360 photos?

As the device rotates, the picture rotates.

Hi, first of all, I really love your plugin men, awesome job 😎🤘

I like to suggest a new feature, I think it could be very useful.
Feature: Add widget(s) on a given position.

The idea could be add to the current panorama class a list of objets(a widget with the position in the scene):

Panorama(
  child: Image.asset('assets/panorama.jpg'),
  widgets: <PositionedWidget>[]
),

And the PositionedWidget Class something like:

PositionedWidget {
  Vector3 position,
  Widget widget
}

This could be used to add (for example):

• A button in a position of the image an enable new interactions
• A text/hint when the user click a widget.
• Etc.

not show image black screen

IOS-> not support
Android -> support

• Fixed with downgrade Flutter version 3.7.12

[✓] Flutter (Channel stable, 3.10.0, on macOS 13.3.1 22E772610a darwin-arm64, locale en-TH)
• Flutter version 3.10.0 on channel stable at /Users/?????????/Desktop/????????/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 84a1e904f4 (2 days ago), 2023-05-09 07:41:44 -0700
• Engine revision d44b5a94c9
• Dart version 3.0.0
• DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at /Users/???????/Library/Android/sdk
• Platform android-33, build-tools 33.0.2
• ANDROID_HOME = /Users/??????/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E222b
• CocoaPods version 1.12.1

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

[✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (3 available)
• sdk gphone arm64 (mobile) • emulator-5554 • android-arm64 • Android 11 (API 30) (emulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.3.1 22E772610a darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 113.0.5672.92

[✓] Network resources
• All expected network resources are available.

• No issues found!

As the title stated: Is it possible to create transitions like zoom/fade transitions between views or are there plans to integrate transitions into the package? I am fairly new to flutter, I tried out traditional transition widgets without luck, but maybe I used them in a wrong way.

can i download the image after convertion?

Hi
very nice component. Could be very nice if you add the support to stereoscopic view to use with Google Cardboard!!

While loading 360 images from network, I wanted to show circularProgressIndicator when image is not loaded. But Panorama keeps showing blank background:

Code :

Panorama(
child: Image.network(
panoramaURL,
loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,),
);
},
),
),

I am trying to upload an image of 5MB with a resolution of 8192 x 4096 on mobile web, but it throws the following error.

"WebGL: INVALID_VALUE: texImage2D: width or height out of range,
GL_INVALID_OPERATION: Texture format does not support mipmap generation."

The strange thing is that it works correctly on desktop web and in the normal application, any idea why this could be happening only on mobile web?

Hello yesterday it was working fine but today i opened new project and build apk. it is working on simulators and on debug mode in ios but in release mod on android it is not working

Hello, I love your work but it shows a blank page with impeller engine and works fine on skia engine. please help.
The issue happened on both ios and android when impeller engine is on.

When I use network image as Image provider, I get the image quality so bad.

      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        elevation: 0,
      ),
      body: SizedBox(
        height: size.height,
        width: size.width,
       child: Panorama(
          //animSpeed: 1.0,
          //sensorControl: SensorControl.Orientation,
          child: Image.network(imageURL),
       ),
      ),
    );```

How can I solve this issue?

I added webview widget as a hotspot into the panorama, the problem is this bigger size widget appears to be floating rather than stitched into the scene. The smaller size widgets appear to be stitched in, as the buttons int example but not bigger sizes, how can we tackle this?

How to get start and end position of the image using the below code,
Panorama( animSpeed: 2.0, child: _imageFile != null ? Image.file(_imageFile) : Image.asset('assets/panorama.jpg'), ),

In the last version of the plugin when I configure the Panorama object with:

Panorama(
...
sensorControl: SensorControl.Orientation,
...
)

Is not moving with the mobile sensors, not even with touch.

It's only working with touch if sensorControl it's configure with the default value (SensorControl.None)

@zesage can you check this please?

Please include null safety support to this amazing plugin

I need to get pixel x,y position of image onTap event. How can I calculate latLng to Pixels?

Hi,
i'm running panorama in Ios, and give me this error when running the plugin:

======== Exception caught by image resource service ================================================
The following NoSuchMethodError was thrown by a synchronously-called image listener:
The getter 'mesh' was called on null.
Receiver: null
Tried calling: mesh

When the exception was thrown, this was the stack:
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:54:5)
#1 _PanoramaState._updateTexture (package:panorama/panorama.dart:295:13)
#2 ImageStreamCompleter.addListener (package:flutter/src/painting/image_stream.dart:495:25)
#3 MultiFrameImageStreamCompleter.addListener (package:flutter/src/painting/image_stream.dart:962:11)
#4 ImageStream.addListener (package:flutter/src/painting/image_stream.dart:358:26)

When I try to fix the height of the image I faced an error. in my case the image size quality is low and panorama shows it in full-screen height so my image was pixelated. why I can't fix the height in this widget?

Incorrect shape and bounds are rendered as you can see in the image

Container( height: 300, width: MediaQuery.of(context).size.width, color: Colors.red, child: Panorama( animSpeed: 1, child: Image.asset("assets/images/panorama.jpg"), ), ),

This package is great, but panorama images that do not cover the full 360/180 are stretched.

This happens when the panorama is cropped, for example with the CroppedAreaLeftPixels and CroppedAreaTopPixels from the Google panorama spec: https://developers.google.com/streetview/spherical-metadata

It would be nice if the Panorama constructor provided parameters to specify the cropped area.

When the image does not cover the full 360/180, some apps just render a black background, some apps do something fancier (for example Google Photos interpolates the pixels from the edge of the image to fill the background). Personally I would be happy with a plain black background, but it can be something fun to explore.

hi i tried to implement this panorama plugin for flutter web.
but i found this error :
════════ Exception caught by rendering library ═════════════════════════════════ Unsupported operation: ImageShader not implemented for web platform. The relevant error-causing widget was Panorama
I think this doesn't support web :(
how can i implement panorama viewer in flutter web?
Please answer. Thanks :)

FAILURE: Build failed with an exception.

• What went wrong:
  Could not determine the dependencies of task ':app:processDebugResources'.

Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
Could not resolve androidx.window:window:[1.0.0-beta04].
Required by:
project :app > project :flutter_plugin_android_lifecycle > io.flutter:flutter_embedding_debug:1.0.0-e85ea0e79c6d894c120cda4ee8ee10fe6745e187 > androidx.window:window-java:1.0.0-beta04
> Failed to list versions for androidx.window:window.
> Unable to load Maven meta-data from https://google.bintray.com/exoplayer/androidx/window/window/maven-metadata.xml.
> Could not get resource 'https://google.bintray.com/exoplayer/androidx/window/window/maven-metadata.xml'.
> Could not GET 'https://google.bintray.com/exoplayer/androidx/window/window/maven-metadata.xml'. Received status code 502 from server: Bad Gateway

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

Any idea how to fix this ?

This is my first time using flutter.
Any help is greatly appreciated.

I'd like to create 2 scroll bars that would control the orientation/position of the panorama from outside of the panorama widget.

Is that possible using this package, how would I go about implementing that?

I was trying with the panorama package but I just can't figure out where and how to hook into it so that the panorama live updates when I drag the scrollbars.

Thank you 🙏

Hi, is there any option to use this plugin with VR lenses?

I'm using flutter cached_network_image component for panoramas.
Some panorama have quite big size (8-12Mb).
Any idea how to show a spinner to show the downloading phase ?

hello dear

after set "interactive = true" when change position of camera with touch (movement without gyroscope) it show lot of error on logs and movement is not good

════════ Exception caught by gesture ═══════════════════════════════════════════════════════════════
The method 'call' was called on null.
Receiver: null
Tried calling: call()

Error on line 24, column 3 of pubspec.yaml: A package may not list itself as a dependency.
╷
24 │ panorama: ^0.4.0
│ ^^^^^^^^
╵
pub get failed (65; ╵)
Process finished with exit code 65

can you Support web platform ?

As the title says, my panorama or photosphere image turns into pixelated quality when loaded in panorama widget, when I'm viewing it on google photos or websites that can view panorama the quality is fine. I've tried lowering the DPI of the image to 72 and it didn't worked. Also tried filterQuality: FilterQuality.high in image.asset widget and I also tried isAntiAliasing: true but this doesn't fixed my problem.

The Android Gradle plugin supports only Kotlin Gradle plugin version 1.5.20 and higher.
The following dependencies do not satisfy the required version:
project ':motion_sensors' -> org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.50

Can I load multiple panoramas using a stack?

If I open a screen where I have a panorama widget from the home page and then go back to the home page, in the console I have several errors because the gyroscope event continues to be sent by the panorama component ...

A way to solve this issue is to assign this.scene = null in the dispose of the panorama.dart code:

@override
  void dispose() {
    this.scene = null;
    _controller.dispose();
    super.dispose();
  }

Hello, How can I user loadingBuilder on images?

Hello? is there a way, to get tap position Vector3 coordinate on panorama?

point not set proper on image when i set latitude longitude on image

problem is when i set my latitude and longitude then it create issue if i pass same as package example it work but when i try to set my latitude longitude then it not set on proper location on image how can i set my latitude and longitude on image ?

my response latitude longitude

        Hotspot(
                      latitude: -0.28432929839672116,
                      longitude: 1.616277412081424,
                      width: 32.0,
                      height: 32.0,
                      widget: hotspotButton(text: "Next scene", icon: Icons.double_arrow, onPressed: () => setState(() => _panoId++)),
                    ),
                    Hotspot(
                      latitude: -0.09803491532566011,
                      longitude: 3.5010972079769416,
                      width: 32.0,
                      height: 32.0,
                      widget: hotspotButton(text: "Next scene", icon: Icons.double_arrow, onPressed: () => setState(() => _panoId++)),
                    ),
                    Hotspot(
                      latitude: -0.2971211211941356,
                      longitude: 4.726412439317375,
                      width: 32.0,
                      height: 32.0,
                      widget: hotspotButton(text: "Next scene", icon: Icons.double_arrow, onPressed: () => setState(() => _panoId++)),
                    ),

Hello,

I wanted to inquire about the ongoing maintenance of the "Flutter Panorama" package. I've noticed that there haven't been recent updates and was wondering if there are plans for future releases.

Additionally, are there any recommended alternatives to this package in case it's no longer being maintained?

If help is needed in maintaining or updating the package, I'm willing to contribute. It's a pity if this useful package is not updated.

Thank you in advance for your response and for your hard work on this package!

Best regards,
Dario Cavada

hi just download the project from github
and when i try to run it just give me this error:
didn't change enything on the code:

The following assertion was thrown during paint():
'package:flutter/src/rendering/layer.dart': Failed assertion: line 1586 pos 12: 'value!.storage.every((double component) => component.isFinite)': is not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=BUG.md

The relevant error-causing widget was:
Panorama file:///home/ruben/Transfer%C3%AAncias/panorama-master/example/lib/main.dart:66:11
When the exception was thrown, this was the stack:
#2 TransformLayer.transform= (package:flutter/src/rendering/layer.dart:1586:12)
#3 PaintingContext.pushTransform (package:flutter/src/rendering/object.dart:576:13)
#4 RenderTransform.paint (package:flutter/src/rendering/proxy_box.dart:2298:25)
#5 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2311:7)
#6 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:189:13)
...
The following RenderObject was being processed when the exception was fired: RenderTransform#65483
... needs compositing
... parentData: top=NaN; left=NaN; width=90.0; height=75.0; offset=Offset(NaN, NaN) (can use size)
... constraints: BoxConstraints(w=90.0, h=75.0)
... layer: TransformLayer#f9c72 DETACHED
... engine layer: TransformEngineLayer#fa266
... offset: Offset(0.0, 0.0)
... transform: [0] 0.5,0.0,0.9,532.2
[1] 0.2,1.0,-0.1,-206.9
[2] -0.9,0.3,0.5,686.0
[3] 0.0,0.0,0.0,1.0
... size: Size(90.0, 75.0)
... transform matrix: [0] NaN,NaN,NaN,NaN
[1] NaN,NaN,NaN,NaN
[2] NaN,NaN,NaN,NaN
[3] NaN,NaN,NaN,NaN
... origin: Offset(45.0, 37.5)
... alignment: null
... textDirection: ltr
... transformHitTests: true
RenderObject: RenderTransform#65483
needs compositing
parentData: top=NaN; left=NaN; width=90.0; height=75.0; offset=Offset(NaN, NaN) (can use size)
constraints: BoxConstraints(w=90.0, h=75.0)
layer: TransformLayer#f9c72 DETACHED
engine layer: TransformEngineLayer#fa266
offset: Offset(0.0, 0.0)
transform: [0] 0.5,0.0,0.9,532.2
[1] 0.2,1.0,-0.1,-206.9
[2] -0.9,0.3,0.5,686.0
[3] 0.0,0.0,0.0,1.0
size: Size(90.0, 75.0)
transform matrix: [0] NaN,NaN,NaN,NaN
[1] NaN,NaN,NaN,NaN
[2] NaN,NaN,NaN,NaN
[3] NaN,NaN,NaN,NaN
origin: Offset(45.0, 37.5)
alignment: null
textDirection: ltr
transformHitTests: true
... child: RenderOffstage#3bdd5
... needs compositing
... parentData: (can use size)
... constraints: BoxConstraints(w=90.0, h=75.0)
... size: Size(90.0, 75.0)
... offstage: false
... child: RenderFlex#7cbde
... needs compositing
... parentData: (can use size)
... constraints: BoxConstraints(w=90.0, h=75.0)
... size: Size(90.0, 75.0)
... direction: vertical
... mainAxisAlignment: center
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
... child 1: RenderSemanticsAnnotations#ac26a relayoutBoundary=up1
... needs compositing
... parentData: offset=Offset(1.0, 1.5); flex=null; fit=null (can use size)
... constraints: BoxConstraints(0.0<=w<=90.0, 0.0<=h<=Infinity)
... semantic boundary
... size: Size(88.0, 48.0)
... child: _RenderInputPadding#af226 relayoutBoundary=up2
... needs compositing
... parentData: (can use size)
... constraints: BoxConstraints(0.0<=w<=90.0, 0.0<=h<=Infinity)
... size: Size(88.0, 48.0)
... child 2: RenderDecoratedBox#8e262 relayoutBoundary=up1
... parentData: offset=Offset(0.0, 49.5); flex=null; fit=null (can use size)
... constraints: BoxConstraints(0.0<=w<=90.0, 0.0<=h<=Infinity)
... size: Size(90.0, 24.0)
... decoration: BoxDecoration
... color: Color(0x61000000)
... borderRadius: BorderRadius.circular(4.0)
... configuration: ImageConfiguration(bundle: PlatformAssetBundle#9bf52(), devicePixelRatio: 2.8, locale: en_US, textDirection: TextDirection.ltr, platform: android)
... child: RenderPadding#0a2d0 relayoutBoundary=up2
... parentData: (can use size)
... constraints: BoxConstraints(0.0<=w<=90.0, 0.0<=h<=Infinity)
... size: Size(90.0, 24.0)
... padding: EdgeInsets.all(4.0)
... textDirection: ltr

https://photo-sphere-viewer.js.org/guide/adapters/cubemap.html#example

Hi thanks for the plugin.Are you planning to add support for device rotations anytime soon ? If not, how would you go about implementing it? I will try to implement it and make pr request if successful.

When viewing a photosphere using the device compass, I'd like the image to be correctly oriented to the real world.
This is when using...
sensorControl: SensorControl.AbsoluteOrientation

I've been looking into the metadata of a generated photosphere image, and have found that there is metadata that describes the bearing of a photosphere image.
https://developers.google.com/streetview/spherical-metadata
GPano:PoseHeadingDegrees: Compass heading, measured in degrees clockwise from North, for the center the image. Value must be >= 0 and < 360.

Is there a way to add a heading offset already, or would it be a simple task to implement one?
I'd be happy to fork and implement myself, especially if anyone is willing to point me in the right direction.
Thanks!

Is there a way to get Panorama images from the phone Camera using your package or by any other means (if so, please provide any examples)?

If not, I would appreciate if you can implement it as a feature!

Sometimes image is not loading on multiple panorama

version: 0.4.1

Should be some way to pass a Callback function to the widget. Then, this Callback would be called when longitude and latitude values changed, passing these values back. This would really help me.

i'm using the plugin and if i open it several times it will use a lot of memory and crash

• thread #10, name = 'io.flutter.1.ui', stop reason = EXC_RESOURCE RESOURCE_TYPE_MEMORY (limit=1450 MB, unused=0x0)
  frame #0: 0x0000000105b5e438 Flutterflutter::(anonymous namespace)::DecodePoints(tonic::TypedList<(Dart_TypedData_Type)10, float> const&, SkPoint*) + 88 Flutterflutter::(anonymous namespace)::DecodePoints:
  -> 0x105b5e438 <+88>: stp w23, w8, [x9]
  0x105b5e43c <+92>: ldr x1, [x20, #0x8]
  0x105b5e440 <+96>: add x22, x22, #0x1 ; =0x1
  0x105b5e444 <+100>: add x21, x21, #0x2 ; =0x2
  Target 0: (Runner) stopped.
  Lost connection to device.