Flutter - Skeleton Text - GeeksforGeeks

28 Oct, 2020
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 UI 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.  To build the same follow the below steps:
Add the skeleton_text dependency to the pubspec.yaml file
Import the dependency to the main.dart file
Build a simple app structure to implement the dependency
Call the SkeletoAnimation method in the body of the app
Now, let’s look into the steps in detail:
Add the skeleton_text dependency to the dependencies section of the pubspec.yaml file as shown below:
Use the below code to import the skeleton_text dependency to the main.dart file:
import 'package:skeleton_text/skeleton_text.dart';

To give a Flutter application a simple structure with an appbar and a body, extend a StatelessWidget by forming a class as shown below:
Dart
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,    ),        body:      ),    );  }}
Make use of the SkeletonAnimation method provided by the skeleton_text package to show skeleton text for a list object as shown below:
Dart
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]),                                  ),                                ),                              ),                            ),                          ],
Complete Source Code:
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',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: Scaffold(        appBar: AppBar(          title: Text("GeeksForGeeks"),      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:
android
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Flexible Widget
Flutter - BoxShadow Widget