Как создать простой поиск адресов карт Google с автозаполнением во флаттере и получить широту и долготу?

Question

Я новичок во Flutter и пытаюсь создать простое приложение Google Maps. Я уже внедрил Google Maps в приложение, и оно работает отлично.

Но теперь я хочу добавить автозаполнение карт Google, и я не могу найти простой учебник или пример, который сфокусирован на нем.

У меня есть TextField, и я хочу показать места и адреса под ним в зависимости от того, что пользователь вводит.

После показа результатов мне нужно получить его широту и долготу, чтобы отметить их на карте. Код ниже представляет мой BottomSheet, который содержит мой TexField, и после некоторого письменного текста необходимо реализовать какой-то список под ним.

void _settingModalBottomSheet(context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;

    showModalBottomSheet(
      context: context,
      builder: (builder) {
        return Container(
          padding: EdgeInsets.only(top: statusBarHeight),
          color: Colors.transparent,
          child: Container(
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.only(
                topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
                    child: Container(
                      height: 50.0,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        color: Colors.white
                      ),
                      child: TextField(
                        textInputAction: TextInputAction.search,
                        decoration: InputDecoration(
                          hintText: "Para onde vamos?",
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.only(left: 15.0, top: 15.0),
                          suffixIcon: IconButton(
                            icon: Icon(Icons.search),
                            onPressed: searchAndNavigate,
                            iconSize: 30.0,
                          )
                        ),
                        onChanged: (val) {
                          setState(() {
                            searchAddr = val;
                          }
                        );
                      },
                      onSubmitted: (term) {
                        searchAndNavigate();
                      },
                    ),
                  ),
                ),
              ],
            )
          ),
        );
      }
    );
  }

Answer 1

Вы можете использовать flutter_google_places плагин, который показывает места в списке автозаполнения по мере его ввода, а также возвращает лат и долготу выбранного места / адреса.

===== рабочий код =======

1. Добавьте плагин flutter_google_places и импортируйте его в файл дротика.
2. Добавьте плагин geo_coder и импортируйте его в тот же файл дротика. (Требуется для доступа к сервисам геокодирования)
3. Создайте ключ API Google для вашего проекта.

main.dart:

void main() => runApp(MyApp());

const kGoogleApiKey = "Api_key";

GoogleMapsPlaces _places = GoogleMapsPlaces(apiKey: kGoogleApiKey);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: demo(),
      ),
    );
  }
}

class demo extends StatefulWidget {
  @override
  demoState createState() => new demoState();
}

class demoState extends State<demo> {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: RaisedButton(
          onPressed: () async {
            // show input autocomplete with selected mode
            // then get the Prediction selected
            Prediction p = await PlacesAutocomplete.show(
                context: context, apiKey: kGoogleApiKey);
            displayPrediction(p);
          },
          child: Text('Find address'),

        )
      )
    );
  }

  Future<Null> displayPrediction(Prediction p) async {
    if (p != null) {
      PlacesDetailsResponse detail =
      await _places.getDetailsByPlaceId(p.placeId);

      var placeId = p.placeId;
      double lat = detail.result.geometry.location.lat;
      double lng = detail.result.geometry.location.lng;

      var address = await Geocoder.local.findAddressesFromQuery(p.description);

      print(lat);
      print(lng);
    }
  }
}

результат:

При нажатии на кнопку «Найти адрес» открывается новый экран со встроенной панелью поиска, в которой вы можете ввести искомый адрес / место, в котором отображаются соответствующие результаты в списке автозаполнения, и печатается lat и long. выбранного вами места.

* * 1030

lat: 52.3679843
lng: 4.9035614

Надеюсь, это ответит на ваш вопрос.