Why might a function not get called in initState(){ super.initState()} in flutter, but work perfectly fine if called later in the same page?

Question

I have a function named splitVendorMainCategory, which simply splits a List into two subLists, described as:

List vendorMainCategory = ['one', 'two', 'three', 'four'];

Future splitVendorMainCategory() async {
 for (int i=0; i< (vendorMainCategoryLength); i+=2){

      vendorMainCategoryC1.add(vendorMainCategory[i]),                    
    },

    for(int j = 1; j < vendorMainCategoryLength; j+=2){
      vendorMainCategoryC2.add(vendorMainCategory[j]),
    }
  }

And I call it right at the initialisation of the page, but it returns two empty sub-lists, while the List VendorMainCategory contains elements. I call the function as:

 @override
 initState() {
   splitVendorMainCategory();
   super.initState(); 
}

However, when I call the same function in 'body' of the same page, it returns the expected result.

vendorMainCategoryC1 = [one, three]
vendorMainCategoryC2 = [two, four]    

What could be causing the function to not be called at the initialisation of the page, but make it work completely fine when called inside another widget? No error is thrown when I try to run it either way, just that I get two different results. Any help will be highly appreciated.

Answer 1

problem here is :

1. splitVendorMainCategory() method is async which mean it takes some time to complete its execution

2. init() method is non-async that mean it will not await to any async method.

3. so whenever u call splitVendorMainCategory() before it completes its execution build() method is called & started building widgets

Soln:

1. Either use futurebuilder in build() method

or

2. use bool loading = true & set it to false after async method is complete & call setState() so that build() method is called again