A Simple Lightbox Component for Flutter with swiping and thumbnail capabilities, supports many customisation features. If you have any suggestions or improvements, feel free to raise issues or contribute by creating pull requests.

Demo

Features

• Supports Image.Asset and Image.Network
• Swiping left and right
• Animation for Swiping
• Clickable Thumbnails

Example Usage

Wrap your images with an InkWell and add this to the onTap function().

    showGeneralDialog(
      context: context,
      pageBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation) {
        return LightBox(
          initialIndex: index, 
          images: images, 
          imageType: ImageType.network 
        );
      },
    );

For example of usage, please refer to example.

Customisation

Misc

• blur - background blur
• animationType - Curves (reference)
• animationDuration - how long is the swipe animation

Image

• initialIndex - initial image shown
• imageWidth - width of Image
• imageHeight - height of Image
• imageFit - BoxFit of Image
• imageType - ImageType of Image (assetImage, network)

Thumbnail

• thumbNailWidth - width of thumbnail
• thumbNailHeight - height of thumbnail
• thumbNailBorderSize - size of thumbnail border
• thumbNailBorderRadius - border radius of thumbnail
• thumbNailFocusedBorderColor - thumbnail focused border color
• thumbNailUnFocusedBorderColor - thumbnail unfocused border color
• thumbNailUnfocusedOpacity - thumbnail unfocused opacity
• thumbNailGap - EdgeInset - how far apart are each thumbnail from one another
• thumbNailFit - BoxFit of thumbnail
• thumbNailMarginFromBottom - thumbnail margin bottom

Installation

Run this command:

flutter pub add flutter_lightbox

Import It

Now in your Dart Code, you can use:

import 'package:flutter_lightbox/flutter_lightbox.dart';