[flutter] 플러터 Flutter_typeahead에서 검색 결과를 다른 화면으로 이동하는 기능 추가하기

플러터는 개발자들이 모바일 애플리케이션을 빠르게 개발할 수 있는 크로스 플랫폼 프레임워크입니다. Flutter_typeahead는 플러터에서 자동 완성 기능을 제공하는 패키지 중 하나입니다. 이 패키지를 사용하여 사용자가 검색을 할 때 검색 결과를 다른 화면으로 이동하는 기능을 추가하고자 합니다.

설정

먼저, flutter_typeahead 패키지를 사용하기 위해 pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter_typeahead: ^3.2.1

의존성을 추가한 후, 패키지를 가져올 수 있도록 import 문을 추가합니다:

import 'package:flutter_typeahead/flutter_typeahead.dart';

검색 결과를 다른 화면으로 이동하기

검색 결과를 다른 화면으로 이동하기 위해 다음의 단계를 따릅니다:

  1. 검색 결과 페이지를 생성합니다. 예를 들어, SearchResultPage라는 새로운 StatelessWidget을 만듭니다.
  2. 검색 결과 페이지에서 필요한 매개변수를 받을 수 있는 생성자를 정의합니다.
  3. flutter_typeahead 위젯을 사용해 검색 창을 화면에 추가합니다. 이 때, onSuggestionSelected 콜백을 사용하여 검색 결과가 선택되었을 때 새로운 페이지로 이동하도록 합니다.
  4. onSuggestionSelected 콜백에서 새로운 페이지로 이동하는 코드를 작성합니다.

다음은 검색 결과를 다른 화면으로 이동하기 위한 예제 코드입니다:

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: TypeAheadField(
          suggestionsCallback: (pattern) async {
            // 여기서 검색 결과를 가져오는 작업을 수행합니다.
            return searchResults;
          },
          itemBuilder: (context, suggestion) {
            return ListTile(
              title: Text(suggestion),
            );
          },
          onSuggestionSelected: (suggestion) {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SearchResultPage(query: suggestion),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SearchResultPage extends StatelessWidget {
  final String query;

  SearchResultPage({required this.query});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Result'),
      ),
      body: Container(
        child: Center(
          child: Text('Showing results for: $query'),
        ),
      ),
    );
  }
}

위의 예제 코드에서는 SearchScreen 위젯에서 TypeAheadField 위젯을 사용하여 검색 창을 만들고, 검색 결과를 받아오는 비동기 함수를 지정합니다. 그리고 onSuggestionSelected 콜백에서 검색 결과가 선택되었을 때 SearchResultPage로 이동하도록 합니다. SearchResultPage는 검색어(query)를 인자로 받아 결과를 표시하는 페이지입니다.

위의 코드를 참고하여 플러터 앱에서 검색 결과를 다른 화면으로 이동하는 기능을 추가해보세요!

참고 자료