Flutter Cloudimage 360 View

Last update: May 19, 2022

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

GitHub

https://github.com/abdelrahmanmostafa21/flutter-cloudimage-360-view
You might also like...

Enhanced PDF view for Flutter.

Enhanced PDF view for Flutter.

flutter_cached_pdfview A package to show Native PDF View for iOS and Android, support Open from a different resource like Path, Asset or Url and Cache

Apr 1, 2022

A Food App using Flutter & Firebase to post and view food blogs along with their recipes.

A Food App using Flutter & Firebase to post and view food blogs along with their recipes.

A Food App using Flutter 💕 & Firebase 🔥 About the App 🥘 FoodLab is a App to post and view food blogs along with their recipes if you want 🤤 ! Logi

May 4, 2022

PDF view for Flutter

PDF view for Flutter

flutter_pdfview Native PDF View for iOS and Android Use this package as a library 1. Depend on it Add this to your package's pubspec.yaml file: depend

May 18, 2022

Embeddable unity game engine view for Flutter.

Embeddable unity game engine view for Flutter.

flutter_unity_widget Flutter unity 3D widget for embedding unity in flutter. Now you can make awesome gamified features of your app in Unity and get i

May 19, 2022

A WEB 3 Exploration Flutter APP that let you view NFTS

A WEB 3 Exploration Flutter APP that let you view NFTS

It is simply a WEB 3 Exploration APP that let you view NFTS (News about web 3 ar

Mar 12, 2022

A section list view for flutter

A section list view for flutter

Section view Features Show with select view Alphabet support Refresh support Scr

Mar 18, 2022

A fork/modification of flutter epub view package

A fork/modification of flutter epub view package

epub_view Pure flutter widget for view EPUB documents on all platforms. Based on epub package. Render with flutter widgets (not native view) on any pl

Dec 28, 2021

📜Infinite View Pager widget for Flutter

📜Infinite View Pager widget for Flutter

infinite_view_pager Flutter infinite view pager widget Installation dependencies: infinite_view_pager: ^1.0.0 Example import 'package:infinite_view_

Feb 25, 2022

Sticky Grid View For Flutter

Sticky Grid View For Flutter

Features Listing images in gridview wrapped listview gives bad performance (disp

Dec 28, 2021
Comments
  • 1. make the package work with the local image provider [assets,files,memory].

    add a new logic to preview the local images.

    Implementation:

    • Add an additional properties according to the dev choices between [cloud-local]
    • cache the provided local image to load faster
    Reviewed by abdelrahmanmostafa21 at 2022-05-08 22:15

Related

Flutter list view - An unofficial list view for flutter
Flutter list view - An unofficial list view for flutter

Flutter List View I don't like official list view. There are some features don't

May 14, 2022
Grid-View-App - Grid View App For Flutter
Grid-View-App - Grid View App For Flutter

grid_view_app practice purpose flutter application Getting Started This project

Jan 24, 2022
Swipeable button view - Create Ripple Animated Pages With Swipeable Button View
Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

Apr 22, 2022
Flutter agenda - Flutter Agenda View Package (pub.dev)
Flutter agenda - Flutter Agenda View Package (pub.dev)

Flutter Agenda View Agenda Widget Package for Flutter Features Image Video Recor

Apr 15, 2022
A periodic table app with 3D view of the elements built using flutter.
A periodic table app with 3D view of the elements built using flutter.

A flutter app which takes you on a 3d visualisation of the 118 elements of the periodic table. promo.mp4 Tech Stack Deployed using How it all began It

May 13, 2022
Flutter Split View and Drawer Navigation example
Flutter Split View and Drawer Navigation example

Flutter Split View and Drawer Navigation example This repo contains the source code for this tutorial: Responsive layouts in Flutter: Split View and D

Apr 6, 2022
Flutter Insert, Update, Delete and add form view dynamic

salesapp Insert, Update, Delete and form view add dynamic. Getting Started This project is a starting point for a Flutter application. A few resources

Dec 22, 2021
A flutter list view which can drag & move item to change order.
A flutter list view which can drag & move item to change order.

draggable_flutter_list A flutter list view which can drag & move item to change order. some codes come from flutter_list_drag_and_drop fix flutter_lis

Dec 24, 2021
Search and view popular Youtube videos with Youtube API in Flutter App
Search and view popular Youtube videos with Youtube API in Flutter App

getx_bottom_nav_sample The sample of AnimatedBottomNavBar with GetX 주요 Package 설명 1.url_launcher url_launcher pub.dev flutter 에서 인앱, 외부 브라우저로 연길 시켜 주는

Dec 25, 2021
A Flutter package for paginating a list view
A Flutter package for paginating a list view

paging A Flutter package for paginating a list view Installation Add this to your package's pubspec.yaml file dependencies: ... paging: ^latest.ve

Dec 11, 2021