zeba_academy_skeleton

A lightweight, customizable, and production-ready skeleton loading package for Flutter applications.

Build beautiful loading states with animated shimmer placeholders for:

  • Skeleton boxes
  • Text placeholders
  • Circular avatars
  • Profile cards
  • List items
  • Custom skeleton layouts

No external dependencies required.

Features

  • āœØ Smooth shimmer animation
  • šŸ“¦ Ready-to-use skeleton boxes
  • šŸ“ Text placeholder skeletons
  • šŸ‘¤ Circular avatar placeholders
  • šŸƒ Pre-built skeleton cards
  • šŸ“‹ Skeleton list items
  • šŸŽØ Custom base and highlight colors
  • ā±ļø Custom animation duration
  • šŸ“ Custom sizes and border radius
  • šŸŒ™ Works with Flutter themes and dark mode
  • šŸš€ Lightweight with zero external dependencies
  • šŸ§© Easy to compose into custom loading layouts
  • šŸ“± Suitable for mobile, tablet, and desktop Flutter applications

Installation

Add zeba_academy_skeleton to your pubspec.yaml:

dependencies:
  zeba_academy_skeleton: ^0.0.1

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_skeleton/zeba_academy_skeleton.dart';

Quick Start

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            const SkeletonAvatar(
              size: 64,
            ),
            const SizedBox(height: 16),
            const SkeletonText(
              width: 200,
            ),
            const SizedBox(height: 8),
            const SkeletonText(
              width: 140,
            ),
          ],
        ),
      ),
    );
  }
}

Widgets

SkeletonBox

SkeletonBox is a general-purpose rectangular skeleton placeholder.

const SkeletonBox(
  width: 200,
  height: 20,
)

Customization

const SkeletonBox(
  width: double.infinity,
  height: 120,
  borderRadius: 16,
  baseColor: Color(0xFFE0E0E0),
  highlightColor: Colors.white,
  duration: Duration(milliseconds: 1200),
)

Properties

Property Type Default Description
width double? null Width of the skeleton
height double 16 Height of the skeleton
borderRadius double 8 Corner radius
baseColor Color? Theme color Base skeleton color
highlightColor Color? Theme color Shimmer highlight color
duration Duration 1400ms Animation duration

SkeletonText

SkeletonText is designed for text loading placeholders.

const Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    SkeletonText(
      width: 220,
    ),
    SizedBox(height: 8),
    SkeletonText(
      width: 160,
    ),
  ],
)

Example

const SkeletonText(
  width: 180,
  height: 14,
  borderRadius: 6,
)

SkeletonAvatar

SkeletonAvatar creates a circular skeleton placeholder.

const SkeletonAvatar(
  size: 56,
)

Example

const SkeletonAvatar(
  size: 80,
  baseColor: Color(0xFFE5E7EB),
  highlightColor: Colors.white,
)

Useful for:

  • Profile pictures
  • User avatars
  • Chat applications
  • Comment sections
  • Social feeds

SkeletonCard

SkeletonCard provides a complete ready-to-use card skeleton.

const SkeletonCard()

Example

ListView(
  padding: const EdgeInsets.all(16),
  children: const [
    SkeletonCard(),
    SizedBox(height: 16),
    SkeletonCard(),
  ],
)

Customize the Card

const SkeletonCard(
  avatarSize: 56,
  titleWidth: 180,
  subtitleWidth: 120,
  contentHeight: 120,
  borderRadius: 20,
)

The card includes:

  • Avatar placeholder
  • Title placeholder
  • Subtitle placeholder
  • Content placeholder

SkeletonListItem

SkeletonListItem is useful for loading lists.

ListView.builder(
  itemCount: 8,
  itemBuilder: (context, index) {
    return const SkeletonListItem();
  },
)

Customize the List Item

const SkeletonListItem(
  avatarSize: 52,
  titleWidth: 180,
  subtitleWidth: 120,
)

Custom Colors

You can customize the skeleton colors:

const SkeletonBox(
  width: 200,
  height: 20,
  baseColor: Color(0xFFD1D5DB),
  highlightColor: Color(0xFFF9FAFB),
)

Custom Animation Speed

Control the shimmer animation speed:

const SkeletonBox(
  width: 200,
  height: 20,
  duration: Duration(milliseconds: 800),
)

Slower animation:

const SkeletonBox(
  width: 200,
  height: 20,
  duration: Duration(milliseconds: 2000),
)

Building Custom Skeleton Layouts

You can combine widgets to create your own loading layout.

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        const SkeletonAvatar(
          size: 64,
        ),
        const SizedBox(width: 16),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              SkeletonText(
                width: 180,
              ),
              SizedBox(height: 10),
              SkeletonText(
                width: 120,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Loading State Example

A common pattern is to show skeletons while data is loading:

class UserProfile extends StatelessWidget {
  const UserProfile({
    super.key,
    required this.isLoading,
  });

  final bool isLoading;

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return const SkeletonCard();
    }

    return const Text(
      'User profile loaded',
    );
  }
}

Available Widgets

Widget Description
SkeletonBase Base animated shimmer widget
SkeletonBox General rectangular placeholder
SkeletonText Text loading placeholder
SkeletonAvatar Circular avatar placeholder
SkeletonCard Complete card skeleton
SkeletonListItem List item skeleton

Design Philosophy

zeba_academy_skeleton follows a simple philosophy:

Loading states should feel like part of the interface, not interruptions to it.

The package is designed to be:

  • Simple
  • Flexible
  • Lightweight
  • Dependency-free
  • Easy to customize
  • Easy to integrate into production Flutter applications

Compatibility

This package supports Flutter applications running on:

  • Android
  • iOS
  • Web
  • Windows
  • macOS
  • Linux

Requirements

  • Dart SDK: ^3.12.0
  • Flutter: >=1.17.0

Development

Clone the repository:

git clone https://github.com/your-username/zeba_academy_skeleton.git

Navigate to the package:

cd zeba_academy_skeleton

Get dependencies:

flutter pub get

Format the code:

dart format lib test

Analyze the package:

flutter analyze

Run tests:

flutter test

Validate publishing:

flutter pub publish --dry-run

About Me

āœØ Iā€™m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at:

āž” sufyanism.com

Or connect with me on:

āž” LinkedIn

Your All-in-One Learning Hub

šŸš€ Explore courses and resources in coding, technology, and development at Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Level up your tech game today! šŸ’»āœØ

Zeba Academy is a learning platform dedicated to:

  • Coding
  • Technology
  • Software development
  • Practical learning
  • Real-world projects

āž” Visit our main site: zeba.academy

āž” Explore hands-on courses and resources: code.zeba.academy

āž” Watch tutorials on YouTube: Zeba Academy

āž” Follow us on Instagram: Zeba Academy

License

Copyright Ā© 2026 Sufyan bin Uzayr

This project is licensed under the GNU General Public License v3.0.

You may:

  • Use the software
  • Study the source code
  • Modify the source code
  • Redistribute the software

Under the terms of the GPL-3.0 license.

See the LICENSE file for the complete license text.

Thank You

Thank you for using zeba_academy_skeleton.

If this package helps you build better Flutter applications, consider supporting the project by sharing it with other developers.

ā­ Keep building. Keep learning. Keep creating.

Libraries

zeba_academy_skeleton