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)

支持所有平台

相关推荐
国医中兴26 分钟前
Flutter 三方库 ngrouter 鸿蒙适配指南 - 实现高性能扁平化路由导航管理实战
flutter·harmonyos·鸿蒙·openharmony
lpftobetheone1 小时前
【Flutter】如何理解Dart语言的Isolate API
flutter
国医中兴1 小时前
Flutter 三方库 inject_generator 的鸿蒙化适配指南 - 自动化依赖注入注入生成器、驱动鸿蒙大型工程解耦实战
flutter·harmonyos·鸿蒙·openharmony·inject_generator
chdo2 小时前
从需求到实现:Flutter可变宽度滑动器的探索之路
flutter
国医中兴3 小时前
Flutter 三方库 themed_color_palette 的鸿蒙化适配指南 - 定义语义化调色板、在鸿蒙端实现像素级的主题切换实战
flutter·harmonyos·鸿蒙·openharmony·themed_color_palette
不爱吃糖的程序媛3 小时前
2026 年如何上车 Flutter-OH:环境搭建与上手流程
flutter
国医中兴3 小时前
Flutter 三方库 aws_sqs_api 鸿蒙适配指南 - 实现分布式消息异步解耦、在 OpenHarmony 上打造高可用云端队列控制中枢实战
flutter·harmonyos·aws
国医中兴3 小时前
Flutter 三方库 toggleable 鸿蒙适配指南 - 实现声明式状态切换逻辑、在 OpenHarmony 上打造极简交互组件引擎实战
flutter·交互·harmonyos
国医中兴4 小时前
Flutter 三方库 schedules 的鸿蒙化适配指南 - 玩转复杂时间调度算法、构建高效的鸿蒙办公协作系统实战
flutter·harmonyos·鸿蒙·openharmony
ITKEY_4 小时前
flutter打包ipad 并上传Appstore
flutter·ios·ipad