Panoramic Image Viewer in Flutter using the panorama plugin

Paul Halliday

Have you ever wanted to display 360 degree images inside of your Flutter application(s)? The panorama plugin is a simple way to do exactly that.

Video

Prefer to watch a video? Here's a video that explains how to use the panorama plugin:

Project Setup

Create a new Flutter project by running the following command in your terminal:

$ flutter create my_pano

$ cd my_pano

$ code .

Next, add the panorama plugin inside of your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
    
  panorama: ^0.4.1

If your environment doesn't run flutter pub get by default, make sure to run ``flutter pub get` inside of your terminal prior to going further with this article.  

Showing a 360 Image

To show a 360 image you'll need to either add your image as an asset, or load the image from a URL.

I've elected to use the following image found at: https://www.pexels.com/photo/blue-clouds-dawn-daylight-207385/

Add the the Panorama widget to your Flutter application. The Panorama widget requires an image source that you can pass in as a child parameter.

import 'package:panorama/panorama.dart';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Panorama',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Panorama(
        child: Image.network(
            'https://images.pexels.com/photos/207385/pexels-photo-207385.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'),
      ),
    );
  }
}

Without any further configuration, you should now be able to see our panoramic image inside of the emulator. You're able to pan around and view the image, as seen below:

Panoramic Image viewer

You'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!

Conclusion

The panorama plugin is a simple way to display 360 degree images inside of your Flutter application(s). With a few simple steps, you can now create a panoramic image viewer that you can use to display 360 degree images inside of your Flutter application(s).

Paul Halliday's avatar
Paul Halliday's avatar

Paul Halliday

Creator ● developer.school

Passionate about cross-platform web and mobile development.

developer.school

© 2021 developer.school. All rights reserved.

© 2021 developer.school | All rights reserved

Subscribe to our newsletter

The latest news, articles, and resources, sent to your inbox weekly.