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.


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:

    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:

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(
      home: Panorama(

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!


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 ●

Passionate about cross-platform web and mobile development.

© 2021 All rights reserved.

© 2021 | All rights reserved

Subscribe to our newsletter

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