flutter如何实现地址选择功能

在Flutter中如何实现一个完整的地址选择功能？需要包含省市区三级联动选择，并且能够支持用户手动输入地址。目前尝试过使用第三方库，但无法满足自定义UI的需求。希望了解如何从零开始实现，包括数据源的获取（是否需要后端接口）、UI组件的搭建以及选择结果的回调处理。最好能提供一些性能优化的建议，比如大数据量下的流畅度问题。

eggper 1楼

Flutter实现地址选择功能可通过以下方式：

使用第三方库如city_pickers或flutter_picker。
自定义组件，结合DropdownButton或CupertinoPicker。
调用高德或百度地图API获取地址数据。
数据源可本地JSON或接口请求。

更多关于flutter如何实现地址选择功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 2楼

在Flutter中实现地址选择功能，可以通过以下几种方式：

1. 使用第三方库（推荐）

安装依赖

dependencies:
  city_pickers: ^2.0.0
  # 或者
  flutter_picker: ^2.0.0

使用 city_pickers 示例

import 'package:city_pickers/city_pickers.dart';

class AddressPicker extends StatefulWidget {
  @override
  _AddressPickerState createState() => _AddressPickerState();
}

class _AddressPickerState extends State<AddressPicker> {
  String selectedAddress = '请选择地址';

  Future<void> _showAddressPicker() async {
    Result result = await CityPickers.showCityPicker(
      context: context,
      locationCode: '110100', // 默认选中北京
      height: 300,
    );
    
    if (result != null) {
      setState(() {
        selectedAddress = '${result.provinceName} ${result.cityName} ${result.areaName}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListTile(
          title: Text('选择地址'),
          subtitle: Text(selectedAddress),
          onTap: _showAddressPicker,
        ),
      ],
    );
  }
}

2. 自定义地址选择器

创建地址数据

class AddressData {
  static final Map<String, Map<String, List<String>>> addressMap = {
    '北京市': {
      '市辖区': ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区'],
    },
    '上海市': {
      '市辖区': ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区'],
    },
    // 添加更多省市数据...
  };
}

自定义三级联动选择器

class CustomAddressPicker extends StatefulWidget {
  @override
  _CustomAddressPickerState createState() => _CustomAddressPickerState();
}

class _CustomAddressPickerState extends State<CustomAddressPicker> {
  String selectedProvince = '';
  String selectedCity = '';
  String selectedDistrict = '';
  
  List<String> get provinces => AddressData.addressMap.keys.toList();
  List<String> get cities => selectedProvince.isNotEmpty 
      ? AddressData.addressMap[selectedProvince]!.keys.toList() 
      : [];
  List<String> get districts => selectedCity.isNotEmpty 
      ? AddressData.addressMap[selectedProvince]![selectedCity]! 
      : [];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 省份选择
        DropdownButton<String>(
          value: selectedProvince.isEmpty ? null : selectedProvince,
          hint: Text('选择省份'),
          items: provinces.map((province) {
            return DropdownMenuItem(
              value: province,
              child: Text(province),
            );
          }).toList(),
          onChanged: (value) {
            setState(() {
              selectedProvince = value!;
              selectedCity = '';
              selectedDistrict = '';
            });
          },
        ),
        
        // 城市选择
        DropdownButton<String>(
          value: selectedCity.isEmpty ? null : selectedCity,
          hint: Text('选择城市'),
          items: cities.map((city) {
            return DropdownMenuItem(
              value: city,
              child: Text(city),
            );
          }).toList(),
          onChanged: (value) {
            setState(() {
              selectedCity = value!;
              selectedDistrict = '';
            });
          },
        ),
        
        // 区域选择
        DropdownButton<String>(
          value: selectedDistrict.isEmpty ? null : selectedDistrict,
          hint: Text('选择区域'),
          items: districts.map((district) {
            return DropdownMenuItem(
              value: district,
              child: Text(district),
            );
          }).toList(),
          onChanged: (value) {
            setState(() {
              selectedDistrict = value!;
            });
          },
        ),
      ],
    );
  }
}

3. 使用 BottomSheet 实现

void _showBottomSheetPicker() {
  showModalBottomSheet(
    context: context,
    builder: (context) {
      return Container(
        height: 300,
        child: CustomAddressPicker(),
      );
    },
  );
}