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),
)

`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:

Format the code.
Run static analysis.
Run all tests.
Update documentation when necessary.
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

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.

Zeba Academy Skeleton

Features

Screenshots

Installation

Import

Usage

Text Skeleton

Box Skeleton

Circle Skeleton

Complete Example

Customization

Custom Colors

Animation

Default Animation

Disable Animation

Animation Duration

Widget API

ZebaTextSkeleton

Constructor

Parameters

ZebaBoxSkeleton

Constructor

Parameters

ZebaCircleSkeleton

Constructor

Parameters

Creating Loading Layouts

Design Philosophy

Performance

Accessibility

Testing

Development

Requirements

Roadmap

Contributing

Issues and Feature Requests

About Me

Your All-in-One Learning Hub!

License

Support

Changelog

Author

Libraries

zeba_academy_skeleton_loader package

`ZebaTextSkeleton`

`ZebaBoxSkeleton`

`ZebaCircleSkeleton`