google_places_flutter 2.0.9 google_places_flutter: ^2.0.9 copied to clipboard
Custom Google places autocomplete widget for Android and iOS both. Use https://pub.dev/packages/google_places_flutter
import 'package:flutter/material.dart';
import 'package:google_places_flutter/google_places_flutter.dart';
import 'package:google_places_flutter/model/place_type.dart';
import 'package:google_places_flutter/model/prediction.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Custom Autocomplete sample'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title}) : super(key: key);
final String? title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TextEditingController controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title ?? ""),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: 20),
placesAutoCompleteTextField(),
],
),
),
);
}
placesAutoCompleteTextField() {
return Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: GooglePlaceAutoCompleteTextField(
textEditingController: controller,
googleAPIKey:"YOUR_GOOGLE_API_KEY",
inputDecoration: InputDecoration(
hintText: "Search your location",
border: InputBorder.none,
enabledBorder: InputBorder.none,
),
debounceTime: 400,
countries: ["in", "fr"],
isLatLngRequired: true,
getPlaceDetailWithLatLng: (Prediction prediction) {
print("placeDetails" + prediction.lat.toString());
},
itemClick: (Prediction prediction) {
controller.text = prediction.description ?? "";
controller.selection = TextSelection.fromPosition(
TextPosition(offset: prediction.description?.length ?? 0));
},
seperatedBuilder: Divider(),
containerHorizontalPadding: 10,
// OPTIONAL// If you want to customize list view item builder
itemBuilder: (context, index, Prediction prediction) {
return Container(
padding: EdgeInsets.all(10),
child: Row(
children: [
Icon(Icons.location_on),
SizedBox(
width: 7,
),
Expanded(child: Text("${prediction.description ?? ""}"))
],
),
);
},
isCrossBtnShown: true,
// default 600 ms ,
),
);
}
}