101loop / skeleton-text

Flutter package for Skeleton Text Animation

skeleton_text

A package provides an easy way to add skeleton text loading animation in Flutter project

Dependency

dependencies:
  skeleton_text: 

How To Use

import 'package:skeleton_text/skeleton_text.dart';

To achieve the above example animation use the following code :

 ListView.builder(
   scrollDirection: Axis.vertical,
   physics: BouncingScrollPhysics(),
   itemCount: 5,
   itemBuilder: (BuildContext context, int index) {
     return Container(
       height: 240,
       margin: EdgeInsets.symmetric(horizontal: 20),
       child: Row(
         children: [
           Expanded(
             child: SkeletonAnimation(
               shimmerColor: Colors.grey,
               borderRadius: BorderRadius.circular(20),
               shimmerDuration: 1000,
               child: Container(
                 decoration: BoxDecoration(
                   color: Colors.grey[300],
                   borderRadius: BorderRadius.circular(20),
                   boxShadow: shadowList,
                 ),
                 margin: EdgeInsets.only(top: 40),
               ),
             ),
           ),
           Expanded(
             child: Container(
               margin: EdgeInsets.only(top: 60, bottom: 20),
               decoration: BoxDecoration(
                 color: Colors.grey,
                 boxShadow: shadowList,
                 borderRadius: BorderRadius.only(
                   topRight: Radius.circular(20),
                   bottomRight: Radius.circular(20),
                 ),
               ),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 crossAxisAlignment: CrossAxisAlignment.start,
                 mainAxisSize: MainAxisSize.max,
                 children: <Widget>[
                   Padding(
                     padding: const EdgeInsets.only(left: 15.0, bottom: 5.0),
                     child: SkeletonAnimation(
                       borderRadius: BorderRadius.circular(10.0),
                       shimmerColor: index % 2 != 0 ? Colors.grey : Colors.white54,
                       child: Container(
                         height: 30,
                         width: MediaQuery.of(context).size.width * 0.35,
                         decoration: BoxDecoration(
                             borderRadius: BorderRadius.circular(10.0),
                             color: Colors.grey[300]),
                       ),
                     ),
                   ),
                   Padding(
                     padding: const EdgeInsets.only(left: 15.0),
                     child: Padding(
                       padding: const EdgeInsets.only(right: 5.0),
                       child: SkeletonAnimation(
                         borderRadius: BorderRadius.circular(10.0),
                         shimmerColor: index % 2 != 0 ? Colors.grey : Colors.white54,
                         child: Container(
                           width: 60,
                           height: 30,
                           decoration: BoxDecoration(
                               borderRadius: BorderRadius.circular(10.0),
                               color: Colors.grey[300]),
                         ),
                       ),
                     ),
                   ),
                 ],
               ),
             ),
           ),
         ],
       ),
     );
   },
 )

Explanation

I have created a List builder of 5 Containers. Wrapping any widget by SkeletonAnimation would give a beautiful loading animation.

SkeletonAnimation Constructor :

  SkeletonAnimation({
      @required this.child,
      this.shimmerColor = Colors.white54,
      this.gradientColor = const Color.fromARGB(0, 244, 244, 244),
      this.curve = Curves.fastOutSlowIn,
      this.borderRadius = const BorderRadius.all(Radius.circular(0)),
      this.shimmerDuration = 1000,
      Key key,
    })

skeleton-text's Issues

Conflig with Flutter 3.13.0

../../../../.pub-cache/hosted/pub.dev/skeleton_text-3.0.0/lib/skeleton_text.dart:70:49: Error: The argument type 'BorderRadius?' can't be assigned to the parameter type 'BorderRadiusGeometry' because 'BorderRadius?' is nullable and 'BorderRadiusGeometry' isn't.

• 'BorderRadius' is from 'package:flutter/src/painting/border_radius.dart' ('/Library/development/flutter/packages/flutter/lib/src/painting/border_radius.dart').
• 'BorderRadiusGeometry' is from 'package:flutter/src/painting/border_radius.dart' ('/Library/development/flutter/packages/flutter/lib/src/painting/border_radius.dart').
  borderRadius: widget.borderRadius as BorderRadius?,
  ^

Support null safety

This is a request to add support for null safety to package:skeleton_text.
We depend on your awesome package, so would be great to have null safety enabled.

The Dart/Flutter team already encourages publishing the migrated packages: See this blog post.

See the migration guide for details about enabling null safety.

Is there a way to clip the shimmer to the child below?

Not an issue.
Is there a way to clip the shimmer to the child below? The shimmer is overflowing. Like a Cupertinobutton with shimmer

Upload null safety version to pub.dev

Please can you upload null safety version to pub.dev?