Skip to content

reynirf/Skeleton-Text

This branch is 3 commits behind 101Loop/Skeleton-Text:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

af60144 · Aug 16, 2023

History

29 Commits
Jan 21, 2021
Mar 12, 2021
Aug 16, 2023
Jan 21, 2021
Jan 21, 2021
Apr 18, 2019
Aug 16, 2019
Mar 4, 2021
Apr 18, 2019
Jan 21, 2021
Mar 4, 2021
Apr 18, 2019

Repository files navigation

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

About

Flutter package for Skeleton Text Animation

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Dart 90.7%
  • Objective-C 7.8%
  • Java 1.5%