Harrison 
In this blog, we will explore how to implement it in Flutter’s skeleton loader.
User experience is paramount when creating a mobile application. Slow loading times and blank screens can be frustrating for users.
To create a smoother and more appealing loading experience, developers often skeletonize loaders.
Also check out our Flutter app development services.
Place a skeleton loader in the UI where the content is loaded. Typically, you replace these skeleton loaders with actual content once the data is available.
In modern app development, it’s important to provide a smooth and engaging user experience. One way he improves the user experience is by using a skeleton loading screen that gives the user the impression that the content is loading seamlessly.
implementation:-
First, you need to create a new Flutter project and add the following dependencies to your pubspec.yaml file.
dependencies: flutter: sdk: flutter skeleton_loader: ^2.0.0+4
Next, run the “flutter pub get” command to add dependencies.
Add the following package to your class:
import ‘package:skeleton_loader/skeleton_loader.dart’;
Create a skeleton loader:-
First, create a skeleton loader view according to your own view.
SkeletonLoader(
builder: Padding(
padding: const EdgeInsets.symmetric(
vertical: 18, horizontal: 18),
child: Row(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.red,
),
height: 160,
width: 150,
),
const SizedBox(
width: 10,
),
Column(
children: [
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width / 2,
height: 20,
),
const SizedBox(
height: 10,
),
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width / 2,
height: 20,
),
const SizedBox(
height: 10,
),
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width /2,
height: 20,
),
const SizedBox(
height: 10,
),
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width /2,
height: 20,
),
],
)
],
),
),
items: 5,
highlightColor: Colors.blue.shade200,
direction: SkeletonDirection.ltr)
Complete code:-
import 'package:flutter/material.dart';
import 'package:skeleton_loader/skeleton_loader.dart';
class SkeletonLoaderScreen extends StatefulWidget
const SkeletonLoaderScreen(Key? key) : super(key: key);
@override
State<SkeletonLoaderScreen> createState() => _SkeletonLoaderScreenState();
class _SkeletonLoaderScreenState extends State<SkeletonLoaderScreen>
List<ItemModel> data = [
ItemModel(
image:
"
title: "Enchanting Fairyland Dress",
price: "$15.0",
description:
"Enchanted Fairyland Fairy Dress Up Springtime Tulle Skirt Elasticized Bodice."),
ItemModel(
image:
"
title: "T-Shirts and Tops",
price: "$5.0",
description: "T shirt is something comfortable whereas top is fancy."),
ItemModel(
image:
"
title: "ladies-tank-tops",
price: "$20.0",
description:
"A tank top is a knitted piece of clothing that covers the upper part of your body and has no sleeves."),
ItemModel(
image:
"
title: "Women Casual Regular Fit Brown Solid Overcoat",
price: "$25.0",
description:
"Women Casual Regular Fit Brown Solid Overcoat Quo commodi iusto vel ipsum voluptatum et sint necessita tibus nam vel qui laboriosam minima."),
];
List<ItemModel>? itemData;
bool isLoading = true;
@override
void initState()
itemView();
super.initState();
Future itemView() async
Future.delayed(const Duration(seconds: 8), ()
itemData = data;
setState(()
isLoading = false;
);
);
@override
Widget build(BuildContext context)
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text(
"Skeleton Loader",
style: TextStyle(color: Colors.white),
),
),
body: SingleChildScrollView(
child: isLoading
? SkeletonLoader(
builder: Padding(
padding: const EdgeInsets.symmetric(
vertical: 18, horizontal: 18),
child: Row(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.red,
),
height: 160,
width: 150,
),
const SizedBox(
width: 10,
),
Column(
children: [
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width / 2,
height: 20,
),
const SizedBox(
height: 10,
),
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width / 2,
height: 20,
),
const SizedBox(
height: 10,
),
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width / 2,
height: 20,
),
const SizedBox(
height: 10,
),
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width / 2,
height: 20,
),
],
)
],
),
),
items: 5,
highlightColor: Colors.blue.shade200,
direction: SkeletonDirection.ltr)
: ListView.builder(
itemCount: itemData?.length,
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
itemBuilder: (context, index)
return Padding(
padding: const EdgeInsets.symmetric(
vertical: 18, horizontal: 18),
child: Row(
children: [
Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Image.network(
itemData?[index].image ?? "",
height: 150,
width: 150,
fit: BoxFit.fill,
),
),
const SizedBox(
width: 10,
),
Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width / 2,
child: Text(
itemData?[index].title ?? "",
style: Theme.of(context).textTheme.bodyMedium,
),
),
const SizedBox(
height: 10,
),
SizedBox(
width: MediaQuery.of(context).size.width / 2,
child: Text(
itemData?[index].price ?? "",
style:Theme.of(context).textTheme.bodyMedium,
),
),
const SizedBox(
height: 10,
),
SizedBox(
width: MediaQuery.of(context).size.width / 2,
child: Text(
itemData?[index].description ?? "",
maxLines: 2,
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(color: Colors.grey),
),
),
],
)
],
),
);
),
),
));
class ItemModel
String? image;
String? title;
String? description;
String? price;
ItemModel(this.image, this.title, this.description, this.price);
output:-
You can see that the skeleton loader is displayed on the screen until the data arrives, and it looks very nice and attractive.
Conclusion:-
Skeleton loading screens are an effective way to improve the user experience of your Flutter app by providing feedback while content loads.
of skeleton_loader Packages simplify the implementation of skeleton loaders and allow you to create seamless and attractive loading screens.
Experiment with different styles and animations to suit your app design and delight your users.
You have completed implementing the skeleton loader in Flutter.
For more interesting blogs, check here –
I hope this blog helps you better understand the implementation of Skeleton Loader in Flutter.
To see more of my blog, please visit the following link:
Thank you for reading this blog ❤️
