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 小时前
Vue.js——自定义指令
前端·vue.js·flutter
liulian091619 小时前
Flutter 三方库 flutter_local_auth 的鸿蒙化适配指南
flutter·华为·学习方法·harmonyos
qwfy20 小时前
瑞幸 UI 上 pub.dev 了 —— 22 个 Flutter 组件,与微信小程序版双端对齐
flutter·开源
liulian09161 天前
【Flutter for OpenHarmony】原生卡片 Widget 集成实战:从零构建待办清单桌面组件
flutter·华为·学习方法·harmonyos
2601_949593651 天前
Flutter OpenHarmony 三方库 video_player 视频播放器适配详解
flutter·音视频
liulian09161 天前
Flutter 三方库 connectivity_plus 的鸿蒙化适配与网络状态管理实战
网络·flutter·华为·学习方法·harmonyos
MonkeyKing1 天前
InheritedWidget 原理与性能
flutter
liulian09161 天前
【Flutter For OpenHarmony】Flutter 三方库 flutter_secure_storage 的鸿蒙化适配指南
flutter·华为·学习方法·harmonyos
liulian09161 天前
【Flutter For OpenHarmony】Flutter 三方库 flutter_local_notifications 的鸿蒙化适配指南
flutter·华为·学习方法·harmonyos
IntMainJhy1 天前
【Flutter 三方库 Provider 】flutter for open harmony的鸿蒙化适配与实战指南✨
flutter·华为·harmonyos