On this weblog, we’ll discover Implement in skeleton loader in Flutter .
When making a cell utility, consumer on expertise is paramount. Sluggish loading occasions and empty screens can frustrate customers .
To create a smoother and extra participating loading expertise, builders usually to skeleton loaders.
You may additionally test our flutter app improvement providers.
Place skeleton loaders in your UI the place content material is loading. Sometimes, you’d change these skeleton loaders with precise content material as soon as the information is accessible.
In trendy app improvement, offering a clean and interesting consumer expertise is essential. One method to improve consumer expertise is by utilizing skeleton loading screens, which give customers the impression that content material is loading seamlessly.
Implementation:-
First we have to create a brand new flutter undertaking 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 bundle to your class.
import ‘bundle:skeleton_loader/skeleton_loader.dart’;
Create Skeleton loader :-
First, we’ll create a skeleton loader view in accordance with 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 'bundle:flutter/materials.dart';
import 'bundle: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> {
Record<ItemModel> knowledge = [
ItemModel(
image:
"https://demo.bagisto.com/mobikul-mp-common/storage/product/1028/zP8lCNxK6Zwn1pESnkPRZ0Oam05Rle9Fkd6mSovl.jpg",
title: "Enchanting Fairyland Dress",
price: "$15.0",
description:
"Enchanted Fairyland Fairy Dress Up Springtime Tulle Skirt Elasticized Bodice."),
ItemModel(
image:
"https://demo.bagisto.com/mobikul-mp-common/storage/category/7/fXLqiJ0Gg7cZTP0KaGFzn8gqXy052srQ0h8so3DZ.png",
title: "T-Shirts and Tops",
price: "$5.0",
description: "T shirt is something comfortable whereas top is fancy."),
ItemModel(
image:
"https://demo.bagisto.com/mobikul-mp-common/storage/product/134/1SXvD5emeW9EaQ1ggopHq0Tw5h04KdWPnKHvQZI0.png",
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:
"https://demo.bagisto.com/mobikul-mp-common/cache/original/product/875/LXb9JsVzjEj60IWst5nX7hZnGO44fTlPCisviLjh.png",
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."),
];
Record<ItemModel>? itemData;
bool isLoading = true;
@override
void initState() {
itemView();
tremendous.initState();
}
Future itemView() async {
Future.delayed(const Length(seconds: 8), () {
itemData = knowledge;
setState(() {
isLoading = false;
});
});
}
@override
Widget construct(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
dwelling: Scaffold(
appBar: AppBar(
title: const Textual content(
"Skeleton Loader",
model: 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 ?? "",
model: Theme.of(context).textTheme.bodyMedium,
),
),
const SizedBox(
peak: 10,
),
SizedBox(
width: MediaQuery.of(context).measurement.width / 2,
baby: Textual content(
itemData?[index].value ?? "",
model:Theme.of(context).textTheme.bodyMedium,
),
),
const SizedBox(
peak: 10,
),
SizedBox(
width: MediaQuery.of(context).measurement.width / 2,
baby: Textual content(
itemData?[index].description ?? "",
maxLines: 2,
model: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(coloration: Colours.gray),
),
),
],
)
],
),
);
}),
),
));
}
}
class ItemModel {
String? picture;
String? title;
String? description;
String? value;
ItemModel({this.picture, this.title, this.description, this.value});
}Output:-
We will see that the skeleton loader is displayed on the display till the information arrives and it seems fairly good and engaging.
Conclusion:-
Skeleton loading screens are an efficient method to improve the consumer expertise in your Flutter app by offering suggestions throughout content material loading.
The skeleton_loader bundle 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’ve completed with our implementation of Skeleton Loader In Flutter.
Verify right here for extra fascinating blogs – https://mobikul.com/weblog/
Hope this weblog helped you to raised perceive the implementation of Skeleton Loader In Flutter.
To discover extra of my blogs, please go to the next hyperlink.
https://webkul.com/weblog/writer/sakshirai-mk754/
Thanks for studying this weblog ❤️
References:-
https://pub.dev/packages/skeleton_loader/instance
On this weblog, we’ll discover Implement in skeleton loader in Flutter .
When making a cell utility, consumer on expertise is paramount. Sluggish loading occasions and empty screens can frustrate customers .
To create a smoother and extra participating loading expertise, builders usually to skeleton loaders.
You may additionally test our flutter app improvement providers.
Place skeleton loaders in your UI the place content material is loading. Sometimes, you’d change these skeleton loaders with precise content material as soon as the information is accessible.
In trendy app improvement, offering a clean and interesting consumer expertise is essential. One method to improve consumer expertise is by utilizing skeleton loading screens, which give customers the impression that content material is loading seamlessly.
Implementation:-
First we have to create a brand new flutter undertaking 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 bundle to your class.
import ‘bundle:skeleton_loader/skeleton_loader.dart’;
Create Skeleton loader :-
First, we’ll create a skeleton loader view in accordance with 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 'bundle:flutter/materials.dart';
import 'bundle: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> {
Record<ItemModel> knowledge = [
ItemModel(
image:
"https://demo.bagisto.com/mobikul-mp-common/storage/product/1028/zP8lCNxK6Zwn1pESnkPRZ0Oam05Rle9Fkd6mSovl.jpg",
title: "Enchanting Fairyland Dress",
price: "$15.0",
description:
"Enchanted Fairyland Fairy Dress Up Springtime Tulle Skirt Elasticized Bodice."),
ItemModel(
image:
"https://demo.bagisto.com/mobikul-mp-common/storage/category/7/fXLqiJ0Gg7cZTP0KaGFzn8gqXy052srQ0h8so3DZ.png",
title: "T-Shirts and Tops",
price: "$5.0",
description: "T shirt is something comfortable whereas top is fancy."),
ItemModel(
image:
"https://demo.bagisto.com/mobikul-mp-common/storage/product/134/1SXvD5emeW9EaQ1ggopHq0Tw5h04KdWPnKHvQZI0.png",
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:
"https://demo.bagisto.com/mobikul-mp-common/cache/original/product/875/LXb9JsVzjEj60IWst5nX7hZnGO44fTlPCisviLjh.png",
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."),
];
Record<ItemModel>? itemData;
bool isLoading = true;
@override
void initState() {
itemView();
tremendous.initState();
}
Future itemView() async {
Future.delayed(const Length(seconds: 8), () {
itemData = knowledge;
setState(() {
isLoading = false;
});
});
}
@override
Widget construct(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
dwelling: Scaffold(
appBar: AppBar(
title: const Textual content(
"Skeleton Loader",
model: 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 ?? "",
model: Theme.of(context).textTheme.bodyMedium,
),
),
const SizedBox(
peak: 10,
),
SizedBox(
width: MediaQuery.of(context).measurement.width / 2,
baby: Textual content(
itemData?[index].value ?? "",
model:Theme.of(context).textTheme.bodyMedium,
),
),
const SizedBox(
peak: 10,
),
SizedBox(
width: MediaQuery.of(context).measurement.width / 2,
baby: Textual content(
itemData?[index].description ?? "",
maxLines: 2,
model: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(coloration: Colours.gray),
),
),
],
)
],
),
);
}),
),
));
}
}
class ItemModel {
String? picture;
String? title;
String? description;
String? value;
ItemModel({this.picture, this.title, this.description, this.value});
}Output:-
We will see that the skeleton loader is displayed on the display till the information arrives and it seems fairly good and engaging.
Conclusion:-
Skeleton loading screens are an efficient method to improve the consumer expertise in your Flutter app by offering suggestions throughout content material loading.
The skeleton_loader bundle 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’ve completed with our implementation of Skeleton Loader In Flutter.
Verify right here for extra fascinating blogs – https://mobikul.com/weblog/
Hope this weblog helped you to raised perceive the implementation of Skeleton Loader In Flutter.
To discover extra of my blogs, please go to the next hyperlink.
https://webkul.com/weblog/writer/sakshirai-mk754/
Thanks for studying this weblog ❤️
References:-
https://pub.dev/packages/skeleton_loader/instance