flutter_lightbox 0.1.3 copy "flutter_lightbox: ^0.1.3" to clipboard
flutter_lightbox: ^0.1.3 copied to clipboard

A Simple Lightbox Component for Flutter with swiping and thumbnail capabilities. Created as I could not find any lightbox components that met my needs.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_lightbox/flutter_lightbox.dart';
import 'package:flutter_lightbox/image_type.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter LightBox Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter LightBox Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> images = [
    'https://picsum.photos/250?image=10',
    'https://picsum.photos/250?image=13',
    'https://picsum.photos/250?image=15',
  ];

  final List<String> assetImages = [
    'assets/images/pikachu_1.png',
    'assets/images/pikachu_2.png',
    'assets/images/pikachu_3.png',
  ];

  Widget buildImageList(List<String> images, ImageType imageType) {
    return SizedBox(
      height: 85,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: images.length,
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            onTap: () {
              showGeneralDialog(
                context: context,
                pageBuilder: (BuildContext context, Animation animation,
                    Animation secondaryAnimation) {
                  return LightBox(
                    initialIndex: index,
                    images: images,
                    imageType: imageType,
                  );
                },
              );
            },
            child: Container(
              width: 70,
              height: 65,
              decoration: BoxDecoration(
                border: Border.all(
                  color: const Color.fromRGBO(246, 246, 246, 1),
                  width: 2,
                ),
                borderRadius: BorderRadius.circular(5),
              ),
              child: FittedBox(
                fit: BoxFit.contain,
                child: imageType == ImageType.network
                    ? Image.network(images[index])
                    : Image.asset(images[index]),
              ),
            ),
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // change color while the other colors stay the same.
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            const Text("Network Images Example"),
            buildImageList(images, ImageType.network),
            const SizedBox(
              height: 30,
            ),
            const Text("Asset Images Example"),
            buildImageList(assetImages, ImageType.imageAsset),
            const Text("")
          ],
        ),
      ),
    );
  }
}
4
likes
160
points
90
downloads

Publisher

unverified uploader

Weekly Downloads

A Simple Lightbox Component for Flutter with swiping and thumbnail capabilities. Created as I could not find any lightbox components that met my needs.

Repository (GitHub)

Topics

#flutter #lighthbox #carousel #widget #images

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_lightbox