skeleton_chat_loader 1.0.0

A Flutter widget for skeleton loading animations with a shimmer effect, designed for chat UIs.

T# skeleton_chat_loader

A Flutter package that provides customizable shimmer loading animations for chat message bubbles, perfect for chat applications while loading messages or waiting for network responses.

Features

• Customizable message bubble dimensions
• Sender/Receiver message bubble styles
• Configurable shimmer colors
• Smooth animation transitions
• Responsive design

Screenshots

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  skeleton_chat_loader: ^1.0.0

Run:

flutter pub get

Usage

Import the package:

import 'package:skeleton_chat_loader/skeleton_chat_loader.dart';

Basic Usage

// Simple message loading skeleton
MessageShimmerLoading(
  height: 50,
  isSender: false,
  maxWidth: 280,
)

Customized Loading Skeleton

// Customized message loading skeleton with custom colors
MessageShimmerLoading(
  height: 70,
  isSender: true,
  maxWidth: 320,
  shimmerColors: [
    Colors.blue.shade100,
    Colors.blue.shade50,
    Colors.blue.shade100,
  ],
)

Example in a Chat List

ListView.builder(
  itemCount: 5, // Number of loading skeletons
  itemBuilder: (context, index) {
    return MessageShimmerLoading(
      height: 50,
      isSender: index % 2 == 0, // Alternate between sender and receiver
      maxWidth: 280,
    );
  },
)

Parameters

Parameter	Type	Default	Description
height	double	50	Height of the message bubble
isSender	bool	false	Whether the message is from the sender
maxWidth	double	280	Maximum width of the message bubble
shimmerColors	List	null	Custom colors for shimmer effect

Contributing

Feel free to contribute to this package by creating issues or submitting pull requests on our GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.