A Flutter package which provides 360 view of the images with rotation and gesture customisations.

Overview

imageview360

A Flutter package which provides 360 view of the images with rotation and gesture customisations.

Supported Dart Versions

Dart SDK version >= 2.12.0

Demo Gif

imageview360 Demo

Installation

Pub

Add the Package

dependencies:
  imageview360: ^1.2.0

How to use

Import the package in your dart file

import 'package:imageview360/imageview360.dart';
Basic usage :
ImageView360(
     key: UniqueKey(),
     imageList: imageList,
),

Note: For ImageView360 to show instant changes on hot reload, you need to provide UniqueKey() so that the widget rebuilds every time.

Customisable usage :
ImageView360(
    key: UniqueKey(),                                           
    imageList: imageList,                                       
    autoRotate: true,                                           //Optional
    rotationCount: 2,                                           //Optional
    rotationDirection: RotationDirection.anticlockwise,         //Optional
    frameChangeDuration: Duration(milliseconds: 50),            //Optional
    swipeSensitivity: 2,                                        //Optional
    allowSwipeToRotate: true,                                   //Optional
    onImageIndexChanged: (currentImageIndex) {                  //Optional
                          print("currentImageIndex: $currentImageIndex");
                        },
)

Note: For better experience always precache image before providing the images to the widget as follows.

Example for loading and precaching images from assets :
 List<ImageProvider> imageList = List<ImageProvider>();
   for (int i = 1; i <= 52; i++) {
      imageList.add(AssetImage('assets/sample/$i.png'));
// To precache images so that when required they are loaded faster.
      await precacheImage(AssetImage('assets/sample/$i.png'), context);
    }

Mandatory fields

Attribute Type Usage
imageList List The list of images to be displayed

Customisable fields

Attribute Type Default Value
autoRotate bool false
rotationCount int 1
rotationDirection RotationDirection RotationDirection.clockwise
frameChangeDuration Duration Duration(milliseconds: 80)
swipeSensitivity int 1 (Note : Range allowed is 1-5 , less than 1 would be considered 1 and more than 5 would be considered 5)
allowSwipeToRotate bool true
onImageIndexChanged Function(int) (currentImageIndex){}

Blog Post

To have a better understanding how this package works under the hood, checkout my blog post: 360 degree image showcase in Flutter

Created & Maintained By

Harpreet Singh

Damanpreet Singh

License

Copyright 2020 Harpreet Singh & Damanpreet Singh

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...

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

Dec 15, 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

Jun 9, 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

-UNDER DEVELOPMENT- a project built demonstrating model view view model architecture

mvvm_project A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Nov 28, 2022

A widget for entering gesture passwords for flutter.

A widget for entering gesture passwords for flutter.

GesturePasswordWidget English | 简体中文 A gesture-unlocking widget for Flutter that supports a high degree of customization. Use dependencies: gesture_

Dec 2, 2022

Alarm app where user setting with touch gesture by moving the hand clock

Alarm app where user setting with touch gesture by moving the hand clock

Alarm App Using Flutter Flutter alarm app where user setting with touch gesture by moving the hand clock How to run Clone this repository Run flutter

Sep 3, 2022

This is a view pager provides carousel effect and dismissal animation when page was removed.

This is a view pager provides carousel effect and dismissal animation when page was removed.

This is a view pager provides carousel effect and dismissal animation when page was removed. Features Carousel effect Horizontal Vertical Dismissal an

Dec 22, 2022

Snooper android - Flutter platform package for Android which provides concrete implementations for various device info lookups

Snooper android - Flutter platform package for Android which provides concrete implementations for various device info lookups

Flutter platform package for Android which provides concrete implementations for

Jan 27, 2022

A dart package which provides a lot of helpers functions for easy development.

more_functions A dart package which provides a lot of helpers functions for easy development. Installation Add this to your packages pubspec.yaml file

