What is the best practice to display data from API call to a Flutter DropdownButton?

Question

Currently my app is making an http request to an API that gives me json with some items listed, this json get assigned to a List variable. I am already pulling in this data into my app but need to display it on a DropDownButton. To display this data in a dropdown button should I be using FutureBuilder or is there a best practice for something like this?

Answer 1

You can try something like this, WalletRepo.getRestaurantBalance() fetches a bunch of restaurant with their current balance

FutureBuilder(
                                future: WalletRepo.getRestaurantBalance(),
                                builder: (_, AsyncSnapshot<GetRestaurantBalance> snapshot){
                                  if(snapshot.hasData && snapshot.data != null){
                                    return StatefulBuilder(builder: (BuildContext context, void Function(void Function()) nSetState)  {
                                      return Column(
                                        children: [
                                          Container(
                                            decoration: BoxDecoration(
                                                border: Border.all(color: Colors.grey),
                                                borderRadius: BorderRadius.circular(5)
                                            ),
                                            padding: EdgeInsets.symmetric(horizontal: 10,vertical: 5),
                                            child: DropdownButtonHideUnderline(
                                              child: DropdownButton(
                                                onChanged: (RestaurantBalanceModel restaurant) {
                                                  if(restaurant.balance > 0.0){
                                                    print(chosenRestaurant);
                                                    nSetState(() => chosenRestaurant = restaurant);

                                                  }else{
                                                    Snack.bottom('Error', 'Restaurant has no balance to withdraw');
                                                  }
                                                },
                                                value: chosenRestaurant,
                                                isExpanded: true,
                                                hint: Text(
                                                    'Choose a restaurant'
                                                ),
                                                items: snapshot.data.getAllRestaurantsByOwner.data.map((restaurant) => DropdownMenuItem(
                                                  value: restaurant,
                                                  child: Row(
                                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                    children: [
                                                      Text(
                                                          restaurant.name
                                                      ),
                                                      Text(
                                                          '৳ ${restaurant.balance.toStringAsFixed(1)}'
                                                      )
                                                    ],
                                                  ),
                                                )).toList(),
                                              ),
                                            ),
                                          )