Stack Overflow Asked by chetan suri on January 1, 2022
I have ecommerce App in which I am loading multiple widgets which uses their own Future to build it. I have 6 widgets in SingleChildScrollView. Issue is I see 6 CircularProgressIndicator which looks very bad.
How can i check if Widget inside SingleChildScrollView has built and setstate to _isLoading = false;
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool _isLoading = false;
@override
void initState() {
super.initState();
_isLoading = true;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _isLoading
? Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Center(child: CircularProgressIndicator()))
: SingleChildScrollView(
child: Column(
children: <Widget>[
CarouselSliderList(),
Banner1Slot(),
TopCategoriesList(),
HotProducts(),
TopCategoriesIconList(),
AllProduct(),
],
),
),
);
}
}
Example of 1 widget in SingleChildScrollView in HomeScreen.
class Banner1Slot extends StatefulWidget {
@override
_TopCategoriesListState createState() => _TopCategoriesListState();
}
class _TopCategoriesListState extends State<Banner1Slot> {
@override
Widget build(BuildContext context) {
return FutureBuilder<List<Banner1>>(
future: getBanner1(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? Banner1Image(
banner1: snapshot.data,
)
: Center(
child: CircularProgressIndicator(
backgroundColor: Colors.black26,
),
);
},
);
}
}
try use Function in Banner1Image like this:
class Banner1Slot extends StatefulWidget {
Function onLoadedData;
Banner1Image({this.onLoadedData})
@override
_TopCategoriesListState createState() => _TopCategoriesListState();
}
class _TopCategoriesListState extends State<Banner1Slot> {
@override
Widget build(BuildContext context) {
return FutureBuilder<List<Banner1>>(
future: getBanner1(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
if( snapshot.hasData)
{
widget.onLoadedData();
return Banner1Image(
banner1: snapshot.data,
);
}
else return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.black26,
));
}
);
}
}
change code in HomeScreen to Like this:
@override
Widget build(BuildContext context) {
return Scaffold(
body: _isLoading
? Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Center(child: CircularProgressIndicator()))
: SingleChildScrollView(
child: Column(
children: <Widget>[
CarouselSliderList(),
Banner1Slot((){
setState(){
_isLoading = false;
};
}),
TopCategoriesList(),
HotProducts(),
TopCategoriesIconList(),
AllProduct(),
],
),
),
);
}
Answered by farouk osama on January 1, 2022
U need to use ChangeNotifierProvider to better handle CircularProgressIndicator and call notifierlistener for setState your layout
Answered by Mohsen Haydari on January 1, 2022
What about having a listener that listens to all of the isLoadingWidget in the widgets and does and AND? isLoading = isLoadingWidget1 && isLoadingWidget2 ...
Answered by bpedazur on January 1, 2022
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP