How does flutter implement province and city selectors?

Preface

When we need users to fill in their addresses, a safe approach is to let users slide to select provinces, cities, and districts through the "wheel". This article uses Flutter's third-party library to implement this function, which is simpler than calling the Amap API.

process

Select library

Here I chose a recently updated library that supports China

Add configuration information

The dependency of pubspec.yaml is added city_pickers: ^1.3.0

Then pub get it

code

Here I have directly prepared a code to call the selector, passing this function directly in onpressed or tapped.

  Future<void> _showCityPicker() async {
    Result? result = await CityPickers.showCityPicker(
      context: context,
    );

    if (result != null) {
      // 使用选择的result
      // city 就是 result.city
    }
  }

In addition, more than just context can be passed into CityPickers.showCityPicker. For details, see the official documentation.

city_pickers | Flutter package (pub.dev)

Support all platforms