Search packages, repositories and app categories

skeleton_loader cover
Package detailsv2.0.0+4

skeleton_loader

A Flutter Package which provides a fully customizable loading skeleton for your app,

AndroidiOSWebmacOSWindowsLinux
30-day downloads
17
Likes
235
Pub points
140

Install package

flutter pub add skeleton_loader

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that offers a fully customizable loading skeleton to enhance user experience during data loading. It provides placeholder animations that mimic the final content layout, reducing perceived load time and improving app responsiveness. With support across all major platforms, it's ideal for creating smooth, professional-looking interfaces. The package is lightweight and easy to integrate, allowing developers to tailor the appearance and behavior of skeletons to match their design system.

Use cases

  • Loading lists or grids with placeholder content
  • Displaying card layouts before data arrives
  • Improving perceived performance during async operations
  • Creating consistent UI while fetching remote data
  • Enhancing UX in forms with dynamic fields

Key features

  • Fully customizable skeleton appearance
  • Support for multiple animation types
  • Easy integration with existing widgets
  • Cross-platform compatibility
  • Lightweight and performant
  • Configurable shimmer effects

Suitable for

  • Developers seeking improved UX during loading states
  • Designers wanting to maintain visual consistency
  • Apps with dynamic or network-dependent content
  • Projects requiring polished, production-ready placeholders
  • Teams using Material or Cupertino design systems

Considerations

  • May require additional styling for complex layouts
  • Animation performance should be tested on lower-end devices
  • Not suitable for static content without loading needs
  • Limited customization beyond basic shape and color options
  • Best used in conjunction with actual loading indicators for accessibility

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

skeleton_loader

A Flutter Package which provides a fully customizable loading skeleton for your app,

Installation

How to install it? Follow Instructions

Preview

Usage

import 'package:example/models/states.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import 'screens/list.dart';
import 'screens/grid.dart';

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

class MyApp extends StatelessWidget {
  final String appTitle = "Flutter Skeleton Loader Demo";
  final List<StateCapital> sc = [
    StateCapital(name: "Abia", capital: "Umuahia"),
    StateCapital(name: "Adamawa", capital: "Yola"),
    StateCapital(name: "Akwa-Ibom", capital: "Uyo"),
    StateCapital(name: "Anambra", capital: "Awka"),
    StateCapital(name: "Bauchi", capital: "Bauchi"),
    StateCapital(name: "Bayelsa", capital: "Yenagoa"),
    StateCapital(name: "Benue", capital: "Makurdi"),
    StateCapital(name: "Borno", capital: "Maiduguri"),
    StateCapital(name: "Cross River", capital: "Calabar"),
    StateCapital(name: "Delta", capital: "Asaba"),
    StateCapital(name: "Ebonyi", capital: "Abakaliki"),
    StateCapital(name: "Edo", capital: "Benin"),
    StateCapital(name: "Ekiti", capital: "Ado-Ekiti"),
    StateCapital(name: "Enugu", capital: "Enugu"),
    // StateCapital(name: "FCT", capital: "Abuja"),
    StateCapital(name: "Gombe", capital: "Gombe"),
    StateCapital(name: "Imo", capital: "Owerri"),
    StateCapital(name: "Jigawa", capital: "Dutse"),
    StateCapital(name: "Kaduna", capital: "Kaduna"),
    StateCapital(name: "Kano", capital: "Kano"),
    StateCapital(name: "Katsina", capital: "Katsina"),
    StateCapital(name: "Kebbi", capital: "Birnin-Kebbi"),
    StateCapital(name: "Kogi", capital: "Lokoja"),
    StateCapital(name: "Kwara", capital: "Ilorin"),
    StateCapital(name: "Lagos", capital: "Ikeja"),
    StateCapital(name: "Nassarawa", capital: "Lafia"),
    StateCapital(name: "Niger", capital: "Mina"),
    StateCapital(name: "Ogun", capital: "Abeokuta"),
    StateCapital(name: "Ondo", capital: "Akure"),
    StateCapital(name: "Osun", capital: "Osogbo"),
    StateCapital(name: "Oyo", capital: "Ibadan"),
    StateCapital(name: "Plateau", capital: "Jos"),
    StateCapital(name: "Rivers", capital: "Port Harcourt"),
    StateCapital(name: "Sokoto", capital: "Sokoto"),
    StateCapital(name: "Taraba", capital: "Jalingo"),
    StateCapital(name: "Yobe", capital: "Damaturu"),
    StateCapital(name: "Zamfara", capital: "Gusau"),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: GoogleFonts.openSansTextTheme(),
        primaryTextTheme: GoogleFonts.openSansTextTheme().copyWith(
          headline6: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 2,
        initialIndex: 1,
        child: Scaffold(
          appBar: AppBar(
            title: Text("Flutter Skeleton Loader Demo"),
            bottom: TabBar(
              labelColor: Colors.white,
              tabs: <Widget>[
                Tab(
                  text: "List",
                ),
                Tab(
                  text: "Grid",
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              ListExample(stateCapitals: sc),
              GridExample(stateCapitals: sc),
            ],
          ),
        ),
      ),
    );
  }
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Categories

Dependencies

Dependency list 1 items

Source repository

Projects using this package

No data available yet.