[Flutter] Autocomplete 문서화

김영진·2021년 8월 23일
1

Flutter 예제

목록 보기
3/3

목적

회사에서 축구경기에 관한 데이터를 엑셀로 받고 있는데, 수천건의 데이터를 데이터베이스에 직접 넣다보니 운영 공수가 너무 큰 상황이었다.
엑셀에 데이터를 넣는 알바분들에게 DB로 post할수있는 웹 관리자페이지를 제공드리기 위해서 Flutter 2.0 부터 추가된 Autocomplete위젯을 사용하였다.
위젯을 사용하는건 문제없지만 Post후 Autocomplete Field를 초기화 해주고 싶었는데 컨트롤러를 파라미터로 따로 받지 않았다.
따라서 위젯을 제어할수 있는 방법을 찾기 위해서 위젯 내부를 들여다보고 문서화 한다.

내용

소스코드

Autocomplete<String>(
	optionsBuilder: (TextEditingValue textEditingValue) {
    if (textEditingValue.text == '') {
    	return const Iterable<String>.empty();
    }
    return _kTeamNames.where((String option) {
	    return option.contains(textEditingValue.text);});
    },
    onSelected: (String selection) {
    	print('You select $selection');
    	homeTeamName.text = selection;
    	print('homeTeamName is ${homeTeamName.text}');
    },
    fieldViewBuilder: (context, controller,focusNode, onSubmit) {
	homeTeamName = controller;
        return TextFormField(controller: controller,focusNode: focusNode);
    },
),

Autocomplete는 내부적으로 TextFormField를 사용한다.

static Widget _defaultFieldViewBuilder(BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
    return _AutocompleteField(
      focusNode: focusNode,
      textEditingController: textEditingController,
      onFieldSubmitted: onFieldSubmitted,
    );
  }

TextFormField가 구현되는 부분

fieldViewBuilder: (context, controller,focusNode, onSubmit) {
// 콜백함수에서 컨트롤러를 받아서 미리 선언해둔 컨트롤러에 주입
	homeTeamName = controller;
        return TextFormField(controller: controller,focusNode: focusNode);
    },

컨트롤러 제어

homeTeamName.clear();

결론

컨트롤러를 파라미터로 받지 않아 당황했는데 잘 해결되서 다행이다.

profile
2021.05.03) Flutter, BlockChain, Sports, StartUp

0개의 댓글