zeba_academy_skeleton_loader 0.0.1

A lightweight Flutter package for creating animated skeleton loading placeholders with text, box, and circle widgets.

Zeba Academy Skeleton

A lightweight Flutter package for creating animated skeleton loading placeholders without external runtime dependencies.

zeba_academy_skeleton provides ready-to-use skeleton widgets for text, rectangular boxes, and circular elements with a built-in shimmer-like animation.

---

Features

• ✨ Text skeleton loading
• 📦 Rectangular box skeleton loading
• ⭕ Circular skeleton loading
• 🎨 Custom base and highlight colors
• 📐 Configurable width and height
• 🔲 Configurable border radius
• ⏱️ Configurable animation duration
• ⚡ Enable or disable animation
• 🌓 Automatically adapts default colors to the current Material theme
• 🧩 Null-safe API
• 🚫 No external runtime dependencies
• 🧪 Widget tests included
• 📱 Works with Flutter applications
• 🎯 Simple and predictable API

---

Screenshots

The package can be used to create loading interfaces such as:

• User profile placeholders
• Article loading screens
• Product cards
• Dashboard loading states
• List item placeholders
• Image placeholders
• Content loading states

---

Installation

Add zeba_academy_skeleton to your pubspec.yaml:

dependencies:
  zeba_academy_skeleton: ^0.0.1

Then run:

flutter pub get

Alternatively, add the package using:

flutter pub add zeba_academy_skeleton

---

Import

Import the package into your Dart file:

import 'package:zeba_academy_skeleton/zeba_academy_skeleton.dart';

---

Usage

Text Skeleton

Use ZebaTextSkeleton for text-shaped loading placeholders.

const ZebaTextSkeleton(
  width: 200,
  height: 16,
)

You can also allow the widget to use the available width from its parent:

const ZebaTextSkeleton(
  height: 16,
)

---

Box Skeleton

Use ZebaBoxSkeleton for rectangular loading placeholders.

const ZebaBoxSkeleton(
  width: 300,
  height: 150,
)

With a custom border radius:

const ZebaBoxSkeleton(
  width: 300,
  height: 150,
  radius: 16,
)

For a full-width placeholder:

const ZebaBoxSkeleton(
  width: double.infinity,
  height: 200,
  radius: 12,
)

---

Circle Skeleton

Use ZebaCircleSkeleton for circular loading placeholders.

const ZebaCircleSkeleton(
  size: 64,
)

For a profile image placeholder:

const ZebaCircleSkeleton(
  size: 56,
)

---

Complete Example

The following example demonstrates a typical profile loading layout:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Skeleton Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
        ),
        useMaterial3: true,
      ),
      home: const SkeletonExamplePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Skeleton Loading'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                ZebaCircleSkeleton(
                  size: 56,
                ),
                SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      ZebaTextSkeleton(
                        width: 180,
                        height: 16,
                      ),
                      SizedBox(height: 8),
                      ZebaTextSkeleton(
                        width: 120,
                        height: 12,
                      ),
                    ],
                  ),
                ),
              ],
            ),
            SizedBox(height: 24),
            ZebaBoxSkeleton(
              width: double.infinity,
              height: 180,
              radius: 12,
            ),
            SizedBox(height: 16),
            ZebaTextSkeleton(
              width: 240,
              height: 18,
            ),
            SizedBox(height: 8),
            ZebaTextSkeleton(
              width: double.infinity,
              height: 14,
            ),
            SizedBox(height: 8),
            ZebaTextSkeleton(
              width: 280,
              height: 14,
            ),
          ],
        ),
      ),
    );
  }
}

---

Customization

All skeleton widgets provide configuration options for dimensions, colors, animation, and appearance.

Custom Colors

ZebaTextSkeleton(
  width: 200,
  height: 16,
  baseColor: Colors.grey.shade300,
  highlightColor: Colors.grey.shade100,
)

For a box:

ZebaBoxSkeleton(
  width: 300,
  height: 150,
  baseColor: Colors.grey.shade300,
  highlightColor: Colors.white,
)

