smart_skeleton_loader 0.1.0

A Flutter package that provides customizable and adaptive skeleton loaders with intelligent network speed adaptation, theme support, and multiple preset layouts.

example/lib/main.dart

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

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

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

  @override
  State<SmartSkeletonLoaderExample> createState() =>
      _SmartSkeletonLoaderExampleState();
}

class _SmartSkeletonLoaderExampleState
    extends State<SmartSkeletonLoaderExample> {
  ThemeMode _themeMode = ThemeMode.light;

  void _toggleTheme() {
    setState(() {
      _themeMode =
          _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smart Skeleton Loader Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      darkTheme: ThemeData.dark(useMaterial3: true),
      themeMode: _themeMode,
      home: SmartSkeletonLoaderDemo(onThemeToggle: _toggleTheme),
    );
  }
}

class SmartSkeletonLoaderDemo extends StatefulWidget {
  final VoidCallback onThemeToggle;

  const SmartSkeletonLoaderDemo({super.key, required this.onThemeToggle});

  @override
  State<SmartSkeletonLoaderDemo> createState() =>
      _SmartSkeletonLoaderDemoState();
}

class _SmartSkeletonLoaderDemoState extends State<SmartSkeletonLoaderDemo> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Smart Skeleton Loader Demo'),
        actions: [
          IconButton(
            icon: const Icon(Icons.brightness_6),
            onPressed: widget.onThemeToggle,
          ),
        ],
      ),
      body: IndexedStack(
        index: _selectedIndex,
        children: [
          _buildListViewExample(),
          _buildGridViewExample(),
          _buildProfileExample(),
          _buildDashboardExample(),
        ],
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: _selectedIndex,
        onDestinationSelected: (index) {
          setState(() => _selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.list),
            label: 'List',
          ),
          NavigationDestination(
            icon: Icon(Icons.grid_view),
            label: 'Grid',
          ),
          NavigationDestination(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
          NavigationDestination(
            icon: Icon(Icons.dashboard),
            label: 'Dashboard',
          ),
        ],
      ),
    );
  }

  Widget _buildListViewExample() {
    return ListViewSkeleton(
      onLoad: () async {
        await Future.delayed(const Duration(seconds: 2));
      },
      config: SkeletonConfig(
        numberOfItems: 10,
        timeoutDuration: const Duration(seconds: 30),
      ),
    );
  }

  Widget _buildGridViewExample() {
    return GridViewSkeleton(
      crossAxisCount: 2,
      itemHeight: 200,
      onLoad: () async {
        await Future.delayed(const Duration(seconds: 2));
      },
    );
  }

  Widget _buildProfileExample() {
    return ProfileViewSkeleton(
      avatarSize: 120,
      onLoad: () async {
        await Future.delayed(const Duration(seconds: 2));
      },
    );
  }

  Widget _buildDashboardExample() {
    return DashboardViewSkeleton(
      onLoad: () async {
        await Future.delayed(const Duration(seconds: 2));
      },
    );
  }
}