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)

支持所有平台

相关推荐
zilikew7 小时前
Flutter框架跨平台鸿蒙开发——今日吃啥APP的开发流程
flutter·华为·harmonyos·鸿蒙
Whisper_Sy7 小时前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 应用列表实现
android·开发语言·javascript·flutter·php
血色橄榄枝8 小时前
03 基于Flutter集成网络请求On OpenHarmony
网络·flutter
小风呼呼吹儿8 小时前
Flutter 框架跨平台鸿蒙开发 - 虚拟拼豆图纸查看应用开发教程
flutter·华为·harmonyos
IT陈图图9 小时前
Flutter × OpenHarmony 跨端实践:从零构建一个轻量级视频播放器
flutter·音视频·鸿蒙·openharmony
Miguo94well9 小时前
Flutter框架跨平台鸿蒙开发——戒拖延APP的开发流程
flutter·华为·harmonyos·鸿蒙
2601_949480069 小时前
Flutter for OpenHarmony 音乐播放器App实战 - 主题设置实现
windows·flutter
小风呼呼吹儿10 小时前
Flutter 框架跨平台鸿蒙开发 - 虚拟红包雨应用开发教程
flutter·华为·harmonyos
2501_9445215913 小时前
Flutter for OpenHarmony 微动漫App实战:主题配置实现
android·开发语言·前端·javascript·flutter·ecmascript
时光慢煮14 小时前
Flutter × OpenHarmony 跨端开发实战:动态显示菜单详解
flutter·华为·开源·openharmony