TextFormField 내부의 Flutter InputChips

안녕,

공유하고 참조용으로 유지하기 위해 이 튜토리얼을 작성하고 있습니다.
InputChip을 만들어서 TextFormField에 빌드하는 과정은 처음이라 글을 쓰는 게 처음이라 영어로 오타가 있는 점 양해 부탁드립니다.

이 작업에 따라 적절한 종속성을 찾지 못했습니다.
https://pub.dev/ 그래서 많이 찾아봤는데 스택오버플로에도 이것에 대한 글이 별로 없어서 제가 직접 해본 것도 의존성 없이요.

InputChip은 입력에 칩을 빌드하기 위해 Flutter Framework에서 제공하는 클래스입니다. 자세한 내용은 다음과 같습니다.
https://api.flutter.dev/flutter/material/InputChip-class.html/

이제 이것을 구현하려면? 을 따라서:

- InputChip 생성:

InputChips의 생성자로서 위젯으로서 최소한으로 필요한 레이블 속성

InputChip(
    label: Text('InputChips'),
  )

Output:

기본적으로 이러한 칩은 비활성화되어 있습니다. 활성화하려면 onPressed 콜백을 전달해야 합니다(isEnabled를 false로 설정하지 않음). onPressed 콜백을 전달하지 않고 isEnabled를 true로 설정하면 Flutter가 위젯을 비활성화합니다.

InputChip(
    selected: _selected,
    label: Text('ActivatedChip'),
    onPressed: () {
      print('Chip is pressed');

      setState(() {
        _selected = !_selected;
      });
    }
  )

Output:

- InputChip의 아바타:

Avatar Property is used to display before label. It can be an image, an Icon, a CircleAvatar.

InputChip(
    selected: _selected,
    label: Text('Star'),
    avatar: const Icon(Icons.star),
    onPressed: () {
      print('Chip is pressed');

      setState(() {
        _selected = !_selected;
      });
    }
  )

Output:

- InputChip에서 레이블 사용자 지정:

Labet 텍스트는 labelStyle 및 labelPadding 속성을 사용하여 사용자 지정할 수 있습니다.

 InputChip(
    selected: _selected,
    label: Text('italics'),
    labelStyle: TextStyle(color: Colors.black, fontStyle: FontStyle.italic),
    labelPadding: EdgeInsets.all(3.0),
    onPressed: () {
      print('Chip is pressed');

      setState(() {
        _selected = !_selected;
      });
    }
  }

Output:

- InputChip의 기타 속성:

배경색

선택된색상

도구 설명(칩의 longPress에 텍스트 표시)

- InputChip에서 삭제 처리:

삭제를 위해 onPressed 콜백 내부에 전달된 onDeleted 속성으로 삭제할 삭제 아이콘을 inputchip에 제공할 수 있습니다.

  InputChip(
    selected: _selected,
    label: Text('Delete'),
    onPressed: () {
      print('Chip is pressed');

      setState(() {
        _selected = !_selected;
      });
    },
    onDeleted: () {
      print('Chip is deleted');
    },
  )

Output:

Now you Be Like Enough of InputChip Knowledge How to Pass data to make them render inside TextField, don't fret I'll describe and post full code:

- InputChip의 사용자 지정 텍스트:

TextEditingController를 선언합니다.

데이터를 입력하려면 TextField 또는 TextFormField를 제공해야 합니다.

TextFormField 컨트롤러 속성에서 TextEditingController를 호출합니다.

이제 콜백을 사용하여 칩 레이블 내부의 TextEditingController.text로 입력 값을 가져옵니다

.

Output:

- TextFormField 내부에 칩 가져오기:

TextEditingController 콜백에서 칩 값을 보유할 목록을 만듭니다.

그런 다음 목록 값을 변수에 매핑합니다.

TextFormField의 장식 속성 내부에 다른 칩이 생성됩니다.

새 칩 내부의 맵 변수를 이전 칩의 콜백에서 레이블로 사용했습니다.

Voila 🪄

:


GitHub 저장소
코드는 오픈 소스이므로 원하는 경우 여기에서 수행할 수 있습니다.
https://github.com/im-adnan/TextInputChips_Example

이 기사를 읽어 주셔서 감사합니다. 이제 TextFields 내부에 InputChips를 구현하는 방법을 더 잘 이해할 수 있기를 바랍니다. 도움이 되었다면 피드백과 박수를 보내주시면 정말 감사하겠습니다! 👏

Twitter에서 저를 찾을 수 있습니다: @1m_adnan 😊