Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/101loop/skeleton-text
Flutter package for Skeleton Text Animation
https://github.com/101loop/skeleton-text
animation dart flutter library package shimmer
Last synced: about 2 hours ago
JSON representation
Flutter package for Skeleton Text Animation
- Host: GitHub
- URL: https://github.com/101loop/skeleton-text
- Owner: 101Loop
- License: bsd-2-clause
- Created: 2019-04-18T19:25:28.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-01T11:03:33.000Z (about 1 year ago)
- Last Synced: 2024-06-20T00:29:14.145Z (5 months ago)
- Topics: animation, dart, flutter, library, package, shimmer
- Language: Dart
- Size: 4.57 MB
- Stars: 36
- Watchers: 2
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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: [
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,
})
```