flutter如何实现省市区选择器

前言

当我们需要用户填写地址时,稳妥的做法是让用户通过"滚轮"来滑动选择省份,市,区,此文采用flutter的第三方库来实现这一功能,比调用高德地图api简单一些。

流程

选择库

这里我选择了一个最近更新且支持中国的库

添加配置信息

pubspec.yaml的依赖增加city_pickers: ^1.3.0

然后pub get一下

代码

这里我直接准备好了一个调用选择器的代码,直接在onpressed,或者是tapped传入这个函数

复制代码
  Future<void> _showCityPicker() async {
    Result? result = await CityPickers.showCityPicker(
      context: context,
    );

    if (result != null) {
      // 使用选择的result
      // city 就是 result.city
    }
  }

另外,在CityPickers.showCityPicker里面不止可以传入context,详情见官方文档

city_pickers | Flutter package (pub.dev)

支持所有平台

相关推荐
奋斗的小青年!!14 小时前
Flutter + OpenHarmony:高性能搜索组件深度优化实战解析
flutter·harmonyos·鸿蒙
小雨下雨的雨14 小时前
Flutter 框架跨平台鸿蒙开发 —— ListView 控件之高效列表渲染艺术
flutter·华为·harmonyos
行者9614 小时前
Flutter在OpenHarmony平台的文件上传组件深度实践
flutter·harmonyos·鸿蒙
行者9615 小时前
Flutter跨平台开发适配OpenHarmony:进度条组件的深度实践
开发语言·前端·flutter·harmonyos·鸿蒙
cn_mengbei15 小时前
Flutter for OpenHarmony 实战:RangeSlider 范围滑块详解
flutter
奋斗的小青年!!15 小时前
Flutter适配OpenHarmony:打造无缝国际化用户体验的实战指南
flutter·harmonyos·鸿蒙
奋斗的小青年!!15 小时前
Flutter跨平台数据筛选器:深度适配OpenHarmony实战指南
flutter·harmonyos·鸿蒙
恋猫de小郭15 小时前
Tailwind 因为 AI 的裁员“闹剧”结束,而 AI 对开源项目的影响才刚刚开始
前端·flutter·ai编程
奋斗的小青年!!16 小时前
Flutter与OpenHarmony深度协同:SnackBar组件的跨平台适配实战
flutter·harmonyos·鸿蒙
行者9616 小时前
OpenHarmony Flutter跨平台开发:树形视图组件的实践与性能优化
flutter·性能优化·harmonyos·鸿蒙