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

플러터(Flutter)는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크이다. Flutter_typeahead는 플러터의 검색 기능을 구현하기 위한 패키지 중 하나이다. 이 패키지를 사용하여 검색 결과에 장소 정보를 표시하는 방법에 대해 알아보자.

Flutter_typeahead란?

Flutter_typeahead는 사용자가 입력하는 텍스트에 대해 자동 완성 및 검색 결과를 제공하는 기능을 구현할 수 있는 플러터 패키지이다. 사용자가 텍스트를 입력하면 미리 정의한 데이터 소스에서 일치하는 결과를 자동으로 필터링하여 제공한다.

검색 결과의 장소 정보 표시하기

Flutter_typeahead를 사용하여 검색 결과의 장소 정보를 표시하기 위해서는 먼저 데이터 소스를 지정해야 한다. 예를 들어, Google Places API를 사용하여 장소 정보를 검색하고 그 결과를 Flutter_typeahead로 표시할 수 있다.

import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_webservice/places.dart';

class PlaceSearchPage extends StatefulWidget {
  @override
  _PlaceSearchPageState createState() => _PlaceSearchPageState();
}

class _PlaceSearchPageState extends State<PlaceSearchPage> {
  final TextEditingController _searchController = TextEditingController();
  final GoogleMapsPlaces _places = GoogleMapsPlaces("API_KEY");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Place Search"),
      ),
      body: Column(
        children: [
          TypeAheadField(
            textFieldConfiguration: TextFieldConfiguration(
              controller: _searchController,
              decoration: InputDecoration(
                hintText: "Search",
              ),
            ),
            suggestionsCallback: (pattern) async {
              return await _places.autocomplete(
                pattern,
                types: ["geocode"],
                language: "en",
              );
            },
            itemBuilder: (context, prediction) {
              return ListTile(
                leading: Icon(Icons.location_on),
                title: Text(prediction.description),
              );
            },
            onSuggestionSelected: (prediction) {
              // 선택한 장소의 정보를 표시하는 페이지로 이동
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => PlaceDetailsPage(prediction.placeId),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

class PlaceDetailsPage extends StatefulWidget {
  final String placeId;

  PlaceDetailsPage(this.placeId);

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

class _PlaceDetailsPageState extends State<PlaceDetailsPage> {
  GoogleMapsPlaces _places = GoogleMapsPlaces("API_KEY");
  PlaceDetails _place;

  @override
  void initState() {
    super.initState();
    _getPlaceDetails();
  }

  void _getPlaceDetails() async {
    var result = await _places.getDetailsByPlaceId(widget.placeId);
    if (result.status == "OK") {
      setState(() {
        _place = result.result;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Place Details"),
      ),
      body: _place != null
          ? Column(
              children: [
                ListTile(
                  leading: Icon(Icons.location_on),
                  title: Text(_place.name ?? ""),
                  subtitle: Text(_place.formattedAddress ?? ""),
                ),
                GoogleMap(
                  initialCameraPosition: CameraPosition(
                    target: LatLng(
                      _place.geometry.location.lat,
                      _place.geometry.location.lng,
                    ),
                    zoom: 15,
                  ),
                ),
              ],
            )
          : Center(
              child: CircularProgressIndicator(),
            ),
    );
  }
}

위 예제에서는 GoogleMapsPlaces 패키지를 사용하여 Google Places API에서 장소 정보를 검색하고, Flutter_typeahead를 사용하여 검색 결과를 표시한다. 검색 결과를 선택하면 해당 장소의 상세 정보를 표시하는 페이지로 이동한다. 이 페이지에는 장소의 이름, 주소 및 위치를 표시하고 GoogleMap 위젯을 사용하여 장소의 위치를 지도에 표시한다.

위 코드에서 API_KEY는 Google Places API를 사용하기 위한 인증 키로 대체해야 한다.

결론

위 예제를 참고하여 Flutter_typeahead와 Google Maps Places API를 사용하여 플러터 앱에서 검색 결과의 장소 정보를 표시할 수 있다. 이를 통해 사용자가 원하는 장소를 쉽게 검색하고 표시할 수 있게 된다.

관련 참고 자료: