A scrollable, dismissable by swiping, zoomable, rotatable image gallery on which you can add a dynamic overlay.

Overview

Swipe Image Gallery

Pub Version

A scrollable, dismissable by swiping, zoomable, rotatable image gallery on which you can add a dynamic overlay. While it is intended for an image gallery different types of widgets can also be used.

Installation

Add swipe_image_gallery as a dependency in your pubspec.yaml file.

Usage

With a List of Image Widgets

final assets = const [
  Image(image: AssetImage('assets/1.jpeg')),
  Image(image: AssetImage('assets/2.jpeg')),
  Image(image: AssetImage('assets/3.jpeg')),
  Image(image: AssetImage('assets/4.jpeg')),
];

...

SwipeImageGallery(
  context: context,
  images: assets,
).show();

Image Widgets

Using Builder

final urls = [
  'https://via.placeholder.com/400',
  'https://via.placeholder.com/800',
  'https://via.placeholder.com/900x350',
  'https://via.placeholder.com/1000',
  'https://via.placeholder.com/100',
];

...

SwipeImageGallery(
  context: context,
  itemBuilder: (context, index) {
    return Image.network(urls[index]);
  },
  itemCount: urls.length,
).show();

Add an Overlay

You can find the OverlayExample widget here.

  StreamController<Widget> overlayController =
      StreamController<Widget>.broadcast();

  @override
  void dispose() {
    overlayController.close();
    super.dispose();
  }

  ...

  SwipeImageGallery(
    context: context,
    images: remoteImages,
    onSwipe: (index) {
      overlayController.add(OverlayExample(
        title: '${index + 1}/${remoteImages.length}',
      ));
    },
    overlayController: overlayController,
    initialOverlay: OverlayExample(
      title: '1/${remoteImages.length}',
    ),
  ).show();

overlay

Hero Animation

final heroProperties = [
  ImageGalleryHeroProperties(tag: 'imageId1'),
  ImageGalleryHeroProperties(tag: 'imageId2'),
];

final assets = const [
  Image(image: AssetImage('assets/1.jpeg')),
  Image(image: AssetImage('assets/2.jpeg')),
];

...

Row(
  children: [
    Expanded(
      child: InkWell(
        onTap: () => SwipeImageGallery(
          context: context,
          images: assets,
          heroProperties: heroProperties,
        ).show(),
        child: Hero(
          tag: 'imageId1',
          child: Image(
            image: AssetImage('assets/1.jpeg'),
          ),
        ),
      ),
    ),
    Expanded(
      child: InkWell(
        onTap: () => SwipeImageGallery(
          context: context,
          images: assets,
          initialIndex: 1,
          heroProperties: heroProperties,
        ).show(),
        child: Hero(
          tag: 'imageId2',
          child: Image(
            image: AssetImage('assets/2.jpeg'),
          ),
        ),
      ),
    ),
  ],
),

hero

For more detailed examples you can check out the example project.

You might also like...

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content.

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content.

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content. Installation Add dependency to your pubspec.yaml

Dec 23, 2022

Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.

Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.

crop A Flutter package for cropping any widget, not only images. This package is entirely written in Dart and supports Android, iOS, Web and Desktop.

Jan 6, 2023

Image caching system for flutter

image_cacheing image_cacheing is an image caching package. It is currently tested for Android applications. ImageCacheing widget takes url as a param.

May 31, 2021

A simple and easy flutter demo to crop image

flutter_image_crop A simple demo to crop image on flutter easily. A Chinese version of this document can be found here Flutter_image_crop Plugin will

Jul 8, 2021

A flutter tool to generate beautiful code snippets in the form of an image.

A flutter tool to generate beautiful code snippets in the form of an image.

A flutter tool to generate beautiful code snippets in the form of an image.

Jan 18, 2022

Simple and effective cross platform image saver for flutter, supported web and desktop

Simple and effective cross platform image saver for flutter, supported web and desktop

Oct 5, 2022

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

Dec 26, 2022

A flutter package to convert any widget to an Image.

A flutter package to convert any widget to an Image.

Davinci A package to convert any widget to an image which can be saved locally or can be shared to other apps and chats. 📹 Preview ℹī¸ Usage Prerequis

Dec 20, 2022

Multi image pixker using the image_picker package in flutter

multi_image_selection A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Oct 13, 2021
Comments
  • How do i achieve hero animations with GridTiles?

    How do i achieve hero animations with GridTiles?

    Tried this but no luck:

    class FirstPage extends StatefulWidget {
      var wallpaperList = <Wallpaper>[];
    
      @override
      _FirstPageState createState() => _FirstPageState();
    }
    
    class _FirstPageState extends State<FirstPage> {
    
      StreamController<Widget> overlayController =
      StreamController<Widget>.broadcast();
    
      @override
      void dispose() {
        overlayController.close();
        super.dispose();
      }
      
      Query<Map<String, dynamic>> firstWallieQuery = FirebaseFirestore.instance
          .collection('Wallies')
          .orderBy('timestamp', descending: false)
          .limit(20);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: _buildContents(),
        );
      }
    
      Widget _buildContents() {
        //THIS CODE IS USED TO RETRIEVE DATA FROM DB
        return FutureBuilder(
          future: firstWallieQuery.get(),
          builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasData) {
                print('DATA IS THERE ROXIN');
                var favWallManger =
                    Provider.of<FavWallpaperManger>(context, listen: false);
    
                snapshot.data.docs.forEach((documentSnapshot) {
                  var wallpaper = Wallpaper.fromDocumentSnapshot(documentSnapshot);
    
                  if (favWallManger.isFavourite(wallpaper)) {
                    wallpaper.isFavourite = true;
                  }
                  //THIS IS WHERE IM ADDING THE IMAGES TO A LIST AFTER RETRIEVING THEM FROM A DB
                  widget.wallpaperList.add(wallpaper);
                  print('ListHome: ${wallpaper.id}');
                });
              }
              print('GridRebuildHome');
              return GridView.builder(
                itemCount: widget.wallpaperList.length,
                itemBuilder: (BuildContext context, int indexx) {
                  return InkResponse(
                    //WHY I PUT SWIPE IMAGE GALLERY IN A STANDALONE METHOD IS BECAUSE IT WAS GETTING LONG AND MESSY
                    onTap: () => swipeImageGallery(context, indexx).show(),
                    child: GridTile(child: imageCache(indexx)),
                  );
                },
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  childAspectRatio: 0.8,
                ),
              );
            } else {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
          },
        );
      }
    
      SwipeImageGallery swipeImageGallery(BuildContext context, int indexx) {
        return SwipeImageGallery(
          context: context,
          initialIndex: indexx,
          hideStatusBar: true,
          transitionDuration: 600,
          //heroProperties: heroProperties,
          itemBuilder: (context, index) {
            return Image(
                image: CachedNetworkImageProvider(
                    widget.wallpaperList.elementAt(index).url));
          },
          itemCount: widget.wallpaperList.length,
          onSwipe: (index) {
            overlayController.add(FullScreenOverlayButtons(
              wallpaperList: widget.wallpaperList,
              initialPage: index,
              currentIndex: index,
              fromHome: true,
            ));
          },
          initialOverlay: FullScreenOverlayButtons(
            wallpaperList: widget.wallpaperList,
            initialPage: indexx,
            currentIndex: indexx,
            fromHome: true,
          ),
          overlayController: overlayController,
        );
      }
    
      Widget imageCache(int indexx) {
        return CachedNetworkImage(
          imageUrl: widget.wallpaperList.elementAt(indexx).url,
          fit: BoxFit.cover,
        );
      }
    }
    
    opened by Roxin92 7
  • Swipe not working on Linux build

    Swipe not working on Linux build

    Hello, while developing I am used to use the linux version of my app.

    While the swipe image gallery works perfectly on android, I noticed that in linux it is malfunctioning.

    Symptoms upon opening:

    • the first image of the gallery opens as it should
    • swipe does not work, the feeling is as if the gallery froze
    • dragging from the very top (or bottom) in the opposite direction closes the gallery
    • there is no way though, to see the other images

    Do you experience the same issue.

    Thanks for the nice library.

    opened by moovida 3
  • Added animation to center image when threshold was not reached for dismissal

    Added animation to center image when threshold was not reached for dismissal

    Hi again, I had to close my old PR because i accidentially pushed something i didnt intent and i couldnt reopen since i force pushed the branch... Please take a look at the code, if u have time. Greetings

    opened by garlicPasta 2
  • Added animation to center when threshold was not reached for dismissal

    Added animation to center when threshold was not reached for dismissal

    Hi, kinda liked your library. The logic was easy to follow and it seems to work quite well so good work.

    I added an animation for the image to center it again, when the dismissal threshold is not reached.

    The dependecy changes in for gradle where kinda necessary to build the example. Hope its not a problem.

    Greetings

    opened by garlicPasta 1
Releases(v0.8.0)
Owner
null
Flutter Image Upload From Gallery

Image Upload From Gallery Image upload from gallery to Backend Dependencies image_picker: ^0.8.4+1 http: ^0.13.3 dio: ^4.0.0 Getting Started Image upl

Fatih Baycu 2 Oct 6, 2021
Flutter Package to Pick Image From Gallery or Camera

image_picker_gallery_camera Flutter Package to Pick Image From Gallery or Camera Getting Started A Flutter plugin for iOS and Android for picking imag

Sayandh KP 8 Oct 5, 2022
Loading indicator GIFs. Material and Cupertino (Android and iOS) loading indicators in assorted sizes. Use as placeholders for loading remote image assets. Demo: https://gallery.codelessly.com/flutterwebsites/loadinggifs/

Loading GIFs High quality Android and iOS loading spinners. View Demo Loading GIFs is a collection of high fidelity loading animations in GIF format.

Codelessly 31 Dec 23, 2022
Flutter gallery - Image, Audio, Video & File.

Flutter Gallery Getting Started For help getting started with Flutter, view our online documentation.

Vivek Sharma 55 Sep 26, 2022
A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network, zoom pan image, photo view, slide out page, editor(crop,rotate,flip), paint custom etc.

extended_image Language: English| 中文įŽ€äŊ“ A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network

FlutterCandies 1.6k Dec 31, 2022
An image editor with crop, scribble, mosaic, add-text, flip, rotated functions.

image_editor_dove A high-performance image editor with crop, scribble, mosaic, add-text, flip, rotated functions. Support custom ui style. drawing rot

null 27 Dec 16, 2022
Flutter package for Image Carousel It is an image carousel widget.

Snapshot Carousel Flutter package for Image Carousel It is an image carousel widget. Supported platforms Flutter Android Flutter iOS Flutter web Flutt

Mrigank Anand 12 Jun 3, 2021
Basic flutter art gallery app

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

null 0 Nov 25, 2021
Flutter plugin that allows you to display multi image picker on iOS and Android. 👌🔝🎉

IMPORTANT: This repository has been archived and no longer mantained. As I don't have time anymore to work on the package it became very outdated. For

Radoslav Vitanov 898 Apr 29, 2021
Generate & add your custom icons

The custom icons will be converted into a ttf font file, which will be added into the project. An automatically generated Dart file will be added, allowing icons to be used like Icon(CustomIcons.email)

Firgia 8 Nov 23, 2022