[flutter] searchable dropdown (=selectbox) Example (+used to key issue)

adbr·2020년 4월 14일
1

Flutter Library

목록 보기
1/4

Flutter Package

https://pub.dev/packages/searchable_dropdown#Single-menu

data Code

List<DropdownMenuItem> _serviceItems = [];
String selectedServiceVal;
  

void initState() {
  super.initState();
  ...
  setState(() {
      _serviceItems = [];
      _serviceItems.add(DropdownMenuItem(
        key: Key("1"),
        child: Text("test"),
        value: "test",
      ));
      _serviceItems.add(DropdownMenuItem(
        key: Key("2"),
        child: Text("test1 - A"),
        value: "test1",
      ));
      _serviceItems.add(DropdownMenuItem(
        key: Key("3"),
        child: Text("test1 - B"),
        value: "test1",
      ));
      _serviceItems.add(DropdownMenuItem(
        key: Key("4"),
        child: Text("test3"),
        value: "test3",
      ));
    });
  ...
}

Widget Code

Widget bodyTemp() {
    return SearchableDropdown.single(
      items: _customerItems,
      value: selectedCustomerVal,
      hint: "hint message.",
      searchHint: null,
      onChanged: (value) async {
        print(value);
        if (value == "") {
          await _asyncInputDialog(context);
          value = _newCustomer;
        }
        setState(() {
          selectedCustomerVal = value;
          _subjectTextController.text =
              '${selectedServiceVal ?? ''} - ${selectedCustomerVal ?? ''}';
        });
      },
      dialogBox: false,
      isExpanded: true,
      menuConstraints: BoxConstraints.tight(Size.fromHeight(350)),
    );
  }

issue

  • value를 통해 검색가능함
    (그래서 보여지는 child 또한 value와 동일하게 가야됨)

  • widget그릴 때 value속성으로 찾기 때문에 value가 동일 할 경우
    무조건 순서 상 위에있는 요소가 선택되었다고 나옴.

Solution1 : used to key

SearchableDropdown.single(
      key: Key(selectedServiceKey),
      items: _serviceItems,
      value: selectedServiceVal,
      ...
      onChanged: (value) async {
        print(value);
        if (value == "") {
          await _asyncInputDialog(context);
          value = _newCustomer;
        }
        setState(() {
          selectedServiceKey = key;
          selectedServiceVal = value;
          _subjectTextController.text =
              '${selectedServiceVal ?? ''} - ${selectedServiceVal ?? ''}';
        });
      },
      ...
);

fail :(

selectedServiceKey = key;가 안됨.
onChange: (val){} 밖에 없음... 2번째 인자로 보내주는 요소 없음

  • 어떻게 하는지 아시는 분 알려주세요..ㅠㅠ
profile
𝙸 𝚊𝚖 𝚊 𝚌𝚞𝚛𝚒𝚘𝚞𝚜 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚠𝚑𝚘 𝚎𝚗𝚓𝚘𝚢𝚜 𝚍𝚎𝚏𝚒𝚗𝚒𝚗𝚐 𝚊 𝚙𝚛𝚘𝚋𝚕𝚎𝚖. 🇰🇷👩🏻‍💻

0개의 댓글