Flutter地址搜索插件address_search_field的使用

Flutter地址搜索插件address_search_field的使用

address_search_field 插件帮助开发者创建能够自动补全地址的搜索小部件。这些小部件可以在用户点击文本输入框时通过 showDialog 函数显示出来。该插件依赖于以下库：

• Dio
• Google Maps for Flutter
• Flutter Riverpod

演示

引入插件

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  address_search_field: ^5.0.3

Android权限配置

在 AndroidManifest.xml 文件中添加互联网权限：

<uses-permission android:name="android.permission.INTERNET"/>

导入库

在 Dart 文件中导入 address_search_field 包：

import 'package:address_search_field/address_search_field.dart';

使用GeoMethods

GeoMethods 对象用于调用 Google API，并支持多种参数设置。

GeoMethods geoMethods;
TextEditingController controller;
Address destinationAddress;

// 创建一个GeoMethods实例
final geoMethods = GeoMethods(
  googleApiKey: 'YOUR_GOOGLE_API_KEY',
  language: 'en',
  countryCode: 'us',
);

// 调用API
geoMethods.autocompletePlace(query: 'place streets or reference');
geoMethods.geoLocatePlace(coords: Coords(0.10, 0.10));
geoMethods.getPlaceGeometry(reference: 'place streets', placeId: 'ajFDN3662fNsa4hhs42FAjeb5n');
geoMethods.getDirections(origin: Address(coords: Coords(0.10, 0.10)), destination: Address(coords: Coords(0.10, 0.10)));

使用AddressSearchBuilder

AddressSearchBuilder 小部件允许用户搜索地址并处理地址对象。

TextField(
  controller: controller,
  onTap: () => showDialog(
    context,
    builder: (BuildContext context) => AddressSearchDialog(
      geoMethods: geoMethods,
      controller: controller,
      onDone: (Address address) => destinationAddress = address,
    )
  ),
);

自定义AddressSearchDialog

可以通过 AddressSearchDialog.custom 创建自定义对话框。

TextField(
  controller: controller,
  onTap: () => showDialog(
    context,
    builder: (BuildContext context) {
      return AddressSearchDialog.custom(
        geoMethods: geoMethods,
        builder: (
          BuildContext context,
          AsyncSnapshot<List<Address>> snapshot,
          Future<void> Function() searchAddress,
          Future<Address> Function(Address address) getGeometry,
          void Function() dismiss,
        ) {
          return MyCustomWidget(
            snapshot: snapshot,
            searchAddress: searchAddress,
            getGeometry: getGeometry,
            dismiss: dismiss,
            controller: controller,
            address: destinationAddress,
          );
        }
      );
    }
  ),
);

使用AddressLocator

AddressLocator 小部件允许从坐标获取地址引用。

Coords coords;
GeoMethods geoMethods;
TextEditingController controller;
Address initialAddress;

AddressLocator(
  coords: coords,
  geoMethods: geoMethods,
  controller: controller,
  child: TextField(
    controller: controller,
    onTap: () => showDialog(
      context: context,
      builder: (BuildContext context) => AddressSearchDialog(
        controller: controller,
        geoMethods: geoMethods,
        onDone: (Address address) => initialAddress = address,
      ),
    ),
  ),
);

使用RouteSearchBox

RouteSearchBox 小部件可以帮助你使用 flutter_riverpod 提供者来管理路线信息。

final routeProvider = ChangeNotifierProvider<RouteNotifier>((ref) => RouteNotifier());

GeoMethods geoMethods;
TextEditingController originCtrl;
TextEditingController destCtrl;
Coords initialCoords;

RouteSearchBox(
  provider: routeProvider,
  geoMethods: geoMethods,
  originController: originCtrl,
  destinationController: destCtrl,
  locationSetters: [
    LocationSetter(
      coords: initialCoords,
      addressId: AddressId.origin,
    ),
  ],
  child: Column(
    children: [
      TextField(
        controller: originCtrl,
        onTap: () => showDialog(
          context: context,
          builder: (context) => AddressSearchDialog.withProvider(
            provider: routeProvider,
            addressId: AddressId.origin,
          ),
        ),
      ),
      TextField(
        controller: destCtrl,
        onTap: () => showDialog(
          context: context,
          builder: (context) => AddressSearchDialog.withProvider(
            provider: routeProvider,
            addressId: AddressId.destination,
          ),
        ),
      ),
      Consumer(
        builder: (BuildContext context, WidgetRef ref, Widget? _) {
          return ElevatedButton(
            child: const Text('Search'),
            onPressed: () async {
              final route = await ref.read(routeProvider).findRoute();
            },
          );
        },
      ),
    ],
  )
);