Comment créer une simple recherche d'adresse google maps avec autocomplétion dans flutter et obtenir la latitude et la longitude ?

Question

Je suis nouveau dans Flutter et j'essaye de construire une application simple de google maps. J'ai déjà implémenté google maps dans l'application et elle fonctionne parfaitement.

Mais maintenant, je veux ajouter l'autocomplétion de Google Maps et je ne trouve pas de tutoriel ou d'exemple simple qui soit axé sur ce sujet.

J'ai un TextField et je veux afficher les lieux et les adresses en dessous de celui-ci en fonction de ce que l'utilisateur tape.

Après avoir montré les résultats, je dois obtenir sa latitude et sa longitude pour les marquer sur la carte. Le code ci-dessous représente ma BottomSheet, qui contient mon TexField et doit implémenter une liste en dessous de celui-ci après un texte écrit.

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

Vous pouvez utiliser flotter_google_places plugin qui affiche les lieux dans la liste autocomplète au fur et à mesure que vous les saisissez et qui renvoie également la latitude et la longitude du lieu/de l'adresse sélectionné(e).

\===== code de travail =======

1. Ajouter flutter_google_places et l'importer dans votre fichier dart.
2. Ajouter géocodeur et l'importer dans le même fichier dart. (Nécessaire pour accéder aux services de géocodage)
3. Générer la clé google api pour votre projet.

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);
    }
  }
}

résultat :

Lorsque vous appuyez sur le bouton "Trouver une adresse", un nouvel écran s'ouvre avec une barre d'application de recherche intégrée dans laquelle vous pouvez taper l'adresse ou le lieu que vous recherchez. Les résultats correspondants s'affichent dans la liste autocomplète et s'impriment. lat y long de l'endroit que vous avez sélectionné.

lat: 52.3679843
lng: 4.9035614

J'espère que cela répond à votre question.

Answer 2

Si vous souhaitez savoir comment procéder pour que l'API lieux puisse renvoyer des données dans une vue de liste personnalisée, cette vidéo vous montrera comment procéder. https://youtu.be/rJOkoAmC5GY