The solution to this question is: You can add screen delay so that at that time network will fetch the data and show into the screen. Meanwhile your user experience will be maintained as well. You can show loader (in my case i am using spinkitwave) to looks pretty engaging the customer.
late bool isLoading;
@override
void initState() {
isLoading = true;
void initState() {
isLoading = true;
setState(() {
getProducts().then((value) {
_products.addAll(value);
});
});
Future.delayed(const Duration(seconds: 5), () {
setState(() {
isLoading = false;
});
});
The code you can use for your project is :
isLoading == true
? Padding(
padding: const EdgeInsets.only(top: 100.0),
child: SpinKitWave(
itemBuilder: (BuildContext context, int index) {
return DecoratedBox(
decoration: BoxDecoration(
color: index.isEven
? MyColor.mainColor1
: MyColor.mainColor2,
),
);
},
),
)
: ListView.builder(
shrinkWrap: true,
itemCount:
_products.length == 0 ? 1 : _products.length,
itemBuilder: (BuildContext context, int index) {
if (_products.length == 0) {
return Padding(
padding: const EdgeInsets.only(top: 40.0),
child: Center(
child: Text("No Product Available")), // if no product available
);
} else {
return GestureDetector( // Your Widget to show data
)
Here what is happening, isLoaded is setted to be true which means when screen reload isLoad is true and show loader after then setState change it to false and show the rest of the code. We can also use Shimmer in place of loader.
Complete Code And the Widget Structure of mine is called to be :
isLoading == true
? Padding(
padding: const EdgeInsets.only(top: 100.0),
child: SpinKitWave(
itemBuilder: (BuildContext context, int index) {
return DecoratedBox(
decoration: BoxDecoration(
color: index.isEven
? MyColor.mainColor1
: MyColor.mainColor2,
),
);
},
),
)
: ListView.builder(
shrinkWrap: true,
itemCount:
_products.length == 0 ? 1 : _products.length,
itemBuilder: (BuildContext context, int index) {
if (_products.length == 0) {
return Padding(
padding: const EdgeInsets.only(top: 40.0),
child: Center(
child: Text("No Product Available")),
);
} else {
return GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
ProductDetails(
name: _products[index]
.ProductName,
bname: _products[index]
.BrandName,
size: _products[index].Size,
width: _products[index]
.DimensionWidth,
length: _products[index]
.DimensionLength,
weight:
_products[index].Weight,
)));
},
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.7),
spreadRadius: 0.1,
blurRadius: 7,
offset: Offset(0,
3), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(
right: 5.0),
child: Image(
image: AssetImage(
"images/Icons/user.png"),
),
),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
_products[index].ProductName,
style: TextStyle(
color: MyColor.textColor1,
fontSize: 14,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 8,
),
Row(
children: [
Text(
"Qty: ",
style: TextStyle(
color: MyColor.inActive,
fontSize: 12),
),
Text(
_products[index].PartNo,
style: TextStyle(
color:
MyColor.textColor3,
fontWeight:
FontWeight.bold,
fontSize: 12),
),
],
),
SizedBox(
height: 8,
),
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Text(
"Width: ",
style: TextStyle(
color: MyColor.inActive,
fontSize: 12),
),
Text(
_products[index]
.DimensionWidth,
style: TextStyle(
color:
MyColor.textColor3,
fontWeight:
FontWeight.bold,
fontSize: 12),
),
],
),
],
),
SizedBox(
width: 1,
),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"",
style: TextStyle(
color: MyColor.mainColor1,
fontSize: 14,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 8,
),
Row(
children: [
Text(
"Price: ",
style: TextStyle(
color: MyColor.inActive,
fontSize: 12),
),
Text(
_products[index].Size,
style: TextStyle(
color:
MyColor.textColor3,
fontWeight:
FontWeight.bold,
fontSize: 12),
),
],
),
SizedBox(
height: 8,
),
Row(
children: [
Text(
"Length: ",
style: TextStyle(
color: MyColor.inActive,
fontSize: 12),
),
Text(
_products[index]
.DimensionLength,
style: TextStyle(
color:
MyColor.textColor3,
fontWeight:
FontWeight.bold,
fontSize: 12),
),
],
),
],
),
Column(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"${_products[index].Size} Rs",
style: TextStyle(
color: MyColor.textColor3,
fontSize: 12,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 20,
),
MyProductTile()
],
),
],
),
),
),
);
}
},
),