Flutter邮政编码处理插件kpostal的使用

关于kpostal

Kpostal包可以通过Kakao postcode service搜索韩国邮政地址。这个包是受到了Kopo包的启发，但Kopo已经停止维护。

默认情况下，它使用托管在Github上的地址搜索页面。这是最简单的方式。为了应对托管问题引发的错误，它也支持托管本地服务器。Kpostal还提供了地址的经纬度信息。它使用iOS和Android平台提供的免费地理编码服务，这意味着使用上有一定限制。更多详细信息可以在Apple文档和Google文档以及geocoding插件中找到。如果你使用kakao maps api，你也可以获取到kakao地理编码值。

开始使用

添加依赖

在pubspec.yaml文件中添加kpostal：

dependencies:
  kpostal:

设置

• 既不需要为iOS也不需要为Android做任何设置当使用默认托管时。
• [Android] 在发布模式下检查互联网权限设置！

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

使用本地服务器（可选）

如果使用useLocalServer选项来托管本地服务器，则应该进行平台特定的http通信设置。

Android

添加android:usesCleartextTraffic="true"

<application
        android:label="[your_app]"
        android:icon="@mipmap/ic_launcher"
        ...
        android:usesCleartextTraffic="true"
        ...
        >
    ...
</application>

iOS

向info.plist文件中添加NSAppTransportSecurity

<plist version="1.0">
<dict>
    ...
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    ...
</dict>
</plist>

Kakao地理编码（可选）

1. 访问Kakao开发者网站
2. 注册开发者并创建应用
3. 添加Web平台：选择App – [Platform] – [Web Platform Registration] – Site Domain Registration
4. 注册Site Domain：
   • 默认使用https://tykann.github.io
   • 如果使用本地服务器，使用http://localhost:{你的端口，默认是8080}
5. 使用页面顶部的JavaScript key作为地图API的应用key。

示例代码

下面是一个完整的示例demo，展示了如何使用kpostal插件来搜索地址，并展示搜索结果。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kpostal Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Kpostal Example'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String postCode = '-';
  String roadAddress = '-';
  String jibunAddress = '-';
  String latitude = '-';
  String longitude = '-';
  String kakaoLatitude = '-';
  String kakaoLongitude = '-';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextButton(
              onPressed: () async {
                await Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (_) => KpostalView(
                      useLocalServer: true,
                      localPort: 1024,
                      // kakaoKey: '{Add your KAKAO DEVELOPERS JS KEY}',
                      callback: (Kpostal result) {
                        setState(() {
                          postCode = result.postCode;
                          roadAddress = result.address;
                          jibunAddress = result.jibunAddress;
                          latitude = result.latitude.toString();
                          longitude = result.longitude.toString();
                          kakaoLatitude = result.kakaoLatitude.toString();
                          kakaoLongitude = result.kakaoLongitude.toString();
                        });
                      },
                    ),
                  ),
                );
              },
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(Colors.blue)),
              child: const Text(
                'Search Address',
                style: TextStyle(color: Colors.white),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(40.0),
              child: Column(
                children: [
                  const Text('postCode',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                  Text('result: $postCode'),
                  const Text('road_address',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                  Text('result: $roadAddress'),
                  const Text('jibun_address',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                  Text('result: $jibunAddress'),
                  const Text('LatLng',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                  Text('latitude: $latitude / longitude: $longitude'),
                  const Text('through KAKAO Geocoder',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                  Text('latitude: $kakaoLatitude / longitude: $kakaoLongitude'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用程序，用户点击按钮后可以打开Kakao邮政编码搜索界面，选择地址后会返回相应的邮政编码、道路地址、地籍地址、经纬度信息等，并将这些信息显示在界面上。此外，通过注释掉的部分可以看到，如果需要使用本地服务器或Kakao地理编码功能，应该如何配置相关参数。