[Flutter] Widgets(3) - Custom Widget

이전 블로그에서는 함수처럼 적용한 경우였고,

이번에는 조금 복잡한 경우로 클래스로 적용한 경우의 샘플입니다.

드롭다운 메뉴를 화면마다 동일하게 처리할수도 있고, 클래스로 처리하여 중복코드를 제거할 수도 있다.

 

기능적인 차이로, 드롭다운 메뉴를 재사용할 수 없는 경우입니다. 

다음 블로그에서 재사용 가능한 위젯의 샘플을 만들어 보겠습니다.

아래 소스코드는 Getx 컨드롤러에 대한 설명부분은 생략하였습니다.

 

// dropdown_button_controller.dart 
// 언어 설정

class DropdownButtonLangType extends StatelessWidget {
  final DropdownButtonController _dropdownButtonController = Get.put(DropdownButtonController());

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Container(
        height: 60,
        child: InputDecorator(
          decoration: buildInputDecoration(
              label: _dropdownButtonController.multiMsg['strLang'], hintText: ' '),
          child: DropdownButton<String>(
            onChanged: (String? value) {
              print('Language: ' + value.toString());
              _dropdownButtonController.changeLangTypeIndex(value!);
            },
            isExpanded: true,
            underline: SizedBox(),
            value: _dropdownButtonController.langTypeIndex.value,
            //_selectedUserType,
            style: TextStyle(
              fontSize: 15.0,
              color: Colors.black,
            ),
            items: _dropdownButtonController.langType.map((String dropDownStringItem) {
              return DropdownMenuItem<String>(
                value: dropDownStringItem,
                child: Text(dropDownStringItem),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

 

실제 코딩에서는 아래와 같이 적용하였습니다.

 

Padding(
  padding: const EdgeInsets.all(8.0),
  child: DropdownButtonLangType(),
),

 

실제 적용한 샘플 화면입니다.

 

 

 

소스 위치 - GitHub - mike-bskim/sns_login

GitHub - mike-bskim/sns_login