flutter Dropdown button

flutter에서 dropdownbutton 을 만드는 방법에 대해서는 자세하게 나와있는 곳을 찾기가 어렵다.

 

material icon들을 봐도 dropdown button이 안보인다. 그 동안은 pub.dev에서 

https://m2.material.io/components/menus#behavior

Material Design

선생님.. 왜 디자인 방법만 알려주시고 코드를 제공해주시지 않는 겁니까..

 

https://pub.dev/packages/dropdown_button2

dropdown_button2 | Flutter Package

를 사용해서 썼었는데 ..뭔가 패딩이라던지 이런게 iconbutton이랑은 좀 달라서 다른 걸 찾아보기로 했다.

 

dropdown_button2 를 사용한 모습

 

 

결국 찾아냈다.. 그런데 이게 material에 포함 된 code였다.

 

https://betterprogramming.pub/popup-menu-customization-in-flutter-aa8827f6ce39

Popup Menu Customization in Flutter

아무 설정도 하지 않으면 Icons.more_vert 로 지정 되어있고 icon : 로 옵션을 바꿀 수 있다.(완전 좋다.ㅠㅠ)

나오고 들어가는 애니메이션 또한 만족스럽다.

특히나 기존 내장 되어 있는 Widget은 오류가 적어서 믿고 사용할 수 있다는 장점이 있다.

페이지에 설명 나와있는 것처럼 offset 먹이고 shape 에서 round 처리해주면,

완성!

혹시 onSelcted 속성을 만들어줄려면 PopupMenuItem Widget에다가 value를 꼭 지정해주자!

onSelected: (value) {
  return logger.d('seleced value $value');
},

 

PopupMenuItem _buildPopupMenuItem(
    {required String title,
    required IconData? iconData,
    required dynamic value}) {
  return PopupMenuItem(
    value: value,
    child: Row(
      children: [
        if (iconData != null)
          Icon(
            iconData,
          ),
        Text(title),
      ],
    ),
  );
}