On this weblog, we’ll discover methods to Implement in skeleton loader in Flutter .
When making a cellular software, person on expertise is paramount. Gradual loading occasions and empty screens can frustrate customers .
To create a smoother and extra partaking loading expertise, builders typically to skeleton loaders.
You might also examine our flutter app development services.
Place skeleton loaders in your UI the place content material is loading. Sometimes, you’d substitute these skeleton loaders with precise content material as soon as the info is obtainable.
In fashionable app growth, offering a clean and interesting person expertise is essential. One option to improve person expertise is through the use of skeleton loading screens, which give customers the impression that content material is loading seamlessly.
Implementation:-
First we have to create a brand new flutter challenge and add the next dependencies within the pubspec.yaml file.
dependencies: flutter: sdk: flutter skeleton_loader: ^2.0.0+4
Now, run the command “flutter pub get” so as to add the dependencies.
Add the next package deal to your class.
import ‘package deal:skeleton_loader/skeleton_loader.dart’;
Create Skeleton loader :-
First, we are going to create a skeleton loader view in response to our personal view.
SkeletonLoader(
builder: Padding(
padding: const EdgeInsets.symmetric(
vertical: 18, horizontal: 18),
baby: Row(
youngsters: [
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,
),
],
)
],
),
),
gadgets: 5,
highlightColor: Colours.blue.shade200,
route: SkeletonDirection.ltr)Full Code:-
import 'package deal:flutter/materials.dart';
import 'package deal:skeleton_loader/skeleton_loader.dart';
class SkeletonLoaderScreen extends StatefulWidget
const SkeletonLoaderScreen(Key? key) : tremendous(key: key);
@override
State<SkeletonLoaderScreen> createState() => _SkeletonLoaderScreenState();
class _SkeletonLoaderScreenState extends State<SkeletonLoaderScreen>
Listing<ItemModel> knowledge = [
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."),
];
Listing<ItemModel>? itemData;
bool isLoading = true;
@override
void initState()
itemView();
tremendous.initState();
Future itemView() async
Future.delayed(const Period(seconds: 8), ()
itemData = knowledge;
setState(()
isLoading = false;
);
);
@override
Widget construct(BuildContext context)
return MaterialApp(
debugShowCheckedModeBanner: false,
house: Scaffold(
appBar: AppBar(
title: const Textual content(
"Skeleton Loader",
fashion: TextStyle(coloration: Colours.white),
),
),
physique: SingleChildScrollView(
baby: isLoading
? SkeletonLoader(
builder: Padding(
padding: const EdgeInsets.symmetric(
vertical: 18, horizontal: 18),
baby: Row(
youngsters: [
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,
),
],
)
],
),
),
gadgets: 5,
highlightColor: Colours.blue.shade200,
route: SkeletonDirection.ltr)
: ListView.builder(
itemCount: itemData?.size,
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
itemBuilder: (context, index)
return Padding(
padding: const EdgeInsets.symmetric(
vertical: 18, horizontal: 18),
baby: Row(
youngsters: [
Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Image.network(
itemData?[index].picture ?? "",
peak: 150,
width: 150,
match: BoxFit.fill,
),
),
const SizedBox(
width: 10,
),
Column(
youngsters: [
SizedBox(
width: MediaQuery.of(context).size.width / 2,
child: Text(
itemData?[index].title ?? "",
fashion: Theme.of(context).textTheme.bodyMedium,
),
),
const SizedBox(
peak: 10,
),
SizedBox(
width: MediaQuery.of(context).dimension.width / 2,
baby: Textual content(
itemData?[index].worth ?? "",
fashion:Theme.of(context).textTheme.bodyMedium,
),
),
const SizedBox(
peak: 10,
),
SizedBox(
width: MediaQuery.of(context).dimension.width / 2,
baby: Textual content(
itemData?[index].description ?? "",
maxLines: 2,
fashion: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(coloration: Colours.gray),
),
),
],
)
],
),
);
),
),
));
class ItemModel
String? picture;
String? title;
String? description;
String? worth;
ItemModel(this.picture, this.title, this.description, this.worth);
Output:-
We will see that the skeleton loader is displayed on the display screen till the info arrives and it appears to be like fairly good and enticing.
Conclusion:-
Skeleton loading screens are an efficient option to improve the person expertise in your Flutter app by offering suggestions throughout content material loading.
The skeleton_loader package deal simplifies the implementation of skeleton loaders, permitting you to create seamless and interesting loading screens.
Experiment with completely different types and animations to match your app’s design and delight your customers.
We now have performed with our implementation of Skeleton Loader In Flutter.
Test right here for extra fascinating blogs – https://mobikul.com/blog/
Hope this weblog helped you to higher perceive the implementation of Skeleton Loader In Flutter.
To discover extra of my blogs, please go to the next hyperlink.
Thanks for studying this weblog ❤️
References:-
#Skeleton #Loader #Flutter #Webkul #Weblog