TransWikia.com

Flutter check if Widgets inside SingleChildScrollView in HomeScreen is built or not

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,
                ),
              );
      },
    );
  }
}

3 Answers

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP