thumbnail_slider 0.1.0

A Flutter slider widget that displays thumbnails while dragging.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:thumbnail_slider/thumbnail_slider.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Thumbnail Slider Demo',
      theme: ThemeData.dark(),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  Duration _position = Duration.zero;
  final Duration _duration = const Duration(minutes: 5);
  final List<String> _thumbnails = [
    'https://picsum.photos/200/300?random=1',
    'https://picsum.photos/200/300?random=2',
    'https://picsum.photos/200/300?random=3',
    'https://picsum.photos/200/300?random=4',
    'https://picsum.photos/200/300?random=5',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white10,
      appBar: AppBar(
        title: const Text('Thumbnail Slider Demo'),
        backgroundColor: Colors.black,
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'Drag the slider to see thumbnails',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                ),
              ),
              const SizedBox(height: 40),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: SeekBar(
                  duration: _duration,
                  position: _position,
                  bufferedPosition: _position + const Duration(seconds: 30),
                  imageList: _thumbnails,
                  thumbnailWidth: 100,
                  thumbnailHeight: 140,
                  thumbnailOffset: const Offset(0, -90),
                  thumbnailBorderRadius: 12,
                  textStyle: const TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                  ),
                  onChanged: (position) {
                    setState(() {
                      _position = position;
                    });
                  },
                ),
              ),
              const SizedBox(height: 40),
              Text(
                'Current Position: ${_formatDuration(_position)}',
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  String _formatDuration(Duration duration) {
    String twoDigits(int n) => n.toString().padLeft(2, '0');
    final String minutes = twoDigits(duration.inMinutes.remainder(60));
    final String seconds = twoDigits(duration.inSeconds.remainder(60));
    return '$minutes:$seconds';
  }
}