Flutterexperts

In this post, we will talk about the Panorama in Flutter. Flutter is an important topic for mobile UI structures. Hence, I chose to utilize a package for this 360 wide picture viewing experience in the dart for a flutter. In this article, I’ll attempt to clarify how I accomplished this.

360 panorama scene is another procedure that arises recently. It is an exceptional kind of picture and gets all the points of view 360 degrees around the photographic artist from left to right and completely.

Things being what they are, as a Flutter developer, how would we show a 360 panorama picture in a Flutter application? Your first idea is doubtlessly using thePhotoView. Regardless, PhotoView just shows 360 scene displays as a plain picture that doesn’t totally show how remarkable 360 scenes can be.

Panorama Uses:

The panorama let you catch your general surroundings in a unique manner.

• It is a wide shot. It works by panning the device over a scene. The Camera application at that point lines together with a few pictures to build a wide-ranging picture.
• The photograph circle mode resembles a wraparound panorama, covering left, right, up, down, and all around. The conclusive outcome is an interactive picture that you can pan and tilt to see everything around you.

How to Install Flutter :

Installing Flutter SDK into your device is easily done through with the help of going through the official flutter doc and following the steps provided for your respective windows, Linux, macOS at flutter.dev.https://www.youtube.com/embed/fq4N0hgOWzU?feature=oembed

Create a new flutter app

1. Firstly, Create a new project and then clear all the code in the main.dart file. Type below command in your terminal:-

flutter create yourProjectName

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec.yaml file.

dependencies:

panorama: ^latest version
image_picker: ^latets version

We’ll additionally need to add a panoramic picture to our advantages organizer and register this within pubspec.yaml:

flutter:
uses-material-design: true
assets:
  - assets/

Save this inside of aassets/brown_wood.jpg, and we’ll then be able to use this with the Image.asset widget.

Step 2: Import

import 'package:panorama/panorama.dart';
import 'package:image_picker/image_picker.dart';

Step 3: Run flutter packages get in the root directory of your app.

How to implement code in dart file:

You need to implement it in your code respectively:

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:panorama/panorama.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Panorama Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Panorama Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File _imageFile;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Panorama(
        zoom: 1,
        animSpeed: 1.0,
        child: _imageFile != null ? Image.file(_imageFile) : Image.asset('assets/brown_wood.jpg'),
      ),
      floatingActionButton: FloatingActionButton(
        mini: true,
        onPressed: () async {
          _imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
          setState(() {});
        },
        child: Icon(Icons.panorama),
      ),
    );
  }
}

With no further arrangement, we should now have the option to see our panoramic picture within the device. We’re prepared to pan around and see the picture, as observed below:

We will add a floating action button to pick an image from your gallery using ImagePickerPlugin, and you will see a full code on a GitHub, and this is a small demo example to integrate with Panorama, and this below video shows how Panorama will work, and the 360-degree image will show.

Conclusion:

This article would serve as an Exploratory article for Panorama and its working using Flutter.

I hope this blog will provide you with sufficient information in Trying up Panorama in your flutter projects. We’re additionally ready to configure the manner in which our Panoramic picture is connected with utilizing an assortment of choices, for example, setting the animSpeed, latitude, longitude ,zoom, sensitivity, And much more!.

Thanks for reading this article ❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter Panorama Demo:

flutter-devs/flutter_panorama_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---