[flutter] 플러터 Flutter_typeahead에서 사용자 입력값에 따라 검색 결과를 동적으로 업데이트하기

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 앱을 개발할 수 있습니다. Flutter_typeahead는 플러터에서 자동 완성 기능을 구현하기 위한 패키지입니다. 이를 이용하여 사용자의 입력값에 따라 실시간으로 검색 결과를 업데이트할 수 있습니다.

Flutter_typeahead 패키지 설치

먼저, Flutter 프로젝트에 flutter_typeahead 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_typeahead: ^1.8.8

의존성을 추가한 후, flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

Flutter_typeahead 사용하기

간단한 예시를 통해 Flutter_typeahead를 사용하는 방법을 알아보겠습니다. 아래 코드는 main.dart 파일에 작성됩니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Typeahead Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _typeAheadController = TextEditingController();
  List<String> _suggestions = [
    'Apple',
    'Banana',
    'Cherry',
    'Durian',
    'Elderberry',
    'Fig',
    'Grapefruit',
    'Honeydew melon',
    'Imbe',
    'Jackfruit',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Typeahead Demo'),
      ),
      body: Container(
        margin: EdgeInsets.all(20.0),
        child: TypeAheadField(
          textFieldConfiguration: TextFieldConfiguration(
            controller: _typeAheadController,
            decoration: InputDecoration(
              hintText: 'Search',
            ),
          ),
          suggestionsCallback: (pattern) async {
            return await getSuggestions(pattern);
          },
          itemBuilder: (context, suggestion) {
            return ListTile(
              title: Text(suggestion),
            );
          },
          onSuggestionSelected: (suggestion) {
            _typeAheadController.text = suggestion;
          },
        ),
      ),
    );
  }

  Future<List<String>> getSuggestions(String pattern) async {
    // 사용자 입력값에 따라 검색 결과를 동적으로 업데이트하는 로직을 구현합니다.
    pattern = pattern.toLowerCase();
    return _suggestions.where((suggestion) => suggestion.toLowerCase().startsWith(pattern)).toList();
  }
}

위 예제에서는 TypeAheadField 위젯을 사용하여 자동 완성 기능을 구현합니다. suggestionsCallback 콜백 함수를 통해 사용자의 입력값에 따라 검색 결과를 동적으로 업데이트하고, itemBuilder 콜백 함수를 통해 검색 결과를 화면에 표시합니다.

이제 앱을 실행하고, 검색 창에 입력하면 입력값에 따라 실시간으로 검색 결과가 동적으로 업데이트되는 것을 확인할 수 있습니다.

마무리

플러터 Flutter_typeahead를 사용하여 자동 완성 기능을 구현하면 사용자가 편리하게 검색할 수 있습니다. 이를 활용하여 앱의 사용성을 높일 수 있습니다.

더 자세한 내용은 아래 참고 자료를 확인하시기 바랍니다.

참고 자료