Flutter位置选择插件pick_location的使用

在本教程中，我们将学习如何在Flutter应用中使用location_picker_flutter_map插件来选择位置。首先，你需要在你的项目中添加该插件。

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  location_picker_flutter_map:

然后运行flutter pub get来安装该插件。

示例代码

下面是一个简单的示例代码，展示了如何使用location_picker_flutter_map插件来选择一个位置。

import 'package:flutter/material.dart';
import 'package:location_picker_flutter_map/location_picker_flutter_map.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(
        // 这是你应用的主题
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String? selectedLocation; // 用于存储选择的位置

  void _selectLocation() async {
    // 打开位置选择器并获取用户选择的位置
    final result = await LocationPicker.showLocationPicker(
      context,
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY', // 替换为你的Google Maps API密钥
      languageCode: 'zh', // 设置语言为简体中文
    );

    if (result != null) {
      setState(() {
        selectedLocation = "${result.lat}, ${result.lng}"; // 更新选中的位置
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 这个方法每次调用setState时都会被重新运行
    return Scaffold(
      appBar: AppBar(
        // 这里我们从MyHomePage对象中获取值，并将其用于设置appbar标题
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一个布局小部件。它接受一个子元素并将其定位在父元素的中间
        child: Column(
          // Column也是一个布局小部件。它接受一个子元素列表并垂直排列它们
          // 默认情况下，它会根据其子元素水平调整自身大小，并尝试与其父元素一样高
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '请选择一个位置：',
            ),
            Text(
              selectedLocation ?? '未选择位置',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            ElevatedButton(
              onPressed: _selectLocation, // 按钮点击事件
              child: const Text('选择位置'),
            ),
          ],
        ),
      ),
    );
  }
}