A simple, interactive resource that can be used to provide a virtual tour of your product.
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
orflutter run-ios
to build the app.
- Please note that a Mac with XCode is required to build for iOS
Example
Add cloudimage_360_view: 1.0.3
to your pubspec.yaml
dependencies.
Import Package
import 'package:cloudimage_360_view/cloudimage_360_view.dart';
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) {},
),
)
Horizontal (X-Axis)
Ci360ImageModel.horizontal({
required this.imageFolder,
required this.imageName,
required this.imagesLength,
});
Vertical (Y-Axis)
Ci360ImageModel.vertical({
required this.imageFolder,
required this.imageName,
required this.imagesLength,
});
Your images folder on your cloud/cdn.
Base Data Folder Url For the main image.
i.e https://domain.com/images/360-tesla/
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
.
Ci360Options.horizontal({
imageName: (index) => 'tesla-x-$index.jpg'
});
Ci360Options.vertical({
imageName: (index) => 'tesla-y-$index.jpg'
});
Amount of images to load in x | y
axis for 360 view.
Must Be Valid Length To Get The Valid FileName Of The Image
Ci360Options({
this.autoRotate = false,
this.allowSwipeToRotate = true,
this.rotationCount = 1,
this.swipeSensitivity = 3,
this.frameChangeDuration = kShortDuration,
this.rotationDirection = CIRotationDirection.clockwise,
this.onImageChanged,
});
If set to true, the images will be displayed in incremented manner.
If set to false, the gestures to rotate the image will be disabed.
The number of cycles the whole image rotation should take place.
0
means infinite rotation.
Based on the value the sensitivity of swipe gesture increases and decreases proportionally.
1
slow and increases speed by +1
The time interval between shifting from one image frame to other.
Based on the value the direction of rotation is set.
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.
The controller of the ci360 package. You can implement your own controllers
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
manually roate to next image.
manually roate to previous image.
manually roate to specified index on specified axis.
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.
manually start auto rotate of images.
The ImageView will only autoPlay if the autoRotate
parameter
in Ci360Options
is true.
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.
All contributions are super welcome!
Flutter Cloudimage 360 View is provided under the MIT License