온라인 검색 가능한 드롭다운 Flutter 위젯을 구축하는 방법

온라인 검색 가능한 드롭다운 Flutter 위젯을 구축하는 방법

 

Flutter에서 온라인-오프라인 데이터로 사용자 정의 가능한 드롭다운 구현

Unsplash에 있는 Szabo Viktor의 사진

Flutter에는 드롭다운 검색 기능을 제공하는 몇 가지 위젯이 있지만 내가 진정으로 놀라운 것은 다음과 같습니다.

DropdownSearch<>

이 위젯은 다음을 허용합니다.

1. 항목의 드롭다운 목록을 만듭니다.
2. 제공된 데이터를 검색합니다(완전한 검색 기능과 불완전한 검색 기능 모두).
3. 데이터는 코드에서 작성한 오프라인 목록이거나 API 요청을 통해 가져올 수 있는 온라인 데이터일 수 있습니다.
4. 사용자 정의 가능한 팝업 빌더. 팝업 데이터 목록의 텍스트, 스타일 및 장식.
5. 사용자 정의 가능한 드롭다운 항목 빌더. 팝업 드롭다운 목록의 텍스트, 스타일 및 장식.

첫 번째 단계로 위젯 클래스를 종속성 목록에 포함합니다. pubspec.yml Flutter 프로젝트의 파일입니다.

pubspec.yamldependencies:
dropdown_search:

이 위젯은 망치와 같은 도구이므로 어떤 상황에서 이 도구를 사용해야 하는지 알아야 합니다.

사례 1

1. 검색 가능한 드롭다운을 구현하려고 하며 데이터가 오프라인으로 생성되고 있습니다.
2. 오프라인은 API 호출 없이 코드 내에서 데이터가 생성되고 있음을 의미합니다.

사례 2

1. 검색 가능한 드롭다운을 구현하려고 하며 데이터를 온라인으로 가져오는 중입니다.
2. 온라인은 HTTP 요청을 통해 API에서 데이터를 가져오고 있음을 의미합니다.
3. 온라인 필터링을 원하지 않습니다.
4. 당신은 함께 일하고 있습니다 FutureBuilder 그리고 미래 변수를 드롭다운 검색 위젯에 전달하려고 합니다.

사례 3

1. 검색 가능한 드롭다운을 구현하려고 하며 데이터를 온라인으로 가져오는 중입니다.
2. 키워드 검색을 지원하는 온라인 필터링을 원합니다.
3. 이제 온라인 필터링이 활성화되어 이 위젯과 연결하려는 API 요청이 있습니다.

이 튜토리얼에서는 사례 3을 설명합니다. 이것은 가장 복잡한 경우입니다. 다음 튜토리얼에서는 사례 1과 2도 설명하겠습니다.

생성될 UI

스냅샷은 내 개인 프로젝트에서 가져온 것입니다. 검색 막대가 목록 위에 어떻게 나타나는지와 전체 위젯의 스타일을 지정할 수 있는 방법을 볼 수 있습니다. 이것이 우리가 위젯을 사용하는 동기입니다.

필터를 사용하여 온라인 검색을 생성할 수 있는 위젯 코드는 다음과 같습니다.

1. DropdownSearch : Class 이다 Class 드롭다운에 포함할 목록 항목의 유형입니다. 사용자 정의를 만들 수 있습니다 Class 코드에서 또는 목록에 이미 Dart에서 사용할 수 있는 클래스 유형(예: String, int 또는 bool)이 있는 경우 대신에 작성할 수 있습니다. Class . 어떤 유형의 항목을 포함할 것인지 미리 결정해야 하기 때문에 이것은 매우 중요합니다. 동일한 유형의 항목이 반환됩니다. getData() 방법 onFind 매개변수. 같은 클래스의 객체가 다음과 같이 주어집니다. onChanged() 방법.
2. mode : 위젯을 눌렀을 때 생성하고자 하는 팝업의 종류를 나타냅니다. 세 가지 옵션 중에서 선택할 수 있습니다. MENU, DIALOG 또는 BOTTOMSHEET .
3. showSearchBox : 검색 기능을 원하면 true여야 합니다.
4. isFilteredOnline: 온라인 데이터에 필터를 적용하려면 true여야 합니다. 즉, 검색 상자에 작성하는 모든 내용이 온라인 API로 전송되어 그에 따라 데이터를 가져옵니다. 이 필드는 다음과 연결되어 있습니다. onFind 이 자습서의 뒷부분에서 설명합니다.
5. dropDownButton: UI 스냅샷을 보면 오른쪽에 작은 화살촉이 아래를 향하고 있는 것을 볼 수 있습니다. 이는 목록을 확장할 수 있음을 나타냅니다. 아이콘 위젯이 이 필드에 제공됩니다. 여기에 아무 아이콘이나 넣을 수 있지만 아이콘이어야 합니다.
6. dropdownSearchDecoration: 드롭다운 위젯의 스타일을 지정하는 필드입니다. 이 필드로 인해 건물 아이콘이 있고 Search/University Store가 쓰여진 가로 직사각형 상자입니다. 이 필드는 InputDecoration 수업 . 입력 데코레이션 클래스가 무엇이며 그 속성이 무엇인지는 Flutter의 InputDecoration 문서에서 연구할 수 있습니다.
7. dropdownBuilder: 드롭다운에서 선택한 항목이 표시된 후 드롭다운이 표시되는 방식을 제어합니다. 나는 사용했다 ListTile 텍스트를 표시합니다. 그만큼 _customDropDownPrograms 다음과 같이 구현됩니다.

