Flutter package for Skeleton Text Animation

Overview

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,
    })
You might also like...

Animation package for Flutter, inspired by Animate.css

Animation package for Flutter, inspired by Animate.css

animator Enables you to create stunning flutter animations, faster, efficient and with less code. Null safety: For null safety please use flutter_anim

Dec 6, 2022

A light weight package for flutter apps, that easily shows a splash screen with a nice fade animation.

Animated Splash Screen Using the package Get the library environment: sdk: "=2.1.0 3.0.0" Add dependency in pubspec.yaml dependencies: animated_

Oct 6, 2022

A Flutter package to custom splash screen like change logo icon, logo animation, and splash screen background color.

A Flutter package to custom splash screen like change logo icon, logo animation, and splash screen background color.

Custom Splash Screen A Flutter package to custom splash screen: change logo icon, logo animation, and splash screen background color. (Custom from ani

Sep 6, 2022

A flutter package which display the library collapse according to the number of images associated with hero animation

A flutter package which display the library collapse according to the number of images associated with hero animation

👏 Gallery Collapse A flutter package which display the library collapse accordi

Sep 12, 2022

Bubbleslider - A flutter package support a slider customize UI with bubble animation

Bubbleslider - A flutter package support a slider customize UI with bubble animation

bubble_slider This package support a slider customize UI with bubble animation.

Jul 26, 2022

A powerful Flutter package for building complex animation step by step.

A powerful Flutter package for building complex animation step by step.

A powerful Flutter package for building complex animation step by step.

Jun 25, 2021

A package for flip panel with built-in animation

A package for flip panel with built-in animation

Flip Panel A package for flip panel with built-in animation How to use import 'package:flip_panel/flip_panel.dart'; Create a flip panel from iterable

Dec 29, 2022

Flutter widget that automatically resizes text to fit perfectly within its bounds.

Flutter widget that automatically resizes text to fit perfectly within its bounds.

ONLY FOR FLUTTER WEB Flutter widget that automatically resizes text to fit perfectly within its bounds. Show some ❤️ and star the repo to support the

Jan 6, 2022

Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Dec 1, 2022
Comments
  • Support null safety

    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.

    enhancement 
    opened by IchordeDionysos 4
Owner
101Loop
101Loop is a community that promotes Open Source Projects among young learners and provide mentorship and guidance to them via Open Source Projects
101Loop
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 225 Dec 22, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Hasan Mohammed 91 Dec 20, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Blackshadow Software Ltd 11 Sep 1, 2022
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Blackshadow Software Ltd 9 Oct 27, 2022
Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute ??

Lucas da Silva Barbosa 8 Nov 6, 2022
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Mazouzi Aymene 3 Oct 6, 2022
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
Convert text to paths and animate them with this Flutter package

Text to Path Maker This is a pure Flutter and Dart package that allows you to convert text--both characters and icons--into paths. It can generate SVG

Ashraff Hathibelagal 81 Sep 23, 2022