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!

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!