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)

支持所有平台

相关推荐
kirk_wang29 分钟前
Flutter tobias 库在鸿蒙端的支付宝支付适配实践
flutter·移动开发·跨平台·arkts·鸿蒙
L、2181 小时前
Flutter + OpenHarmony 分布式能力融合:实现跨设备 UI 共享与协同控制(终极篇)
javascript·分布式·flutter·ui·智能手机·harmonyos
松☆1 小时前
终章:构建完整生态——Flutter + OpenHarmony 分布式应用开发全景指南(含性能调优与发布实践)
flutter·wpf
庄雨山1 小时前
Flutter Bloc 状态管理深度解析与开源鸿蒙 ArkUI 对标分析
flutter·bloc·openharmonyos
松☆1 小时前
终极挑战:Flutter 应用在 OpenHarmony 上实现跨设备无缝流转(Continuation)与软总线协同
flutter·wpf
晚霞的不甘1 小时前
Flutter + OpenHarmony 发布与运维指南:从上架 AppGallery 到线上监控的全生命周期管理
运维·flutter·harmonyos
安卓开发者1 小时前
第三课:Widget核心概念剖析 - Flutter界面构建的基石
flutter
遝靑1 小时前
Flutter 状态管理深度解析:从 Provider 到 Riverpod,再到 Bloc(附选型指南)
flutter
晚霞的不甘1 小时前
Flutter + OpenHarmony 插件开发指南:深度集成原生能力,打造高性能鸿蒙扩展
flutter·华为·harmonyos
庄雨山2 小时前
Flutter Provider 状态管理深度解析与开源鸿蒙 ArkUI 状态管理对比
flutter·provider·openharmonyos