Flutter Skeleton Plus: Effortless Shimmering Placeholders #

Flutter Skeleton Plus is your go-to package for creating smooth, animated placeholders (also known as skeletons or shimmer effects) in your Flutter apps. These placeholders give users visual feedback while your app fetches data, making the wait feel shorter and the experience more polished.

Why Flutter Skeleton Plus? #

• Easy to Use: Drop in pre-built skeleton widgets and customize them to match your app's look and feel.
• Smooth Animations: Captivating shimmer effects keep users engaged.
• Flexible: Build complex loading states with ease.
• Well-Maintained: Developed by Apps Lanka with regular updates and support.

Get Started #

1. Install: Add flutter_skeleton_plus to your pubspec.yaml file.
2. Import: import 'package:flutter_skeleton_plus/flutter_skeleton_plus.dart';
3. Use: Wrap your content in Skeleton widgets while data is loading.

How To Use #

Can be used by encapsulating the child widget in a Skeleton widget:

import 'package:flutter_skeleton_plus/flutter_skeleton_plus.dart';

Skeleton(
        isLoading: _isLoading,
        skeleton: SkeletonListView(),
        child: Container(child: Center(child: Text("Content"))),
      )

or directly:

Container(
    child: _isLoading
    ? SkeletonListView()
    : Container(child: Center(
                       child: Text("Content"))),
)

a SkeletonTheme can be used to set the default configs for all skeleton descendants in the tree.

SkeletonTheme(
    // themeMode: ThemeMode.light,
    shimmerGradient: LinearGradient(
        colors: [
          Color(0xFFD8E3E7),
          Color(0xFFC8D5DA),
          Color(0xFFD8E3E7),
        ],
        stops: [
          0.1,
          0.5,
          0.9,
        ],
      ),
      darkShimmerGradient: LinearGradient(
        colors: [
          Color(0xFF222222),
          Color(0xFF242424),
          Color(0xFF2B2B2B),
          Color(0xFF242424),
          Color(0xFF222222),
        ],
        stops: [
          0.0,
          0.2,
          0.5,
          0.8,
          1,
        ],
        begin: Alignment(-2.4, -0.2),
        end: Alignment(2.4, 0.2),
        tileMode: TileMode.clamp,
      ),
        child: MateriaApp(
            ...
        ),
      ),

More Customization: #

ListView (Complex Cards)

for more complex shapes you can build your skeleton inside a SkeletonItem widget:

ListView.builder(
  physics: NeverScrollableScrollPhysics(),
  itemCount: 5,
  itemBuilder: (context, index) => Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(color: Colors.white),
      child: SkeletonItem(
          child: Column(
        children: [
          Row(
            children: [
              SkeletonAvatar(
                style: SkeletonAvatarStyle(
                    shape: BoxShape.circle, width: 50, height: 50),
              ),
              SizedBox(width: 8),
              Expanded(
                child: SkeletonParagraph(
                  style: SkeletonParagraphStyle(
                      lines: 3,
                      spacing: 6,
                      lineStyle: SkeletonLineStyle(
                        randomLength: true,
                        height: 10,
                        borderRadius: BorderRadius.circular(8),
                        minLength: MediaQuery.of(context).size.width / 6,
                        maxLength: MediaQuery.of(context).size.width / 3,
                      )),
                ),
              )
            ],
          ),
          SizedBox(height: 12),
          SkeletonParagraph(
            style: SkeletonParagraphStyle(
                lines: 3,
                spacing: 6,
                lineStyle: SkeletonLineStyle(
                  randomLength: true,
                  height: 10,
                  borderRadius: BorderRadius.circular(8),
                  minLength: MediaQuery.of(context).size.width / 2,
                )),
          ),
          SizedBox(height: 12),
          SkeletonAvatar(
            style: SkeletonAvatarStyle(
              width: double.infinity,
              minHeight: MediaQuery.of(context).size.height / 8,
              maxHeight: MediaQuery.of(context).size.height / 3,
            ),
          ),
          SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  SkeletonAvatar(
                      style: SkeletonAvatarStyle(width: 20, height: 20)),
                  SizedBox(width: 8),
                  SkeletonAvatar(
                      style: SkeletonAvatarStyle(width: 20, height: 20)),
                  SizedBox(width: 8),
                  SkeletonAvatar(
                      style: SkeletonAvatarStyle(width: 20, height: 20)),
                ],
              ),
              SkeletonLine(
                style: SkeletonLineStyle(
                    height: 16,
                    width: 64,
                    borderRadius: BorderRadius.circular(8)),
              )
            ],
          )
        ],
      )),
    ),
  ),
);

Examples #

Items		ListView (Default)

ListView (Custom)	ListView (Complex Cards)	SkeletonTheme

Light/Dark modes	Right-To-Left	Custom Shimmer