For a circle:

ZebaCircleSkeleton(
  size: 64,
  baseColor: Colors.grey.shade300,
  highlightColor: Colors.white,
)

If colors are not specified, the package uses colors derived from the current Material theme.

---

Animation

Skeleton widgets use a built-in shimmer-like animation.

No additional shimmer package is required.

Default Animation

Animation is enabled by default:

const ZebaTextSkeleton(
  width: 200,
)

---

Disable Animation

You can create a static skeleton by setting animate to false:

const ZebaTextSkeleton(
  width: 200,
  animate: false,
)

The same option is available for box and circle skeletons:

const ZebaBoxSkeleton(
  width: 300,
  height: 150,
  animate: false,
)

const ZebaCircleSkeleton(
  size: 64,
  animate: false,
)

---

Animation Duration

The default animation duration is 1500 milliseconds.

You can customize it:

const ZebaTextSkeleton(
  width: 200,
  duration: Duration(milliseconds: 800),
)

Slower animation:

const ZebaTextSkeleton(
  width: 200,
  duration: Duration(milliseconds: 2500),
)

---

Widget API

ZebaTextSkeleton

A text-shaped skeleton loading placeholder.

Constructor

const ZebaTextSkeleton({
  Key? key,
  double? width,
  double height = 16,
  double radius = 4,
  Color? baseColor,
  Color? highlightColor,
  Duration duration = const Duration(milliseconds: 1500),
  bool animate = true,
})

Parameters

Parameter	Type	Default	Description
width	double?	null	Width of the skeleton
height	double	16	Height of the skeleton
radius	double	4	Border radius
baseColor	Color?	Theme-based	Base skeleton color
highlightColor	Color?	Theme-based	Shimmer highlight color
duration	Duration	1500ms	Animation cycle duration
animate	bool	true	Enables or disables animation

---

ZebaBoxSkeleton

A rectangular skeleton loading placeholder.

Constructor

const ZebaBoxSkeleton({
  Key? key,
  double? width,
  double height = 100,
  double radius = 8,
  Color? baseColor,
  Color? highlightColor,
  Duration duration = const Duration(milliseconds: 1500),
  bool animate = true,
})

Parameters

Parameter	Type	Default	Description
width	double?	null	Width of the skeleton
height	double	100	Height of the skeleton
radius	double	8	Border radius
baseColor	Color?	Theme-based	Base skeleton color
highlightColor	Color?	Theme-based	Shimmer highlight color
duration	Duration	1500ms	Animation cycle duration
animate	bool	true	Enables or disables animation

---

ZebaCircleSkeleton

A circular skeleton loading placeholder.

Constructor

const ZebaCircleSkeleton({
  Key? key,
  double size = 48,
  Color? baseColor,
  Color? highlightColor,
  Duration duration = const Duration(milliseconds: 1500),
  bool animate = true,
})

Parameters

Parameter	Type	Default	Description
size	double	48	Diameter of the circle
baseColor	Color?	Theme-based	Base skeleton color
highlightColor	Color?	Theme-based	Shimmer highlight color
duration	Duration	1500ms	Animation cycle duration
animate	bool	true	Enables or disables animation

---

Creating Loading Layouts

Skeleton widgets can be composed together to represent complex interfaces.

For example:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Row(
      children: [
        const ZebaCircleSkeleton(
          size: 48,
        ),
        const SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const ZebaTextSkeleton(
                width: 160,
                height: 16,
              ),
              const SizedBox(height: 8),
              const ZebaTextSkeleton(
                width: 100,
                height: 12,
              ),
            ],
          ),
        ),
      ],
    ),
    const SizedBox(height: 20),
    const ZebaBoxSkeleton(
      width: double.infinity,
      height: 180,
      radius: 12,
    ),
  ],
)

This approach allows you to create reusable loading states for:

• Profiles
• Product cards
• Articles
• Dashboards
• Social feeds
• Lists
• Detail pages
• Search results

---

Design Philosophy

