[flutter] 플러터 Flutter_typeahead에서 검색 결과를 그리드로 표시하는 방법은?

플러터(Flutter) 프레임워크의 Flutter_typeahead 패키지를 사용하면 사용자 입력에 따라 자동 완성 기능을 제공할 수 있습니다. 이 패키지를 사용하여 검색 결과를 그리드로 표시하는 방법에 대해 알아보겠습니다.

  1. 먼저 Flutter_typeahead 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 추가합니다:
dependencies:
  flutter_typeahead: ^1.10.0
  1. 이제 main.dart 파일에서 필요한 패키지를 임포트 해야합니다:
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
  1. main.dart 파일에 main() 함수 외부에 다음과 같은 MyApp 클래스를 선언합니다:
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TypeAhead Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TypeAheadWidget(),
    );
  }
}
  1. MyApp 클래스 내부에 TypeAheadWidget 클래스를 생성합니다. 이 클래스는 StatefulWidget를 상속받아야합니다:
class TypeAheadWidget extends StatefulWidget {
  @override
  _TypeAheadWidgetState createState() => _TypeAheadWidgetState();
}
  1. TypeAheadWidget 클래스 내부에 _TypeAheadWidgetState 클래스를 생성합니다. 이 클래스는 State를 상속받아야합니다:
class _TypeAheadWidgetState extends State<TypeAheadWidget> {
  final List<String> suggestions = [
    'Apple',
    'Banana',
    'Cherry',
    'Durian',
    'Elderberry',
    'Fig',
    'Grape',
    'Honeydew',
    'Jackfruit',
    'Kiwi',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TypeAhead Demo'),
      ),
      body: TypeAheadField(
        textFieldConfiguration: TextFieldConfiguration(
          autofocus: true,
          decoration: InputDecoration(
            hintText: 'Search',
          ),
        ),
        suggestionsCallback: (pattern) {
          return _getSuggestions(pattern);
        },
        itemBuilder: (context, suggestion) {
          return ListTile(
            title: Text(suggestion),
          );
        },
        onSuggestionSelected: (suggestion) {
          // 선택한 검색어로 뭔가 작업을 수행합니다.
        },
      ),
    );
  }
  
  List<String> _getSuggestions(String query) {
    List<String> matches = List();
    matches.addAll(suggestions);

    matches.retainWhere((suggestion) => suggestion.toLowerCase().startsWith(query.toLowerCase()));
    
    return matches;
  }
}
  1. 이제 앱을 실행하고 검색 필드에 입력하면 자동 완성 기능이 동작합니다. 현재 구현된 코드는 검색 결과를 리스트 형태로 표시하는 기능입니다.

  2. 검색 결과를 그리드로 표시하려면 itemBuilder 메소드를 조금 수정해야 합니다. 다음의 코드를 itemBuilder 메소드에 대체합니다:

itemBuilder: (context, suggestion) {
  return GridTile(
    child: Card(
      child: InkWell(
        onTap: () {
          // 선택한 검색어로 뭔가 작업을 수행합니다.
        },
        child: Center(
          child: Text(suggestion),
        ),
      ),
    ),
  );
},
  1. 앱을 다시 실행하고 검색 필드에 입력하면 자동 완성 기능이 작동하며, 검색 결과가 그리드 형태로 표시됩니다.

이제 플러터(Flutter) Flutter_typeahead 패키지를 사용하여 검색 결과를 그리드로 표시하는 방법을 알게되었습니다. 필요에 따라 코드를 수정하여 원하는 대로 UI를 조정할 수 있습니다.

참조: