Flutter Cloudimage 360 View

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

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

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:

• Horizontal Model (xImageModel | optional if (yAxis) provided
• Vertical Model (yImageModel) | optional if (xAxis) provided
• Ci360Options (options)

Ci360View(
    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)

Ci360ImageModel.horizontal({
    required this.imageFolder,
    required this.imageName,
    required this.imagesLength,
  });

Type: class | required

Vertical (Y-Axis)

Ci360ImageModel.vertical({
    required this.imageFolder,
    required this.imageName,
    required this.imagesLength,
  });

imageFolder

Type: String | required

Your images folder on your cloud/cdn. Base Data Folder Url For the main image. i.e https://domain.com/images/360-tesla/

imageName

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.

i.e

Ci360Options.horizontal({
    imageName: (index) => 'tesla-x-$index.jpg'
  });

Ci360Options.vertical({
    imageName: (index) => 'tesla-y-$index.jpg'
  });

imagesLength

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

Ci360Options({
    this.autoRotate = false,
    this.allowSwipeToRotate = true,
    this.rotationCount = 1,
    this.swipeSensitivity = 3,
    this.frameChangeDuration = kShortDuration,
    this.rotationDirection = CIRotationDirection.clockwise,
    this.onImageChanged,
  });

autoRotate

Type: bool | Default: false | optional

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

allowSwipeToRotate

Type: bool | Default: true | optional

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

rotationCount

Type: int | Default: 1 | optional

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

swipeSensitivity

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

frameChangeDuration

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

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

rotationDirection

Type: CIRotationDirection | Default: CIRotationDirection.clockwise | optional

Based on the value the direction of rotation is set.

onImageChanged

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

i.e

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

  Ci360State? _state;

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

Methods

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

GitHub

View Github