google_location_autocomplete_textfield_flutter #

添加依赖到pubspec.yml #

dependencies:
  flutter:
    sdk: flutter
  google_location_autocomplete_textfield_flutter: <last-version>

谷歌自动完成文本框小部件代码 #

GoogleLocationAutoCompleteTextField(
  textEditingController: controller, // 文本控制器
  googleAPIKey: "YOUR_GOOGLE_API_KEY", // 谷歌地图API密钥
  inputDecoration: InputDecoration(), // 输入框装饰器
  debounceTime: 800, // 防抖时间，默认600ms
  countries: ["in", "fr"], // 可选参数，默认为null
  isLatLngRequired: true, // 是否需要经纬度信息
  getPlaceDetailWithLatLng: (Prediction prediction) {
    // 返回带有经纬度的地方详情
    print("placeDetails" + prediction.lat.toString());
  }, // 当isLatLngRequired为true时调用的回调函数
  itemClick: (Prediction prediction) {
    // 点击列表项时触发
    controller.text = prediction.description ?? "";
    controller.selection = TextSelection.fromPosition(
      TextPosition(offset: prediction.description?.length ?? 0)
    );
  },
  
  // 如果要自定义列表项构建器
  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 ?? ""}")) // 地点描述
        ],
      ),
    );
  },
  
  // 如果需要在列表项之间添加分隔符
  separatedBuilder: Divider(),
  
  // 是否显示关闭按钮
  isCrossBtnShown: true,
  
  // 容器水平内边距
  containerHorizontalPadding: 10,
  
  // 地点类型
  placeType: PlaceType.geocode,
)

定制选项 #

您可以自定义输入框的装饰器和防抖时间。

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:google_location_autocomplete_textfield_flutter/google_location_autocomplete_textfield.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '自动完成示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late TextEditingController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = TextEditingController();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? ""),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(height: 20),
            placesAutoCompleteTextField(),
          ],
        ),
      ),
    );
  }

  Widget placesAutoCompleteTextField() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20),
      child: GoogleLocationAutoCompleteTextField(
        textEditingController: controller,
        googleAPIKey: "YOUR_GOOGLE_API_KEY",
        inputDecoration: InputDecoration(
          hintText: "搜索您的位置",
          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)
          );
        },
        separatedBuilder: Divider(),
        containerHorizontalPadding: 10,
        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,
      ),
    );
  }
}