Flutter地点搜索插件flutter_google_place_search的使用

Flutter 地点搜索插件 flutter_google_place_search 的使用

示例代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是您的应用的根。它是无状态的，意味着它不包含会改变其外观的状态。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 地点搜索 Demo',
      theme: ThemeData(
        // 这是您的应用的主题。
        //
        // 尝试运行您的应用。您会看到应用有一个紫色的工具栏。然后，在不退出应用的情况下，
        // 将颜色方案中的 seedColor 改为 Colors.green 并触发热重载（在支持 Flutter 的 IDE 中保存更改或按下“热重载”按钮，或者如果通过命令行启动应用，则按“r”）。
        //
        // 注意计数器并没有重置回零；应用的状态在重载期间不会丢失。要重置状态，应使用热重启而不是热重载。
        //
        // 这也适用于代码，而不仅仅是值：大多数代码更改可以通过热重载进行测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter 地点搜索'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是您的应用的首页。它是有状态的，意味着它有一个状态对象（定义在下面），该对象包含会影响其外观的字段。
  //
  // 这个类是状态的配置。它保存了由父级（在这个例子中是 MyApp 小部件）提供的值（在这个例子中是标题）并用于构建方法中的 State。Widget 子类中的字段总是标记为 "final"。

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // List<GooglePlace> _places = [];
  final TextEditingController _searchController = TextEditingController();

  // 搜索地点的方法
  Future<void> search(String query) async {
    // 在这里添加搜索逻辑
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 这个方法会在每次调用 setState 时重新运行，例如上面的 _incrementCounter 方法。
    //
    // Flutter 框架已优化为使重建方法快速运行，因此您可以只需重建需要更新的部分，而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 尝试将此处的颜色更改为特定颜色（例如 Colors.amber），然后触发热重载以查看 AppBar 颜色的变化，而其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这里我们从 MyHomePage 对象中获取值，该对象是由 App.build 方法创建的，并用于设置我们的应用栏标题。
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          TextField(
            controller: _searchController,
            decoration: const InputDecoration(
              hintText: '搜索',
              prefixIcon: Icon(Icons.search),
            ),
          ),
        ],
      ),
    );
  }
}

完整示例 Demo

在上述代码的基础上，我们需要添加具体的搜索逻辑。这里我们将使用 flutter_google_place_search 插件来实现地点搜索功能。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_google_place_search: ^0.0.1

然后，您可以在 _MyHomePageState 类中添加以下代码来实现搜索逻辑：

import 'package:flutter/material.dart';
import 'package:flutter_google_place_search/flutter_google_place_search.dart';

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _searchController = TextEditingController();
  GooglePlaceSearchController _googlePlaceSearchController;
  
  _MyHomePageState()
      : _googlePlaceSearchController = GooglePlaceSearchController(
          apiKey: 'YOUR_API_KEY', // 替换为您的 API Key
          language: 'zh-CN', // 设置语言为简体中文
        );

  Future<void> search(String query) async {
    var response = await _googlePlaceSearchController.search(query);
    if (response.isSuccess) {
      // 处理搜索结果
      print(response.data);
    } else {
      // 处理错误
      print(response.error);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          TextField(
            controller: _searchController,
            decoration: const InputDecoration(
              hintText: '搜索',
              prefixIcon: Icon(Icons.search),
            ),
            onSubmitted: (value) {
              search(value);
            },
          ),
        ],
      ),
    );
  }
}