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)

支持所有平台

相关推荐
晚霞的不甘15 小时前
社区、标准与未来:共建 Flutter 与 OpenHarmony 融合生态的可持续发展路径
安全·flutter·ui·架构
走在路上的菜鸟15 小时前
Android学Dart学习笔记第十一节 错误处理
android·笔记·学习·flutter
QuantumLeap丶16 小时前
《Flutter全栈开发实战指南:从零到高级》- 22 -插件开发与原生交互
android·flutter·ios
kirk_wang16 小时前
鸿蒙UI组件与Flutter Widget混合开发:原理、实践与踩坑指南
flutter·移动开发·跨平台·arkts·鸿蒙
西西学代码17 小时前
flutter---进度条(2)
前端·javascript·flutter
QuantumLeap丶17 小时前
《Flutter全栈开发实战指南:从零到高级》- 21 -响应式设计与适配
android·javascript·flutter·ios·前端框架
晚霞的不甘17 小时前
实战精要:构建企业级 Flutter + OpenHarmony 工业物联网(IIoT)监控平台
物联网·flutter
等你等了那么久17 小时前
Flutter路由3分钟学会
flutter·dart
百分三十七17 小时前
最新的 Dart sdk 安装教程
flutter·dart
赵财猫._.17 小时前
【Flutter x 鸿蒙】第三篇:鸿蒙特色UI组件与Flutter的融合使用
flutter·ui·harmonyos