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)

支持所有平台

相关推荐
MonkeyKing2 小时前
三棵树彻底拆解(Widget / Element / RenderObject)
flutter·dart
Lanren的编程日记5 小时前
Flutter 鸿蒙应用错误处理优化实战:完善全局异常捕获,全方位提升应用稳定性
flutter·华为·harmonyos
Lanren的编程日记5 小时前
Flutter鸿蒙应用开发:网络请求优化实战,全方位提升请求稳定性与性能
网络·flutter·harmonyos
IntMainJhy5 小时前
【futter for open harmony】Flutter 鸿蒙聊天应用实战:shared_preferences 本地键值存储适配指南[特殊字符]
flutter·华为·harmonyos
IntMainJhy6 小时前
【Flutter for OpenHarmony 】第三方库鸿蒙电商实战|首页模块完整实现[特殊字符]
flutter·华为·harmonyos
梦想不只是梦与想6 小时前
flutter 与原生通信的底层原理(二)
flutter
Lanren的编程日记6 小时前
Flutter 鸿蒙应用离线模式实战:无网络也能流畅使用
网络·flutter·harmonyos
IntMainJhy7 小时前
【Flutter for OpenHarmony 】第三方库 聊天应用:Provider 状态管理实战指南
flutter·华为·harmonyos
IntMainJhy7 小时前
【futter for open harmony】Flutter 聊天应用实战:Material Design 3 全局 UI 规范落地指南✨
flutter·华为·harmonyos
IntMainJhy7 小时前
【flutter for open harmony】Flutter 聊天应用实战:go_router 路由管理完全实现指南
flutter·华为·harmonyos