loader_pro_kit 1.1.0

A comprehensive Flutter package with 12 beautiful, fully customizable loading animations. Perfect for modern app UIs with smooth 60 FPS animations.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loader Pro Kit Demo',
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),
      home: const LoaderDemoPage(),
    );
  }
}

class LoaderDemoPage extends StatefulWidget {
  const LoaderDemoPage({Key? key}) : super(key: key);

  @override
  State<LoaderDemoPage> createState() => _LoaderDemoPageState();
}

class _LoaderDemoPageState extends State<LoaderDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Loader Pro Kit'),
        centerTitle: true,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(width: double.infinity),

              // ===== CIRCULAR LOADERS =====
              const _SectionTitle(title: 'Circular Loaders'),

              _LoaderCard(
                title: 'Circle Loader',
                child: CircleLoader(color: Colors.blueAccent, size: 60),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Dot Loader',
                child: DotLoader(color: Colors.greenAccent, dotCount: 4),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Pulse Loader',
                child: PulseLoader(color: Colors.orangeAccent, size: 60),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Wave Loader',
                child: WaveLoader(color: Colors.pinkAccent, size: 40),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Spinning Loader',
                child: SpinningLoader(color: Colors.purpleAccent, size: 60),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Bounce Loader',
                child: BounceLoader(color: Colors.redAccent, size: 12),
              ),
              const SizedBox(height: 50),

              // ===== LOGO & IMAGE LOADERS =====
              const _SectionTitle(title: 'Logo & Image Loaders'),

              _LoaderCard(
                title: 'Logo Loader',
                child: LogoLoader(
                  backgroundColor: Colors.blue,
                  size: 80,
                  logo: const Icon(
                    Icons.flutter_dash,
                    size: 40,
                    color: Colors.blue,
                  ),
                ),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Image Loader',
                child: ImageLoader(
                  loaderColor: Colors.teal,
                  size: 80,
                  image: const NetworkImage('https://via.placeholder.com/150'),
                ),
              ),
              const SizedBox(height: 50),

              // ===== LINEAR LOADERS =====
              const _SectionTitle(title: 'Linear Loaders'),

              _LoaderCard(
                title: 'Linear Loader (Basic)',
                child: LinearLoader(loaderColor: Colors.blue, height: 8),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Linear Loader (With %)',
                child: LinearLoader(
                  loaderColor: Colors.green,
                  height: 8,
                  showPercentage: true,
                ),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Shimmer Loader',
                child: Column(
                  children: [
                    ShimmerLoader(height: 16),
                    const SizedBox(height: 12),
                    ShimmerLoader(height: 16),
                    const SizedBox(height: 12),
                    ShimmerLoader(width: 150, height: 16),
                  ],
                ),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Skeleton Loader',
                child: SkeletonLoader(
                  items: [
                    SkeletonCircle(
                      radius: 30,
                      margin: const EdgeInsets.only(bottom: 16),
                    ),
                    SkeletonLine(
                      height: 16,
                      margin: const EdgeInsets.only(bottom: 12),
                    ),
                    SkeletonLine(
                      height: 16,
                      margin: const EdgeInsets.only(bottom: 12),
                    ),
                    SkeletonLine(
                      height: 16,
                      width: 200,
                      margin: const EdgeInsets.only(bottom: 12),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 50),

              // ===== ORBIT LOADERS =====
              const _SectionTitle(title: 'Orbit Loaders'),

              _LoaderCard(
                title: 'Orbit Loader (Default)',
                child: OrbitLoader(color: Colors.blueAccent),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Orbit Loader (Glow)',
                child: OrbitLoader(
                  color: Colors.purpleAccent,
                  glowEffect: true,
                ),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Orbit Loader (Gradient)',
                child: OrbitLoader(
                  useGradient: true,
                  gradientColors: [Colors.purple, Colors.blue],
                  glowEffect: true,
                ),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Orbit Loader (Elliptical)',
                child: OrbitLoader(
                  color: Colors.teal,
                  elliptical: true,
                  ellipseRatio: 0.5,
                ),
              ),
              const SizedBox(height: 30),

              _LoaderCard(
                title: 'Orbit Loader (Compact)',
                child: OrbitLoader(
                  size: 40,
                  radius: 15,
                  dotSize: 5,
                  dotCount: 4,
                  duration: const Duration(milliseconds: 800),
                ),
              ),
              const SizedBox(height: 50),
            ],
          ),
        ),
      ),
    );
  }
}

class _SectionTitle extends StatelessWidget {
  final String title;

  const _SectionTitle({required this.title});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 16.0),
      child: Text(
        title,
        style: Theme.of(context).textTheme.headlineSmall?.copyWith(
          fontWeight: FontWeight.bold,
          color: Colors.blue[700],
        ),
      ),
    );
  }
}

class _LoaderCard extends StatelessWidget {
  final String title;
  final Widget child;

  const _LoaderCard({required this.title, required this.child});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(20),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          gradient: LinearGradient(
            colors: [Colors.grey[100]!, Colors.grey[50]!],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Column(
          children: [
            Text(
              title,
              style: Theme.of(
                context,
              ).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),
            Center(child: child),
          ],
        ),
      ),
    );
  }
}