Question 78600 in Flutter Question posted in
The official Flutter documentation can be found here.

How to update the UI when items inside DropDownButtonFormField changes? – Flutter

I was working with DropDownButtonFormField2 where the items come from the API call.

The problem is, when the API call is finished, the dropdown list items are not updated.
After the API call is finished, I already called setState(). But the item list is not updated, I need to go to other screen and go back to refresh the dropdown.
I am using mobx btw.

Any help would be appreciated. Thank you

my_screen.dart


class MyScreenState extends State<MyScreen> {

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        key: _scaffoldKey,
        body: _buildItemDropDown(),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _my_store.getItemList().then((value) {
      setState(() {});
    });
  }


_buildItemDropDown() {
    return DropdownButtonHideUnderline(
        key: UniqueKey(),
        child: DropdownButtonFormField2(
      decoration: InputDecoration(
        isDense: true,
        contentPadding: EdgeInsets.zero,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(4),
        ),
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: ColorPalette.green[400]!)),
        enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: ColorPalette.black[200]!)),
      ),
      isExpanded: true,
      hint: const Text(
        'Options',
        style: TextStyle(fontSize: 14),
      ),
      iconOnClick: SvgPicture.asset(
        'assets/svg/arrow_drop_down_activated.svg',
      ),
      icon: SvgPicture.asset(
        'assets/svg/arrow_drop_down.svg',
      ),
      iconSize: 30,
      isDense: true,
      buttonHeight: 40,
      buttonPadding: const EdgeInsets.only(left: 12, right: 12),
      dropdownDecoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
      ),
      items: obsItemSpec.asMap().entries.map((item) {
        return DropdownMenuItem<String>(
          value: item.value,
          enabled: false,
          child: StatefulBuilder(
            builder: (context, menuSetState) {
              final _isSelected = selectedItems.contains(item.value);
              return InkWell(
                onTap: () {
                  _isSelected
                      ? selectedItems.remove(item.value)
                      : selectedItems.add(item.value);
                  setState(() {});
                  menuSetState(() {});
                },
                child: Container(
                  color: (item.key % 2 != 0)
                      ? ColorPalette.white[400]
                      : ColorPalette.white[500],
                  height: double.infinity,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 18.0, vertical: 0),
                  child: Row(
                    children: [
                      _isSelected
                          ? SvgPicture.asset(
                              'assets/svg/checkbox_green_outlined.svg',
                            )
                          : SvgPicture.asset(
                              'assets/svg/checkbox_outlined_blank.svg',
                            ),
                      const SizedBox(width: 10),
                      Text(
                        item.value,
                        style: const TextStyle(
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        );
      }).toList(),
      itemPadding: EdgeInsets.zero,
      value: selectedItems.isEmpty ? null : selectedItems.last,
      validator: (value) {
        if (value == null) {
          return 'Please select gender.';
        }
      },
      onChanged: (value) {},
      selectedItemBuilder: (context) {
        return obsItemSpec.map(
          (item) {
            return Container(
              padding: const EdgeInsets.symmetric(horizontal: 0.0),
              child: Text(
                selectedItems.join(', '),
                style: const TextStyle(
                  fontSize: 14,
                  overflow: TextOverflow.ellipsis,
                ),
                maxLines: 1,
              ),
            );
          },
        ).toList();
      },
    ));
  }

my_store.dart

part 'my_store.g.dart';

class MyStore = _MyStore with _$MyStore;

abstract class _MyStore with Store {

@observable
Observable<List<ItemSpec>?> obsItemSpec = Observable<List<ItemSpec>?>(null);


@action
Future getItemList() async {
 final future = _useCase.getItemList();
    future.then((itemList) {
      obsItemSpec = Observable(itemList.map((list) =>
          ItemSpec(list.name, list.id)).toList());
    });
  }

enter image description here

Tags:

3

Answers


  1. 0

    hi i suggest instead of use

      _my_store.getItemList().then((value) {
     setState(() {});
});

    make function like :

         getStoreData() async {

       await  _my_store.getItemList();
       setState(() {});
    
  }

    then call it inside initState:

      @override
  void initState() {
    super.initState();
    getStoreData();
   
  }

    if you get error like you called setstate before or during build
    do:

      @override
  void initState() {
    super.initState();
       WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
       getStoreData();
    });
}
    Login or Signup to reply.
  2. 0

    SetState() in initState won’t work properly all the time. You can move function _my_store.getItemList().then((value) { setState(() {}); }); to didChangeDependencies() which gets called after full state has been set, or better yet wrap _buildItemDropDown() in futureBuilder and pass _my_store.getItemList() as said future. Until connection done you can display loading indicator of disabled dropdown and after data is received futureBuilder will rebuild to show proper dropdown with received info.

    Login or Signup to reply.
  3. 0

    I think that your then method inside of initState executes before your future.then is done inside of getItemList method because you are not awaiting your future inside it nor returning it. So I suggest something like this:

    @action
Future getItemList() async {
  final itemList = await _useCase.getItemList();
  obsItemSpec = Observable(
      itemList.map((list) => ItemSpec(list.name, list.id)).toList());
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search