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)

支持所有平台

相关推荐
2401_zq136y034 小时前
Flutter for OpenHarmony:从零搭建今日资讯App(三十)错误处理与异常管理
flutter
2401_zq136y035 小时前
Flutter for OpenHarmony:从零搭建今日资讯App(二十六)本地存储实现
flutter
2401_882351526 小时前
Flutter for OpenHarmony 商城App实战 - 会员中心实现
windows·flutter
鸣弦artha7 小时前
Flutter框架跨平台鸿蒙开发——Widget体系概览
flutter·华为·harmonyos
南村群童欺我老无力.7 小时前
Flutter 框架跨平台鸿蒙开发 - 打造安全可靠的密码生成器,支持强度检测与历史记录
flutter·华为·typescript·harmonyos
鸣弦artha8 小时前
Flutter 框架跨平台鸿蒙开发——Flutter引擎层架构概览
flutter·架构·harmonyos
时光慢煮10 小时前
基于 Flutter × OpenHarmony 图书馆管理系统之构建搜索栏
flutter·华为·开源·openharmony
kirk_wang10 小时前
Flutter艺术探索-Flutter生命周期:State生命周期详解
flutter·移动开发·flutter教程·移动开发教程
鸣弦artha11 小时前
Flutter框架跨平台鸿蒙开发——Build流程深度解析
开发语言·javascript·flutter
鸣弦artha11 小时前
Flutter框架跨平台鸿蒙开发——StatelessWidget基础
flutter·华为·harmonyos