In Flutter, the skeleton_text library is used to easily implement skeleton text loading animation. Its main application in a flutter app is to assure its users that the servers are working but running slow, but the content will eventually load. It also enhances the User Interface if the user connection is slow too.
in this article, we will be looking into the process of implementing the skeleton text to a flutter application by building a simple flutter app.
Steps to implement skeleton_text
Step 1 : Adding the Dependency
Add the skeleton_text dependency to the dependencies section of the pubspec.yaml file as shown below:
skeleton_text: ^3.0.1Now click on pub get button in android studio or visual studio code or run the below command in terminal.
flutter pub getStep 2 : Importing the Dependency
Use the below code to import the skeleton_text dependency to the main.dart file:
import 'package:skeleton_text/skeleton_text.dart';Step 3 : Structuring the Application
To give a Flutter application a simple structure with an appbar and a body, extend a StatelessWidget by forming a class as shown below:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Skeleton Text',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("GeeksForGeeks"),
backgroundColor: Colors.green,
foregroundColor: Colors.white
),
body:
),
);
}
}
Step 4 : Calling the Method
Make use of the SkeletonAnimation method provided by the skeleton_text package to show skeleton text for a list object as shown below:
children: <Widget>[
SkeletonAnimation(
child: Container(
width: 70.0,
height: 70.0,
decoration: BoxDecoration(
color: Colors.grey[300],
),
),
),
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(
child: Container(
height: 15,
width:
MediaQuery.of(context).size.width * 0.6,
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(
child: Container(
width: 60,
height: 13,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10.0),
color: Colors.grey[300]),
),
),
),
),
],
),
],
To know more about container in flutter refer this article: Container class in Flutter
Complete Source Code (main.dart):
import 'package:flutter/material.dart';
import 'package:skeleton_text/skeleton_text.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// root of the application
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Skeleton Text',
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("GeeksForGeeks"),
foregroundColor: Colors.white,
backgroundColor: Colors.green,
),
// list of items in body
body: ListView.builder(
scrollDirection: Axis.vertical,
physics: BouncingScrollPhysics(),
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: Colors.white70),
child: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
// SkeletonAnimation method
children: <Widget>[
SkeletonAnimation(
child: Container(
width: 70.0,
height: 70.0,
decoration: BoxDecoration(
color: Colors.grey[300],
),
),
),
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(
child: Container(
height: 15,
width:
MediaQuery.of(context).size.width * 0.6,
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(
child: Container(
width: 60,
height: 13,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10.0),
color: Colors.grey[300]),
),
),
),
),
],
),
],
),
),
),
);
}),
),
);
}
}
Output: