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

플러터(Flutter) 프레임워크에서는 다양한 패키지를 활용하여 웹, 앱 등 다양한 형태의 어플리케이션을 개발할 수 있습니다. 그 중에서도 검색 기능이 필요한 경우에는 flutter_typeahead 패키지를 사용하여 빠르고 효율적으로 검색 기능을 구현할 수 있습니다.

하지만 flutter_typeahead는 단순히 검색 결과를 텍스트 형태로 제공하는 것에 그치지 않고, 원하는 데이터에 따라 페이지를 전환하거나 추가 정보를 표시하는 것도 가능합니다. 이번 블로그에서는 flutter_typeahead를 사용하여 음악 검색 결과를 표시하고, 해당 음악에 대한 상세 정보를 보여주는 예제를 소개하겠습니다.

개발환경 설정

먼저 pubspec.yaml 파일에 flutter_typeahead 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_typeahead: ^2.0.1

변경된 의존성을 적용하기 위해 터미널에서 다음 명령어를 실행합니다.

$ flutter pub get

음악 검색 기능 추가

먼저, main.dart 파일에 필요한 라이브러리를 임포트합니다.

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

그리고 검색 기능을 구현할 위젯을 작성합니다.

class MusicSearchWidget extends StatefulWidget {
  @override
  _MusicSearchWidgetState createState() => _MusicSearchWidgetState();
}

class _MusicSearchWidgetState extends State<MusicSearchWidget> {
  List<String> musicList = [
    "Song 1",
    "Song 2",
    "Song 3",
    // ... 추가적인 음악 데이터
  ];

  String selectedMusic = "";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TypeAheadField(
          textFieldConfiguration: TextFieldConfiguration(
            decoration: InputDecoration(
              hintText: '음악을 검색하세요',
            ),
          ),
          suggestionsCallback: (pattern) async {
            return musicList.where((music) =>
                music.toLowerCase().contains(pattern.toLowerCase()));
          },
          itemBuilder: (context, suggestion) {
            return ListTile(
              title: Text(suggestion),
            );
          },
          onSuggestionSelected: (suggestion) {
            setState(() {
              selectedMusic = suggestion;
            });
          },
        ),
        selectedMusic != ""
            ? Text("Selected Music: $selectedMusic")
            : Container(),
      ],
    );
  }
}

위 소스 코드에서 musicList는 검색할 수 있는 음악 데이터 목록을 나타냅니다. selectedMusic 변수는 사용자가 선택한 음악을 저장하는 데 사용됩니다. TypeAheadField 위젯을 통해 검색 기능을 구현하며, suggestionsCallback을 통해 입력된 검색어에 대한 검색 결과를 제공합니다.

위의 코드를 통해 음악 검색 기능이 구현되었습니다.

음악 상세 정보 표시

이제, 검색 결과에서 선택된 음악의 상세 정보를 표시하는 기능을 추가해보겠습니다.

class MusicDetailWidget extends StatelessWidget {
  final String music;

  MusicDetailWidget({required this.music});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(music),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("음악: $music"),
            // 추가적인 음악 상세 정보
          ],
        ),
      ),
    );
  }
}

위의 코드는 선택된 음악의 상세 정보를 표시하는 위젯입니다. MusicDetailWidget 클래스는 music이라는 매개변수를 받아서 음악 제목을 표시하는 위젯입니다.

이제 onSuggestionSelected 콜백에서 MusicDetailWidget로 페이지를 전환하도록 수정해보겠습니다.

onSuggestionSelected: (suggestion) {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => MusicDetailWidget(music: suggestion),
    ),
  );
},

위의 코드를 사용하여 선택된 음악을 MusicDetailWidget로 전달하여 상세 정보를 표시할 수 있습니다.

결론

이제 flutter_typeahead를 사용하여 음악 검색 결과를 표시하고, 선택된 음악의 상세 정보를 표시하는 기능을 구현하는 방법을 알아보았습니다. 이를 통해 원하는 데이터에 따라 다양한 기능을 추가할 수 있으며, 사용자들에게 더 좋은 검색 경험을 제공할 수 있습니다.

더 자세한 내용은 flutter_typeahead 패키지의 공식 문서를 참조하십시오.