Flutter 공통위젯으로 사용 할 콤보박스(comboBox) 위젯 만들기

flutter 에서 아래의 그림과 같이 동일한 스타일의 콤보박스를 사용하기 위해 전역적인 콤보박스를 만들어주려고한다. 

 

 

CommonCombo.dart

공통으로 쓰일 Widget들을 모아 놓는 file 에서 아래와 같이 작성 해 준다. 

Widget comboBox({required RxList<String> comboList, required RxString selectedData, required Function(String value) onSearchClick}){
  return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
            width:130,
            height: 40,
            color:  CommonColor.bgDarkMode,
            child: Obx(() =>  DropdownButtonHideUnderline(
              child: ButtonTheme(
                child: DropdownButton<String>(
                  dropdownColor: CommonColor.bgDarkMode,
                  isExpanded: true,
                  value: selectedData.value,
                  items: comboList.map((String value){
                    return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value,  overflow: TextOverflow.ellipsis, textAlign: TextAlign.center, style: TextStyle(
                          color: CommonColor.white ,
                          fontSize: 12,
                        )),
                    );
                  }).toList(),
                  onChanged: (value){
                    selectedData.value = value!;
                  },
                ),
              ),
            ))
        ),
      ]
  );
}

 

파라미터로 comboList와 comboList중 선택 된 String과 해당 String 를 클릭하면 작동 할 함수를 받는다. 

 

page.dart

comboBox(
   comboList: controller.dropdownList,
   selectedData: controller.selectedDropdown,
   onSearchClick: (value) {}
   )

 

controller.dart

  var dropdownList = [
    '국민은행 402402-04-136',
    '신한은행 402402-04-136',
    '하나은행 402402-04-136'
  ].obs;
  
  var selectedDropdown = '국민은행 402402-04-136'.obs;

 

이렇게 controller에 필요한 값들을 GetX로 감싸서 만들어 주고 page 에서 controller로 값들을 불러와서 사용한다. 값이 바뀔 때 마다 페이지를 다시 그려야 하기 때문에 obs를 적용 해 준 것이다.