Flutter城市选择器插件city_pickers的使用

city_pickers

中国的城市三级联动选择器，提供多种选择方式，方便用户在应用中选择省市区信息。

Demo

• 在线演示

沟通QQ群

QQ 群号码: 935915271

开始

在flutter的项目文件中增加依赖：

dependencies:
  ...
  city_pickers: ^1.1.0

关于如何运行flutter项目，请参考官方文档。

使用方法

简单使用方法如下：

import 'package:city_pickers/city_pickers.dart';

Future<Result?> getResult() async {
  // 呼出弹出层,显示多级选择器
  Result? result = await CityPickers.showCityPicker(
    context: context,
  );

  // 呼出一层界面, 显示多级选择器
  Result? result2 = await CityPickers.showFullPageCityPicker(
    context: context,
  );

  // 呼出一层, 显示支持字母定位城市选择器
  Result? result3 = await CityPickers.showCitiesSelector(
    context: context,
  );

  return result;
}

CityPickers 静态方法

showCityPicker 参数说明

showFullPageCityPicker 参数说明

showCitiesSelector 参数说明

utils 说明

utils 是用来封装常用的一些方法，方便使用者能更好地使用该插件。使用者通过以下方式声明实例，可以获取所有的工具类方法：

// 声明实例
CityPickerUtil cityPickerUtils = CityPickers.utils();

方法示例

print('result>>> ${cityPickerUtils.getAreaResultByCode('100100')}');

// 输出为: result>>> {"provinceName":"北京市","provinceId":"110000","cityName":"东城区","cityId":"110101"}

数据来源

• 国家统计局

贡献者

贡献者列表

声明

本项目Example部分代码与样式, 参考借鉴Flutter Go，flutter go 是flutter 开发者帮助 APP，包含 flutter 常用 140+ 组件的demo 演示与中文文档

To Do List

• ✅ 城市选择器, 借鉴点评
• ✅ 支持拼音等模糊搜索
• ❌ 加入单元测试

示例代码

以下是完整的示例代码，展示了如何集成和使用 city_pickers 插件。

import 'package:flutter/material.dart';
import 'src/item_container.dart';
import 'view/show_city_picker.dart';
import 'view/wip.dart';
import 'view/show_full_page_picker.dart';
import 'view/util_getLocationInfo.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var useMaterial3 = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: Color(0xFFC91B3A),
          background: Color(0xFFEFEFEF),
          secondary: Color(0xFF888888),
        ),
        textTheme: const TextTheme(
          bodyMedium: TextStyle(color: Color(0xFF888888), fontSize: 16.0),
        ),
        useMaterial3: useMaterial3,
      ),
      darkTheme: ThemeData.dark().copyWith(
        primaryColor: const Color(0xFFC91B3A),
      ),
      themeMode: ThemeMode.system,
      title: 'Welcome to Flutter',
      debugShowCheckedModeBanner: false,
      routes: <String, WidgetBuilder>{
        '/name': (_) => const ShowCityPicker(),
        '/full_page': (_) => const ShowFullPageCityPicker(),
        '/city_select': (_) => const WorkInProgress(),
        '/util_getLocationInfo': (_) => const UtilGetLocationInfo()
      },
      home: Body(
        useMaterial3: useMaterial3,
        onUseMaterial3Changed: (v) => setState(
          () {
            useMaterial3 = v;
          },
        ),
      ),
    );
  }
}

class Body extends StatelessWidget {
  const Body({
    Key? key,
    required this.useMaterial3,
    required this.onUseMaterial3Changed,
  }) : super(key: key);

  final bool useMaterial3;
  final ValueChanged<bool> onUseMaterial3Changed;

  static final List _demoList = [
    {"icon": Icons.place, "name": "ios选择器", "routerName": '/name'},
    {"icon": Icons.fullscreen, "name": "三级全屏选择器", "routerName": '/full_page'},
    {
      "icon": Icons.location_city,
      "name": "城市选择器",
      "routerName": '/city_select'
    },
    {
      "icon": Icons.location_city,
      "name": "内置工具类",
      "routerName": '/util_getLocationInfo'
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('CityPickers Examples'),
          actions: [
            Tooltip(
              message: 'useMaterial3',
              child: Switch(
                value: useMaterial3,
                onChanged: onUseMaterial3Changed,
              ),
            )
          ],
        ),
        body: ItemContainer(
          itemList: _demoList,
        ));
  }
}

以上内容涵盖了 city_pickers 插件的安装、使用方法以及一些高级配置，希望能帮助你快速上手并应用到项目中。如果你有任何问题或建议，欢迎随时提问！