cloudimage_360_view 1.0.3 icon indicating copy to clipboard operation
cloudimage_360_view: ^1.0.3 copied to clipboard

A simple, interactive resource that can be used to provide a virtual tour of your product.

Release pub package Contributions welcome License Cloudimage

cloudimage logo

Flutter Cloudimage 360 View

A simple, interactive resource that can be used to provide a virtual tour of your product.

Shoes AirBuds

Table of contents #

Example #

To build and run the example app:

  1. Get Flutter here if you don't already have it
  2. Clone this repository.
  3. cd into the repo folder.
  4. run flutter run-android or flutter run-ios to build the app.
  • Please note that a Mac with XCode is required to build for iOS


Example Image

Installation #

Add cloudimage_360_view: 1.0.3 to your pubspec.yaml dependencies.

Import Package

import 'package:cloudimage_360_view/cloudimage_360_view.dart';

How To Use #

Simply create a Ci360View widget, and pass the required parameters:

    xImageModel: Ci360ImageModel.horizontal(
        imageFolder: 'your image x folder - check Ci360ImageModel',
        imageName: (index) => '$index.jpg',
        imagesLength: 233,
    yImageModel: Ci360ImageModel.vertical(
        imageFolder: 'your image y folder - check Ci360ImageModel',
        imageName: (index) => 'imagename-y-$index.jpg',
        imagesLength: 36,
    options: Ci360Options(
        swipeSensitivity: 2,
        autoRotate: true,
        rotationCount: 5,
        allowSwipeToRotate: true,
        onImageChanged: (index, reason, axis) {},

Image Model #

Type: class | required

Horizontal (X-Axis)

    required this.imageFolder,
    required this.imageName,
    required this.imagesLength,
Type: class | required

Vertical (Y-Axis)

    required this.imageFolder,
    required this.imageName,
    required this.imagesLength,


Type: String | required

Your images folder on your cloud/cdn. Base Data Folder Url For the main image. i.e


Type: Function | required

The filename pattern for your 360 image in x|y Axis builder. String Function(int index) Must return a valid String path with the called index which the library will call with a number between 1 and imageLength for axis x|y.

    imageName: (index) => 'tesla-x-$index.jpg'
    imageName: (index) => 'tesla-y-$index.jpg'


Type: int | required

Amount of images to load in x | y axis for 360 view. Must Be Valid Length To Get The Valid FileName Of The Image

Options #

Type: class | required
    this.autoRotate = false,
    this.allowSwipeToRotate = true,
    this.rotationCount = 1,
    this.swipeSensitivity = 3,
    this.frameChangeDuration = kShortDuration,
    this.rotationDirection = CIRotationDirection.clockwise,


Type: bool | Default: false | optional

If set to true, the images will be displayed in incremented manner.


Type: bool | Default: true | optional

If set to false, the gestures to rotate the image will be disabed.


Type: int | Default: 1 | optional

The number of cycles the whole image rotation should take place. 0 means infinite rotation.


Type: int | Default: 3 | optional

Based on the value the sensitivity of swipe gesture increases and decreases proportionally. 1 slow and increases speed by +1


Type: Duration | Default: Duration(milliseconds: 80) | optional

The time interval between shifting from one image frame to other.


Type: CIRotationDirection | Default: CIRotationDirection.clockwise | optional

Based on the value the direction of rotation is set.


Type: Function | Default: null | optional

Callback Function(int index, CIImageChangedReason reason, Axis axis) to provide you the index of current image when image frame is changed with the image axis and reason.

Controller #

Ci360Controller #

Type: class | Default: "Ci360ControllerImpl" | optional

The controller of the ci360 package. You can implement your own controllers

class CustomCi360Controller implements Ci360Controller {
 // Should Override this variables as below
  Completer readyCompleter = Completer();

  Ci360State? _state;

  set state(Ci360State? state) {
    _state = state;
    if (!readyCompleter.isCompleted) {
// Implement the required methods with your custom callbacks
// Then Pass Your Custom Controller To [Ci360View] widget.


nextImage #

Type: Function

manually roate to next image.

previousImage #

Type: Function

manually roate to previous image.

rotateToImage #

Type: Function | Parameter: ( int index, [Axis axis = Axis.horizontal] )

manually roate to specified index on specified axis.

stopAutoPlay #

Type: Function

manually stop auto rotate of images. This is a more on-demand way of doing this. Use the autoRotate parameter in Ci360Options to specify the autoRotate behaviour of the ImageView.

startAutoPlay #

Type: Function

manually start auto rotate of images. The ImageView will only autoPlay if the autoRotate parameter in Ci360Options is true.

Best practices #

In order to use cloudimage 360 view, your original (master) images should be stored on a server or storage bucket (S3, Google Cloud, Azure Blob...) reachable over HTTP or HTTPS.

Contributing! #

All contributions are super welcome!

License #

Flutter Cloudimage 360 View is provided under the MIT License

pub points


unverified uploader

A simple, interactive resource that can be used to provide a virtual tour of your product.

Repository (GitHub)
View/report issues


API reference


Icon for licenses.MIT (LICENSE)


cached_network_image, flutter


Packages that depend on cloudimage_360_view