zeba_academy_skeleton is intentionally designed to remain small and dependency-free.

The package relies on Flutter's built-in:

• AnimationController
• AnimatedBuilder
• LinearGradient
• ShaderMask
• ClipRRect
• Material theme system

There are no external runtime packages required.

This keeps the package lightweight and reduces dependency overhead for applications that only need basic skeleton loading components.

---

Performance

The shimmer animation is implemented using Flutter's animation framework.

For best performance:

• Use skeletons only while content is loading.
• Disable animation when it is not necessary.
• Avoid creating unnecessarily large numbers of animated skeletons.
• Remove loading placeholders when the actual content becomes available.
• Prefer reusable loading layouts for complex screens.

For example:

const ZebaBoxSkeleton(
  width: double.infinity,
  height: 150,
  animate: false,
)

can be used when animation is not required.

---

Accessibility

Skeleton placeholders are visual loading indicators and should not replace meaningful loading semantics in accessibility-sensitive applications.

When appropriate, combine skeleton layouts with semantic loading information in the surrounding application.

The package also allows animation to be disabled:

const ZebaTextSkeleton(
  width: 200,
  animate: false,
)

---

Testing

The package includes widget tests covering the primary skeleton components.

Run all tests with:

flutter test

Run static analysis with:

flutter analyze

Format the project with:

dart format lib test

---

Development

Clone the repository:

git clone https://github.com/sufyanism/zeba_academy_skeleton.git

Navigate into the project:

cd zeba_academy_skeleton

Install dependencies:

flutter pub get

Run tests:

flutter test

Run analysis:

flutter analyze

Check package publishing:

flutter pub publish --dry-run

---

Requirements

The package requires:

• Flutter
• Dart SDK ^3.12.0 or compatible
• Flutter >=1.17.0

The package does not require any external runtime dependencies.

---

Roadmap

Potential future improvements may include:

• Additional skeleton shapes
• Paragraph skeleton helpers
• List skeleton helpers
• Card skeleton helpers
• More animation styles
• Direction control for shimmer
• Additional customization options

The public API will remain focused on simple, reusable skeleton loading components.

---

Contributing

Contributions are welcome.

Before submitting a pull request:

1. Format the code.
2. Run static analysis.
3. Run all tests.
4. Update documentation when necessary.
5. Update CHANGELOG.md for user-facing changes.

Run:

dart format lib test
flutter analyze
flutter test

Please keep contributions focused and maintain the package's lightweight, dependency-free design.

---

Issues and Feature Requests

If you discover a bug or have a feature request, please open an issue in the project's GitHub repository.

When reporting a bug, include:

• Flutter version
• Dart version
• Package version
• Operating system
• Minimal reproduction
• Expected behavior
• Actual behavior

---

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!

🚀 Zeba Academy is built to help developers learn, build, and grow through practical programming resources.

Explore:

• 🌐 Zeba Academy
• 💻 Zeba Academy Code
• 📚 Flutter learning resources
• 🎥 Programming tutorials and educational content
• 🧑‍💻 Open-source projects and developer resources

---

License

Copyright © 2026 Sufyan bin Uzayr.

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You may use, modify, and distribute this software according to the terms of the license.

See the LICENSE file for the complete license text.

For more information about GPL-3.0, visit:

https://www.gnu.org/licenses/gpl-3.0.html

---

Support

If you find this package useful:

• ⭐ Star the repository
• 👍 Like the package on pub.dev
• 🐛 Report bugs
• 💡 Suggest improvements
• 🤝 Contribute to the project
• 📢 Share it with other Flutter developers

Your support helps encourage the development of more open-source Flutter packages.

---

Changelog

See CHANGELOG.md for a complete history of changes.

---

Author

Sufyan bin Uzayr

• Website: https://sufyanism.com/
• LinkedIn: https://www.linkedin.com/in/sufyanism
• Zeba Academy: https://zeba.academy/
• Zeba Academy Code: https://code.zeba.academy/

---

Built with ❤️ for the Flutter community.