[flutter] 플러터 Flutter_typeahead에서 검색 결과의 연락처 정보 표시하기

플러터(Flutter)는 구글에서 개발한 모바일 애플리케이션 개발 프레임워크로, 효율적이고 강력한 기능을 제공합니다. Flutter_typeahead는 플러터에서 사용자가 입력하는 동안 자동 완성 기능을 제공하는 패키지 중 하나입니다. 이번에는 Flutter_typeahead를 사용하여 검색 결과에 연락처 정보를 표시하는 방법에 대해 알아보겠습니다.

1. Flutter_typeahead 패키지 설치하기

Flutter_typeahead 패키지를 사용하기 위해서는 pubspec.yaml 파일에 아래와 같이 의존성을 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_typeahead: ^1.8.8

의존성을 추가한 후, 패키지를 설치하기 위해 터미널에서 flutter pub get 명령을 실행합니다.

2. 연락처 정보를 담는 모델 생성하기

검색 결과로 표시할 연락처 정보를 담는 모델을 생성합니다. 이 예제에서는 연락처의 이름과 전화번호를 담기 위해 Contact 클래스를 생성합니다.

class Contact {
  final String name;
  final String phoneNumber;

  Contact({required this.name, required this.phoneNumber});
}

3. 검색 결과에 따라 연락처 목록 표시하기

검색 결과에 따라 연락처 목록을 화면에 표시하기 위해 FlutterTypeAhead 위젯을 사용합니다. 아래의 예제 코드를 참고하여 화면에 연락처 목록을 표시해보세요.

import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';

class ContactsPage extends StatelessWidget {
  final List<Contact> contacts = [
    Contact(name: 'John Doe', phoneNumber: '123-4567-8901'),
    Contact(name: 'Jane Smith', phoneNumber: '234-5678-9012'),
    Contact(name: 'Michael Johnson', phoneNumber: '345-6789-0123'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contacts'),
      ),
      body: Column(
        children: [
          SizedBox(height: 20),
          FlutterTypeAhead(
            itemBuilder: (BuildContext context, Contact contact) {
              return ListTile(
                title: Text(contact.name),
                subtitle: Text(contact.phoneNumber),
              );
            },
            suggestionsCallback: (pattern) async {
              return contacts.where((contact) => contact.name.toLowerCase().contains(pattern.toLowerCase()));
            },
            onSuggestionSelected: (Contact contact) {
              // 선택된 연락처에 대한 작업을 수행하는 코드 작성
            },
          ),
        ],
      ),
    );
  }
}

위 예제 코드에서 FlutterTypeAhead 위젯의 itemBuilder 콜백 함수에서는 검색 결과로 받은 각 연락처 정보를 ListTile 위젯으로 표현합니다. 검색어에 따라 필터링 된 연락처 목록은 suggestionsCallback 콜백 함수에서 반환합니다. 선택된 연락처에 대한 작업은 onSuggestionSelected 콜백 함수에서 처리할 수 있습니다.

이제 ContactsPage 위젯을 MaterialApp 안에서 호출하면 검색 결과에 따라 연락처 목록을 표시하는 페이지를 사용할 수 있습니다.

마무리

위에서는 플러터의 Flutter_typeahead 패키지를 사용하여 검색 결과에 따라 연락처 정보를 표시하는 방법에 대해 알아보았습니다. Flutter_typeahead는 자동 완성 기능을 구현할 때 유용하게 사용할 수 있는 패키지 중 하나입니다.