Flutter韩国邮政编码搜索插件daum_postcode_search的使用

daum_postcode_search 是一个用于在Flutter应用中集成韩国邮政编码搜索服务的插件。该插件利用InAppWebView加载Daum Postcode服务，从而实现地址搜索功能。

Setup 设置

Android

在AndroidManifest.xml文件中的 <application> 标签内添加 android:usesCleartextTraffic="true"。由于Daum Postcode服务的部分内容不使用SSL，因此如果不设置此权限，可能会出现明文流量相关的错误。

Example 示例代码

以下是使用 daum_postcode_search 包实现搜索页面的例子：

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

class SearchingPage extends StatefulWidget {
  [@override](/user/override)
  _SearchingPageState createState() => _SearchingPageState();
}

class _SearchingPageState extends State<SearchingPage> {
  bool _isError = false;
  String? errorMessage;

  [@override](/user/override)
  Widget build(BuildContext context) {
    DaumPostcodeSearch daumPostcodeSearch = DaumPostcodeSearch(
      onConsoleMessage: (_, message) => print(message),
      onLoadError: (controller, uri, errorCode, message) => setState(
        () {
          _isError = true;
          errorMessage = message;
        },
      ),
      onLoadHttpError: (controller, uri, errorCode, message) => setState(
        () {
          _isError = true;
          errorMessage = message;
        },
      ),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text("地址搜索页面"),
        centerTitle: true,
      ),
      body: Container(
        child: Column(
          children: [
            Expanded(
              child: daumPostcodeSearch,
            ),
            Visibility(
              visible: _isError,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Text(errorMessage ?? ""),
                  ElevatedButton(
                    child: Text("刷新"),
                    onPressed: () {
                      daumPostcodeSearch.controller?.reload();
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

以下是如何显示通过上述 SearchingPage 搜索到的结果的完整示例：

class DaumPostcodeSearchExample extends StatefulWidget {
  DaumPostcodeSearchExample({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _DaumPostcodeSearchExampleState createState() =>
      _DaumPostcodeSearchExampleState();
}

class _DaumPostcodeSearchExampleState extends State<DaumPostcodeSearchExample> {
  DataModel? _daumPostcodeSearchDataModel;

  TableRow _buildTableRow(String label, String value) {
    return TableRow(
      children: [
        TableCell(
          verticalAlignment: TableCellVerticalAlignment.middle,
          child: Text(label, textAlign: TextAlign.center),
        ),
        TableCell(
          child: Text(value, textAlign: TextAlign.center),
        ),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              ElevatedButton.icon(
                onPressed: () async {
                  try {
                    DataModel model = await Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => SearchingPage(),
                      ),
                    );

                    setState(() {
                      _daumPostcodeSearchDataModel = model;
                    });
                  } catch (error) {
                    print(error);
                  }
                },
                icon: Icon(Icons.search),
                label: Text("地址搜索"),
              ),
              Visibility(
                visible: _daumPostcodeSearchDataModel != null,
                child: Card(
                  child: Padding(
                    padding: EdgeInsets.all(10),
                    child: Column(
                      children: [
                        Padding(
                          padding: EdgeInsets.all(10),
                          child: RichText(
                            text: TextSpan(
                              style: TextStyle(color: Colors.black, fontSize: 20),
                              children: [
                                WidgetSpan(
                                  child: Icon(
                                    Icons.check_circle,
                                    color: Theme.of(context).colorScheme.secondary,
                                  ),
                                ),
                                TextSpan(text: "地址搜索结果"),
                              ],
                            ),
                          ),
                        ),
                        Table(
                          border: TableBorder.symmetric(
                              inside: BorderSide(color: Colors.grey)),
                          columnWidths: {
                            0: FlexColumnWidth(1),
                            1: FlexColumnWidth(2),
                          },
                          children: [
                            _buildTableRow(
                              "韩文地址",
                              _daumPostcodeSearchDataModel?.address ?? "",
                            ),
                            _buildTableRow(
                              "英文地址",
                              _daumPostcodeSearchDataModel?.addressEnglish ?? "",
                            ),
                            _buildTableRow(
                              "邮政编码",
                              _daumPostcodeSearchDataModel?.zonecode ?? "",
                            ),
                            _buildTableRow(
                              "地名地址",
                              _daumPostcodeSearchDataModel?.autoJibunAddress ?? "",
                            ),
                            _buildTableRow(
                              "地名地址（英文）",
                              _daumPostcodeSearchDataModel?.autoJibunAddressEnglish ?? "",
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}