cloudimage_360_view

Description:

cloudimage 360 view

Flutter Cloudimage 360 View

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




Table of contents #

Example
Installation
How To Use
Image Model
Options
Controller
Best practices
Contributing
License

Example #
To build and run the example app:

Get Flutter here if you don't already have it
Clone this repository.
cd into the repo folder.
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';
copied to clipboard
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) {},
),
)
copied to clipboard
Image Model #
Type: class | required

Horizontal (X-Axis)

Ci360ImageModel.horizontal({
required this.imageFolder,
required this.imageName,
required this.imagesLength,
});
copied to clipboard
Type: class | required

Vertical (Y-Axis)

Ci360ImageModel.vertical({
required this.imageFolder,
required this.imageName,
required this.imagesLength,
});
copied to clipboard
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'
});
copied to clipboard
Ci360Options.vertical({
imageName: (index) => 'tesla-y-$index.jpg'
});
copied to clipboard
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,
});
copied to clipboard
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.
}
copied to clipboard

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