여기서, item 목록에서 선택한 개체이고 필드는 선택한 개체를 알고 있으므로 다음을 반환하는 메서드를 사용합니다. ListTile . 만약에 item null이 아닌 경우(선택된 개체) 선택한 것을 사용합니다. item 그리고 걸립니다 title 그것으로부터 속성. 그만큼 item 다음은 클래스의 사용자 정의 구현 클래스 개체입니다. BootCampDetails. 여기에 넣을 클래스와 속성을 만들 수 있습니다. 다음과 같은 경우 "검색 프로그램"이 표시됩니다. item null입니다(아무것도 선택되지 않음).

8. popupItemBuilder: 이 필드는 팝업 드롭다운에 표시되는 항목의 스타일을 제어합니다. 텍스트, 색상 길이 및 크기를 변경하거나 선행 아이콘을 추가할 수도 있습니다. 이러한 모든 속성은 ListTile 위젯. 모든 항목 제목 등에 설명 자막을 추가할 수도 있습니다. ListTitle에 대한 Flutter 문서에서 이 위젯에 대해 자세히 알아보세요. 그만큼 _customPopupItemBuilder 다음과 같이 구현됩니다.

isSelected 여기에서는 쓸모가 없습니다. 대부분의 경우에 사용되지 않는 사전 선택에 사용되지만 함수 매개 변수에 넣어야 합니다.

9. onFind: 여기에 데이터가 주어지기 때문에 가장 중요한 방법입니다. 그만큼 onFindg우리가 사용할 수 있는 문자열 유형 필터를 제공합니다. 필터는 단일 문자를 입력하고 검색 상자에 입력한 내용을 저장합니다. onFind 트리거됩니다. 그러면 필터를 사용할 수 있게 됩니다. 나는 필터를 인수로 전달했습니다. getData() 필터 문자열을 사용하여 API에 온라인 요청을 합니다. 반환하는 유사한 메서드를 구현해야 합니다. Future List. 이것은 매우 중요하기 때문에 onFind 미래의 목록 유형 개체가 필요하며 다른 것은 필요하지 않습니다. getData() 다음과 같이 구현됩니다.

10행은 필터를 키에 대한 값으로 설정하는 곳입니다. searchText. 이것은 요청의 본문으로 전송됩니다. 이것은 데이터를 가져오는 데 사용하는 특정 API에 따른 것입니다. 그 후, detailList 로 변환됩니다 List 그리고 돌아왔다. 이 메서드는 검색 상자에 무언가를 쓸 때마다 데이터를 가져옵니다. 따라서 실시간 데이터 가져오기를 제공합니다.

10. onChanged: 두 번째로 중요한 파라미터는 이것입니다. 드롭다운에서 항목을 선택하면 이 매개변수에 작성된 코드가 실행됩니다. 그만큼 onChanged 필드는 우리에게 선택된 Object. 이 개체로 원하는 모든 작업을 수행할 수 있습니다. 저장하고 다른 곳에 사용할 수도 있습니다. setState() 코드 내 어디에서나 호출할 수 있습니다. 내 특정 요구 사항을 충족하기 위해 여기에서 호출했습니다. 또한 전화하는 것이 일반적입니다. setState 선택한 개체를 저장하고 UI의 어딘가에 표시할 수 있기 때문입니다.

showClearButton : true인 경우 선택한 개체의 오른쪽에 작은 지우기 버튼이 표시됩니다. 위젯을 지우고 무언가를 다시 선택하는 데 사용됩니다.

UI 스냅샷:

동적 데이터 가져오기로 검색

customdropdownbuilder는 선택한 데이터 개체의 스타일을 지정합니다.

Flutter에서 사용되는 위젯에 대한 또 다른 자세한 튜토리얼을 작성하겠습니다.

Want to Connect?Hit me up on LinkedIn.