skip to Main Content
Widget _buildEquipmentCategoriesDropdown() {
  return Column(
    //
    children: [
      Align(
        alignment: Alignment.centerLeft,
        child: RichText(
          text: TextSpan(text: 'Equipment Categories: ', style: Styles.blackBold16, children: [
            TextSpan(
              text: '*',
              style: TextStyle(
                color: ColorsValue.orangeColor,
                fontWeight: FontWeight.bold,
              ),
            ),
          ]),
        ),
      ),
      Dimens.boxHeight5,
      Container(
        padding: EdgeInsets.symmetric(horizontal: 10.0),
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              offset: const Offset(
                5.0,
                5.0,
              ),
              blurRadius: 5.0,
              spreadRadius: 1.0,
            ),
            BoxShadow(
              color: ColorsValue.whiteColor,
              offset: const Offset(0.0, 0.0),
              blurRadius: 0.0,
              spreadRadius: 0.0,
            ),
          ],
          color: ColorsValue.whiteColor,
          borderRadius: BorderRadius.circular(5),
        ),
        child: //
            Obx(
          () => MultiSelectDialogField(
            initialValue:
                //
                controller.selectedEquipmentCategoryList,
            decoration: BoxDecoration(border: Border()),
            buttonIcon: Icon(Icons.arrow_drop_down),
            items: controller.equipmentCategoryList
                .map(
                  (equipmentCategory) => MultiSelectItem(
                    equipmentCategory?.id,
                    equipmentCategory?.name ?? '',
                  ),
                )
                .toList(),
            onConfirm: (selectedOptionsList) => {controller.equipmentCategoriesSelected(selectedOptionsList)},
            chipDisplay: MultiSelectChipDisplay(),
          ),
        ),
      ),
      Dimens.boxHeight20,
    ],
  );
}

Controller:


Future<void> getInventoryCategoryList(String? facilityId) async {
  //// SEE HERE, THE DATA TYPE FOR BOTH THE LIST AND THE INITIAL VALUE IS THE SAME

  equipmentCategoryList.value = <InventoryCategoryModel>[];
  selectedEquipmentCategoryList.value = <InventoryCategoryModel>[];
  selectedEquipmentCategoryNameList.value = <String>[];
  //
  final _equipmentCategoryList = await editJobPresenter.getInventoryCategoryList(
    isLoading: true,
  );
  if (_equipmentCategoryList != null) {
    for (var equimentCategory in _equipmentCategoryList) {
      equipmentCategoryList.add(equimentCategory);
    }
    //selectedEquipmentCategoryList = equipmentCategoryList;
    if (jobDetailsModel.value?.equipmentCatList != null)
      for (var equipCat in jobDetailsModel.value?.equipmentCatList ?? []) {
        InventoryCategoryModel equipmentCategory = InventoryCategoryModel(
          id: equipCat.equipmentCatId,
          name: equipCat.equipmentCatName,
        );

        selectedEquipmentCategoryList.add(equipmentCategory);
        print(selectedEquipmentCategoryList[0]);
        selectedEquipmentCategoryNameList.add(equipmentCategory.name);
      }
  }
}

I want to have certain values pre-filled in the multiselect, the widget just won’t do it.
The data for the list (initial values) comes from an API and then the UI gets updated (using Getx).

6

