
Create a Panoramic Image Viewer in Flutter using the panorama plugin
Have you ever wanted to display 360 degree images inside of your Flutter application(s)? I came across this new plugin earlier today named panorama (currently version 0.0.2) which does exactly that!
Have you ever wanted to display 360 degree images inside of your Flutter application(s)? I came across this new plugin earlier today named panorama
(currently version 0.0.2) which does exactly that!
Video
For those of you that prefer video tutorial(s) to see how this is done in real-time, check this out:
Project Setup
Let's go ahead and create a new Flutter project:
$ flutter create my_pano
$ cd my_pano
$ code .
We can then add the panorama
plugin inside of our pubspec.yaml
:
dependencies:
flutter:
sdk: flutter
panorama: ^0.0.2
If your environment doesn't run flutter pub get
by default, make sure to run this inside of your terminal prior to going further with this article. We'll also need to add a panoramic image to our assets
folder and register this inside of pubspec.yaml
:
flutter:
uses-material-design: true
assets:
- assets/images/
I've elected to use the following image found at: https://www.pexels.com/photo/blue-clouds-dawn-daylight-207385/
Save this inside of assets/images/pan.jpeg
, and we'll then be able to use this with the Image.asset
widget.
Using Panorama
The Panorama
widget requires a child
which we'll be pointing at our panoramic image at:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Panorama',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Panorama(
child: Image.asset('assets/images/pan.jpeg'),
),
);
}
}
Without any further configuration, we should now be able to see our panoramic image inside of the emulator. We're able to pan around and view the image, as seen below:

We're also able to configure the way our Panoramic image is interacted with using a variety of options such as setting the animSpeed
, latitude
, longitude
zoom
, sensitivity
, and much more!