Flutter地址选择插件address的使用

Flutter地址选择插件address的使用

address 是一个用于国际化地址格式化的库。它能够以各种语言格式化物理地址，并构建本地化的地址表单。

使用

地址格式化显示

假设你有一个地址对象：

final address = Address(
  fullName: 'Nicole Martin',
  addressLine1: '123 Sherbrooke St',
  city: 'Montreal',
  zone: 'QC',
  postalCode: 'H3G 2A6',
  country: 'CA',
);

你可以将其格式化为所需的格式：

final englishFormatter = AddressFormatter('en');
print(englishFormatter.formatDisplay(address));

// [
//   'NICOLE MARTIN',
//   '123 SHERBROOKE ST',
//   'MONTREAL QC  H3G 2A6',
//   'CANADA'
// ]

final frenchFormatter = AddressFormatter('fr');
print(frenchFormatter.formatDisplay(address));

// [
//   'Nicole Martin',
//   '123 Sherbrooke St',
//   'Montreal (Québec)  H2G 2A6',
//   'CANADA'
// ]

地址表单布局

你还可以获取地址表单的本地化格式，包括所有必填和可选字段及其标签和描述信息。

final addressFormatter = AddressFormatter('en');
final formFormat = addressFormatter.formatForm('US');

// formFormat = [
//   // 其他字段：全名、地址行1、地址行2、城市
//   AddressFormFieldInformation(
//     label: 'State',
//     obligatory: true,
//     availableValues: {
//       // (...)
//       'TX': 'Texas',
//       // (...)
//     },
//   ),
//   // 其他字段：邮政编码
// ]

你可以使用这些信息来构建例如一个 Flutter 表单。具体实现可以参考以下示例代码。

完整示例代码

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

void main() {
  runApp(ExampleApp());
}

class ExampleApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(home: MainScreen());
  }
}

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

class _MainScreenState extends State<MainScreen> {
  final _countryController =
      TextEditingController.fromValue(TextEditingValue(text: 'US'));
  final _formLangController =
      TextEditingController.fromValue(TextEditingValue(text: 'en'));

  final _nameController = TextEditingController();
  final _addressLine1Controller = TextEditingController();
  final _addressLine2Controller = TextEditingController();
  final _cityController = TextEditingController();
  final _zoneController = TextEditingController();
  final _postalCodeController = TextEditingController();

  final _displayLangController =
      TextEditingController.fromValue(TextEditingValue(text: 'en'));

  Map<AddressFormField, TextEditingController> get _formFieldToControllerMap =>
      {
        AddressFormField.fullName: _nameController,
        AddressFormField.addressLine1: _addressLine1Controller,
        AddressFormField.addressLine2: _addressLine2Controller,
        AddressFormField.city: _cityController,
        AddressFormField.zone: _zoneController,
        AddressFormField.postalCode: _postalCodeController,
      };

  [@override](/user/override)
  void initState() {
    super.initState();
    _countryController
        .addListener(() => setState(() => _zoneController.text = ''));
    _formLangController.addListener(() => setState(() {}));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final addressFormatter = AddressFormatter(_formLangController.text);
    final formFormat = addressFormatter.formatForm(_countryController.text);

    return Scaffold(
      appBar: AppBar(
        title: Text('地址示例'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          TextField(
            controller: _countryController,
            textCapitalization: TextCapitalization.characters,
            decoration: InputDecoration(
              labelText: '地址国家（ISO 3166-1 alpha-2）',
              helperText: 'US, CA, AU, PL, FR, IT, ES...',
            ),
          ),
          TextField(
            controller: _formLangController,
            textCapitalization: TextCapitalization.none,
            decoration: InputDecoration(
              labelText: '表单语言（ISO 639-1）',
              helperText: 'en, fr, pl, es...',
            ),
          ),
          const Divider(height: 48),
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              for (final field in formFormat)
                if (field.availableValues != null)
                  DropdownButtonFormField<String>(
                    value: _formFieldToControllerMap[field.type]!.text,
                    onChanged: (value) {
                      if (value == null) return;
                      _formFieldToControllerMap[field.type]!.text = value;
                    },
                    items: [
                      DropdownMenuItem(value: '', child: const SizedBox()),
                      for (final value in field.availableValues!.entries)
                        DropdownMenuItem(
                          value: value.key,
                          child: Text(value.value),
                        ),
                    ],
                    decoration: InputDecoration(
                      labelText: field.label,
                      helperText: field.description,
                    ),
                  )
                else
                  TextField(
                    controller: _formFieldToControllerMap[field.type],
                    decoration: InputDecoration(
                      labelText: field.label,
                      helperText: field.description,
                    ),
                  ),
            ],
          ),
          const Divider(height: 48),
          Row(
            children: [
              Expanded(
                child: TextField(
                  controller: _displayLangController,
                  textCapitalization: TextCapitalization.none,
                  decoration: InputDecoration(
                    labelText: '显示语言（ISO 639-1）',
                    helperText: 'en, fr, pl, es...',
                  ),
                ),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {
                  final formatter =
                      AddressFormatter(_displayLangController.text);

                  final address = Address(
                    country: _countryController.text,
                    fullName: _nameController.text,
                    addressLine1: _addressLine1Controller.text,
                    addressLine2: _addressLine2Controller.text,
                    city: _cityController.text,
                    zone: _zoneController.text,
                    postalCode: _postalCodeController.text,
                  );

                  final displayFormatted = formatter.formatDisplay(address);

                  showModalBottomSheet(
                    context: context,
                    builder: (context) => Padding(
                      padding: const EdgeInsets.all(16),
                      child: Text(displayFormatted.join('\n')),
                    ),
                  );
                },
                child: Text('格式化显示'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _countryController.dispose();
    _formLangController.dispose();

    _nameController.dispose();
    _addressLine1Controller.dispose();
    _addressLine2Controller.dispose();
    _cityController.dispose();
    _zoneController.dispose();
    _postalCodeController.dispose();

    _displayLangController.dispose();

    super.dispose();
  }
}