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!

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!

#flutter #dart #mobileapps