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

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:

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

32
likes
120
pub points
50%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

cached_network_image, flutter

More

Packages that depend on cloudimage_360_view