Flutter地点选择插件place_pickarte的使用

place_pickarte

place_pickarte 是一个高度自定义的、艺术感十足的地点选择器插件，支持通过内置UI组件实现像素级定制。目前支持Google Maps，Openstreet和Mapbox将在未来版本中加入。

##📐 特性

• 支持Google Maps。
• 提供像素级定制功能。
• 内置UI组件，易于集成和使用。

##🚀 动机

该插件的创建动机是为了满足开发者对地点选择器的高度自定义需求，同时提供简单易用的界面。

##🕹️ 使用

开始使用

在项目中引入插件后，可以通过以下步骤快速集成地点选择功能：

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

dependencies:
  place_pickarte: ^版本号

1. 导入必要的包并在主应用中使用：

import 'package:place_pickarte/place_pickarte.dart';

完整示例

以下是一个完整的示例代码，展示如何使用place_pickarte插件来选择地点并获取详细信息。

示例代码：main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Place Pickarte',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        appBarTheme: const AppBarTheme(
          centerTitle: true,
        ),
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  GeocodingResult? _pickedPlace;

  @override
  void setState(VoidCallback fn) {
    if (mounted) {
      super.setState(fn);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Artistic Place Picker'),
      ),
      body: Column(
        children: [
          ListTile(
            title: Text(
              '${_pickedPlace?.formattedAddress.asValidString}',
            ),
            subtitle: const Text('Formatted address'),
          ),
          ListTile(
            title: Text(
              '${_pickedPlace?.details.city.asValidString}',
            ),
            subtitle: const Text('City'),
          ),
          ListTile(
            title: Text(
              '${_pickedPlace?.details.streetName.asValidString}',
            ),
            subtitle: const Text('Street name'),
          ),
          ListTile(
            title: Text(
              '${_pickedPlace?.details.streetNumber.asValidString}',
            ),
            subtitle: const Text('Street number'),
          ),
          ListTile(
            title: Text(
              '${_pickedPlace?.details.countryName.asValidString}',
            ),
            subtitle: const Text('Country'),
          ),
          ListTile(
            title: Text(
              '${_pickedPlace?.details.addressLine.asValidString}',
            ),
            subtitle: const Text('Address line'),
          ),
          ListTile(
            title: Text(
              '${_pickedPlace?.partialMatch.toString().asValidString}',
            ),
            subtitle: const Text('Partial match?'),
            trailing: IconButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (_) => AlertDialog(
                    title: const Text('What is partial match?'),
                    content: const Text(
                      'Partial_match indicates that the geocoder did not return an exact match for the original request, though it was able to match part of the requested address. You may wish to examine the original request for misspellings and/or an incomplete address',
                    ),
                    actions: [
                      TextButton(
                        onPressed: Navigator.of(context).pop,
                        child: const Text('Owkey!'),
                      ),
                    ],
                  ),
                );
              },
              icon: const Icon(
                Icons.info_outline_rounded,
                color: Colors.grey,
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: ButtonBar(
        children: [
          ElevatedButton.icon(
            onPressed: () async {
              final result = await Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => const CustomizedPlacePicker(),
                ),
              );

              setState(() => _pickedPlace = result);
            },
            icon: const Icon(Icons.format_paint_rounded),
            label: const Text('Customized sample'),
          ),
          ElevatedButton.icon(
            onPressed: null,
            icon: const Icon(Icons.map),
            label: const Text('Prestyled sample'),
          ),
        ],
      ),
    );
  }
}

说明

1. 依赖导入：

   import 'package:place_pickarte/place_pickarte.dart';
   

2. 主应用配置：

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

3. 自定义地点选择器：

   ElevatedButton.icon(
     onPressed: () async {
       final result = await Navigator.of(context).push(
         MaterialPageRoute(
           builder: (_) => const CustomizedPlacePicker(),
         ),
       );
   
       setState(() => _pickedPlace = result);
     },
     icon: const Icon(Icons.format_paint_rounded),
     label: const Text('Customized sample'),
   ),
   

4. 获取地点信息：

   ListTile(
     title: Text('${_pickedPlace?.formattedAddress.asValidString}'),
     subtitle: const Text('Formatted address'),
   ),