Dec 5, 2021
Comments
  • Set starting index for 360 sequence

    Set starting index for 360 sequence

    I don't see an option for this, but can we possibly set a starting index for the 360 sequence? So for example, if I want to start the sequence at the 10th image instead of the 1st, on the initial load of the widget.

    opened by ascendedco 5
  • Images Download From internet can't be displayed

    Images Download From internet can't be displayed

    I tried to download an images and then add them to an array , pass this array to ImageView360 widget , but it take only AssetImage, so there i must have an images first in assets . How to do this?

    opened by NouranAmr 2
  • When rotating through the 360 carousel the image appears and disappears (blinks)

    When rotating through the 360 carousel the image appears and disappears (blinks)

    I didn't understand what on earth was going on until I discovered a property I didn't know about that I believe is not set properly. In the build function:

      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            GestureDetector(
              onHorizontalDragEnd: (details) {
                localPosition = 0.0;
              },
              onHorizontalDragUpdate: (details) {
                // Swipe check,if allowed than only will image move
                if (widget.allowSwipeToRotate) {
                  if (details.delta.dx > 0) {
                    handleRightSwipe(details);
                  } else if (details.delta.dx < 0) {
                    handleLeftSwipe(details);
                  }
                }
              },
              child: Image(image: widget.imageList[rotationIndex]),
            ),
          ],
        );
      }
    

    child: Image(image: widget.imageList[rotationIndex]), should be changed to child: Image(gaplessPlayback: true, image: widget.imageList[rotationIndex]),.

    Perhaps on a Samsung Galaxy S10 or an iPhone 10 you can't even notice it cause they're so fast, but on the Android emulator or a mid-range Android device, it's very clearly noticeable.

    gaplessPlayback: true.

    opened by CarlosCabarcos 1
Owner
hd-motion
hd-motion
Cupertino back gesture - Flutter package to set custom width of iOS back swipe gesture area

cupertino_back_gesture A Flutter package to set custom width of iOS back swipe gesture area. Usage To use this package, add cupertino_back_gesture as

null 28 Dec 7, 2022
Flutter Cloudimage 360 View

Engage your customers with a stunning 360 view of your products.

Abdelrahman Mostafa 7 Jul 4, 2022
camilo velandia 69 Dec 30, 2022
This Flutter plugin provides some widgets with gesture handlers.

Clickable Widget This Flutter plugin provides some flutter widgets having gesture handlers their don't natively have in Flutter. By default some flutt

Gael Vinou 7 Nov 17, 2022
A page transition which supports drag-down-to-pop gesture.

drag_down_to_pop A page transition which supports drag-down-to-pop gesture. The main source code is copied from the cupertino/route.dart in Flutter SD

nekocode 16 Aug 6, 2022
In this repo you will see how to pick images from the image library and also, see how to store the selected images on Firebase.

flutterimageapp Flutter Tutorial - Upload Images using Firebase Storage. Flutter Tutorial - Upload Images using Firebase Storage Video series can be w

Whatsupcoders 60 Nov 4, 2022
Memebaaz is a video/images sharing app, Anyone can share short videos and images through app, the media will go through admin's approval.

MemeBaaz - Memes & Short Videos App Memebaaz is a Video/images Sharing App, Anyone can share short videos and images through app, the media will go th

Rakesh K. 18 Nov 14, 2022
Display images flutter - Simple app to display images in flutter

Display Images In Flutter Simple app to display images in a flutter. In this dem

Manish Ahire 1 Jan 29, 2022
A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.

Sliding Sheet A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents. Click here to view the full example. Ins

null 394 Mar 3, 2022
Easy to use, reliable and lightweight gesture detector for Flutter apps, exposing simple API for basic gestures

Simple Gesture Detector Easy to use, reliable and lightweight gesture detector for Flutter apps. Exposes simple API to react to basic gestures. Featur

Aleksander Woźniak 26 Nov 4, 2022