Flutter如何实现地址选择器

在Flutter中想要实现一个地址选择器，类似于省市区三级联动的效果，有没有推荐的插件或实现方案？目前看到一些方案但不太稳定，想请教大家在实际项目中使用过哪些可靠的方案？最好能支持数据动态加载和自定义UI样式。

2 回复

Flutter中实现地址选择器可使用第三方库如city_pickers或flutter_picker。
步骤：

  1. 引入依赖；
  2. 调用库的API弹出选择器；
  3. 处理返回的地址数据。
    示例代码简洁，支持省市区三级联动。

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


在Flutter中实现地址选择器，主要有以下几种方式：

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

city_pickers 库

dependencies:
  city_pickers: ^2.0.0

import 'package:city_pickers/city_pickers.dart';

// 使用示例
void _showCityPicker() async {
  Result? result = await CityPickers.showCityPicker(
    context: context,
    locationCode: '110000', // 默认选中北京
    height: 300,
  );
  
  if (result != null) {
    print('省份: ${result.provinceName}');
    print('城市: ${result.cityName}');
    print('区县: ${result.areaName}');
  }
}

flutter_picker 库

dependencies:
  flutter_picker: ^2.1.7

import 'package:flutter_picker/flutter_picker.dart';

void _showAddressPicker() {
  Picker(
    adapter: PickerDataAdapter<String>(pickerdata: [
      ['北京', '上海', '广东'],
      ['北京市', '上海市', '广州市', '深圳市'],
      ['朝阳区', '海淀区', '浦东新区', '宝山区']
    ]),
    onConfirm: (Picker picker, List value) {
      print('选择结果: ${picker.getSelectedValues()}');
    },
  ).showDialog(context);
}

2. 自定义实现

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

class _AddressPickerState extends State<AddressPicker> {
  List<String> provinces = ['北京', '上海', '广东'];
  List<String> cities = [];
  List<String> areas = [];
  
  String? selectedProvince;
  String? selectedCity;
  String? selectedArea;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DropdownButton<String>(
          value: selectedProvince,
          onChanged: (String? newValue) {
            setState(() {
              selectedProvince = newValue;
              // 根据省份更新城市列表
              _updateCities(newValue);
            });
          },
          items: provinces.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
        
        if (cities.isNotEmpty)
          DropdownButton<String>(
            value: selectedCity,
            onChanged: (String? newValue) {
              setState(() {
                selectedCity = newValue;
                // 根据城市更新区县列表
                _updateAreas(newValue);
              });
            },
            items: cities.map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
          
        if (areas.isNotEmpty)
          DropdownButton<String>(
            value: selectedArea,
            onChanged: (String? newValue) {
              setState(() {
                selectedArea = newValue;
              });
            },
            items: areas.map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
      ],
    );
  }
  
  void _updateCities(String? province) {
    // 根据省份获取对应的城市列表
    // 这里可以调用API或从本地数据获取
  }
  
  void _updateAreas(String? city) {
    // 根据城市获取对应的区县列表
  }
}

3. 使用 BottomSheet 实现

void _showBottomSheetPicker() {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 300,
        child: Column(
          children: [
            // 添加地址选择器内容
            Text('地址选择器'),
            // 可以在这里使用上面提到的任何方法
          ],
        ),
      );
    },
  );
}

推荐方案

对于实际项目开发，建议使用 city_pickers 库，因为它：

  • 内置完整的中国省市区数据
  • 支持多种显示模式
  • 具有良好的UI效果
  • 维护活跃

选择哪种方式取决于你的具体需求，如果只是简单的选择，自定义实现即可；如果需要完整的省市区数据，推荐使用第三方库。

回到顶部