Flutter地点搜索与选择插件google_places_api_flutter的使用

当然，关于Flutter地点搜索与选择插件google_places_api_flutter的使用，下面是一个详细的代码案例，展示了如何集成和使用该插件进行地点搜索和选择。

首先，确保你已经在你的pubspec.yaml文件中添加了google_places_api_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  google_places_api_flutter: ^x.y.z  # 替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，配置你的Google Places API。你需要一个Google Cloud Platform项目和一个API密钥。确保你已经启用了Places API，并获取了API密钥。

配置API密钥

在你的android/app/src/main/AndroidManifest.xml文件中，添加你的API密钥（请注意，这仅适用于调试模式，生产环境中应使用更安全的方式管理API密钥，如通过环境变量或Firebase配置）：

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY_HERE"/>

示例代码

在你的Flutter项目中，创建一个新的Dart文件（例如place_search.dart），并添加以下代码：

import 'package:flutter/material.dart';
import 'package:google_places_api_flutter/models/prediction.dart';
import 'package:google_places_api_flutter/models/place_detail.dart';
import 'package:google_places_api_flutter/google_places_api_flutter.dart';

void main() {
  runApp(MyApp());
}

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

class PlaceSearchScreen extends StatefulWidget {
  @override
  _PlaceSearchScreenState createState() => _PlaceSearchScreenState();
}

class _PlaceSearchScreenState extends State<PlaceSearchScreen> {
  final TextEditingController _searchController = TextEditingController();
  List<Prediction> _predictions = [];
  PlaceDetail? _selectedPlace;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Places API Flutter Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              controller: _searchController,
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                labelText: 'Search for a place',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _onSearchPressed,
                ),
              ),
            ),
            SizedBox(height: 16),
            Expanded(
              child: _predictions.isEmpty
                  ? Center(child: Text('No predictions found'))
                  : ListView.builder(
                      itemCount: _predictions.length,
                      itemBuilder: (context, index) {
                        Prediction prediction = _predictions[index];
                        return ListTile(
                          title: Text(prediction.description ?? ''),
                          onTap: () async {
                            PlaceDetail? placeDetail = await GooglePlacesApiFlutter.getPlaceDetailsById(prediction.placeId ?? '');
                            setState(() {
                              _selectedPlace = placeDetail;
                            });
                            // 可以在这里处理选择的地方，例如导航到详情页面
                          },
                        );
                      },
                    ),
            ),
            if (_selectedPlace != null) {
              SizedBox(height: 16),
              Divider(),
              SizedBox(height: 16),
              Text('Selected Place:'),
              Text(_selectedPlace?.name ?? ''),
              Text(_selectedPlace?.formattedAddress ?? ''),
              // 可以添加更多关于选中地点的信息展示
            },
          ],
        ),
      ),
    );
  }

  void _onSearchPressed() async {
    String input = _searchController.text;
    if (input.isNotEmpty) {
      List<Prediction> predictions = await GooglePlacesApiFlutter.getAutocompletePredictions(input);
      setState(() {
        _predictions = predictions;
      });
    }
  }
}

说明

1. 搜索功能：用户在文本框中输入搜索词后，点击搜索图标或按下回车键，会调用_onSearchPressed方法，该方法使用GooglePlacesApiFlutter.getAutocompletePredictions获取自动完成预测结果，并更新UI显示这些预测。

2. 选择功能：用户点击某个预测项时，会调用GooglePlacesApiFlutter.getPlaceDetailsById获取该地点的详细信息，并更新UI显示这些信息。

3. UI设计：使用TextField进行搜索输入，使用ListView.builder显示预测结果，使用Text和Divider展示选中地点的详细信息。

请确保你的Google Places API配置正确，并且你的API密钥具有访问Places API的权限。如果在Android模拟器或真机上测试时遇到权限问题，请检查你的AndroidManifest.xml文件和API密钥的有效性。