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)

支持所有平台

相关推荐
行者961 天前
Flutter适配OpenHarmony:国际化i18n实现中的常见陷阱与解决方案
开发语言·javascript·flutter·harmonyos·鸿蒙
wey6081 天前
fiuckjs 基于react的flutter动态化方案
flutter
行者961 天前
Flutter在鸿蒙平台实现自适应步骤条组件的完整指南
flutter·harmonyos·鸿蒙
行者961 天前
Flutter与OpenHarmony深度整合:打造高性能自定义图表组件
flutter·harmonyos·鸿蒙
行者961 天前
Flutter适配OpenHarmony:高效数据筛选组件的设计与实现
开发语言·前端·flutter·harmonyos·鸿蒙
yujunlong39191 天前
Dart Frog 后端开发实战:轻量级 API 构建与生产环境调优
flutter·dart·dart frog
Swuagg1 天前
Flutter 探索入门
flutter
kirk_wang1 天前
当Flutter的并发利器遇上鸿蒙:flutter_isolate的OHOS适配之旅
flutter·移动开发·跨平台·arkts·鸿蒙
AiFlutter1 天前
五、交互行为(01):按钮
flutter·低代码·低代码平台·aiflutter·aiflutter低代码
kirk_wang1 天前
Flutter艺术探索-Flutter表单组件:TextField与验证处理
flutter·移动开发·flutter教程·移动开发教程