Answers


  1. The default value of the select element can be set by using the ‘selected’ attribute on the required option. This is a boolean attribute. The option that is having the ‘selected’ attribute will be displayed by default on the dropdown list

    Login or Signup to reply.
  2. When you use a MultiSelectDialogField in Flutter, you can set an initial value that is pre-selected when the dialog opens. To set this initial value, you need to provide a list of items that you want to be selected initially.

    In the given code, the initialValue parameter of the MultiSelectDialogField is set to [controller.selectedEquipmentCategoryList]. This means that the list of selected equipment categories stored in the controller.selectedEquipmentCategoryList variable will be used as the initial value for the dropdown.

    So when the user opens the dropdown, the items in the controller.selectedEquipmentCategoryList will already be selected, and the user can add or remove other items as desired.

    Login or Signup to reply.
  3. I think you are also confusing Rx as an ObserVER vs. ObservABLE. Rx is an observable, i.e. you watch it for changes using Obx or GetX widgets, (I guess you can call these two widgets "Observers".)

    Example

        class Example extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        Controller c = Get.put(Controller());
    
        return Scaffold(
          body: SafeArea(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
             
                    Obx(
                  () => MultiSelectDialogField(
                    initialValue: 
                        //
                        c.selectedEquipmentCategoryList,
                    decoration: BoxDecoration(border: Border()),
                    buttonIcon: Icon(Icons.arrow_drop_down),
                    items: c.equipmentCategoryList
                        .map(
                          (equipmentCategory) => MultiSelectItem(
                            equipmentCategory?.id,
                            equipmentCategory?.name ?? '',
                          ),
                        )
                        .toList(),
                    onConfirm: (selectedOptionsList) =>
                    c.update_selected(selectedOptionsList),
                      
                    chipDisplay: MultiSelectChipDisplay(),
                  ),
                ),
              
                  
                ],
              ),
            ),
          ),
        );
      }
    }
    
    class Controller extends GetxController {
     List equipmentCategoryList= [].obs
    List selectedEquipmentCategoryList = [].obs;
      void update_selected(List selectedOptionsList) =>'your code (update equipmentCategoryList)';
    }
    
    Login or Signup to reply.
  4. Hi i hope below answer will help you. you should use GetBuilder instead of Obx and you must initialize controller call Api using load controller.
    in this example, i am ignoring your predefined decoration variable and colors,

    import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    import 'package:multi_select_flutter/multi_select_flutter.dart';
    
    import 'MultipleController.dart';
    
    class buldMultiFormUsingApi extends StatefulWidget {
      const buldMultiFormUsingApi({Key? key}) : super(key: key);
    
      @override
      State<buldMultiFormUsingApi> createState() => _buldMultiFormUsingApiState();
    }
    
    class _buldMultiFormUsingApiState extends State<buldMultiFormUsingApi> {
      final Controller controller = Get.put(Controller());
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        controller.loadequipment();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: Column(//
                children: [
              Align(
                alignment: Alignment.centerLeft,
                child: RichText(
                  text: TextSpan(text: 'Equipment Categories: ', children: [
                    TextSpan(
                      text: '*',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ]),
                ),
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 10.0),
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.white,
                      offset: const Offset(
                        5.0,
                        5.0,
                      ),
                      blurRadius: 5.0,
                      spreadRadius: 1.0,
                    ),
                    BoxShadow(
                      offset: const Offset(0.0, 0.0),
                      blurRadius: 0.0,
                      spreadRadius: 0.0,
                    ),
                  ],
                  borderRadius: BorderRadius.circular(5),
                ),
                child: //
                    GetBuilder<Controller>(builder: (controller) {
                  return MultiSelectDialogField(
                    initialValue: controller.selectedEquipmentCategoryList,
                    decoration: BoxDecoration(border: Border()),
                    buttonIcon: Icon(Icons.arrow_drop_down),
                    items: controller.equipmentCategoryList
                        .map(
                          (equipmentCategory) => MultiSelectItem(
                            equipmentCategory?.id,
                            equipmentCategory?.name ?? '',
                          ),
                        )
                        .toList(),
                    onConfirm: (selectedOptionsList) {
                 // write code on your selected equipment
                    },
                    chipDisplay: MultiSelectChipDisplay(),
                  );
                }),
              ),
            ]),
          ),
        );
      }
    }
    

    Controller code is below

    import 'package:get/get.dart';
    
    class Controller extends GetxController {
      List equipmentCategoryList = [].obs;
      List selectedEquipmentCategoryList = [].obs;
    
      Future loadequipment() async {
        // here ApiRequest.getequipmentCategory() call api to load equipment category
    equipmentCategoryList=await ApiRequest.loadEquipment();
    
    update();
    
      }
    }
    

    if you want equipment category should load first, you dont want to show empty list then call controller.loadequipment(); it on splash screen or home screen.

    Login or Signup to reply.
  5. your init(selected) List and List from APi maybe the same values but they have different InventoryCategoryModel object instances so that can possibly be causing the problem with the ==(equality) check of the InventoryCategoryModel model.

    class InventoryCategoryModel {
          final String id;
          final String name;
          InventoryCategoryModel({
            required this.id,
            required this.name,
          });
        
          @override
          bool operator ==(Object other) {
            if (identical(this, other)) return true;
        
            return other is InventoryCategoryModel && other.id == id;
          }
        }
    

    try to adding this override for == operator in your model.

    Login or Signup to reply.
  6. Try this,

    Obx(
      () => MultiSelectDialogField(
        initialValue:
          controller.selectedEquipmentCategoryList
              .map((e) => e.id)  // Extract the IDs from the list of InventoryCategoryModel objects
              .toList(),
        decoration: BoxDecoration(border: Border()),
        buttonIcon: Icon(Icons.arrow_drop_down),
        items: controller.equipmentCategoryList
            .map(
              (equipmentCategory) => MultiSelectItem(
                equipmentCategory.id,
                equipmentCategory.name ?? '',
              ),
            )
            .toList(),
        onConfirm: (selectedOptionsList) => {controller.equipmentCategoriesSelected(selectedOptionsList)},
        chipDisplay: MultiSelectChipDisplay(),
      ),
    ),
    

    here I am passing " InventoryCategoryModel" items in initial values,its work

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search