Flutter国家、州/省、城市选择器插件country_state_city_picker_2的使用

当然，下面是一个关于如何使用 country_state_city_picker_2 Flutter 插件的示例代码。这个插件允许用户选择国家、州/省和城市。以下是一个简单的示例，展示如何在 Flutter 应用中实现这个功能。

首先，确保你的 pubspec.yaml 文件中已经添加了 country_state_city_picker_2 依赖：

dependencies:
  flutter:
    sdk: flutter
  country_state_city_picker_2: ^latest_version  # 请替换为最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中，你可以使用以下代码来实现选择器：

import 'package:flutter/material.dart';
import 'package:country_state_city_picker_2/country_state_city_picker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String selectedCountry = '';
  String selectedState = '';
  String selectedCity = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country, State, City Picker Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Selected Country: $selectedCountry'),
            SizedBox(height: 16),
            Text('Selected State: $selectedState'),
            SizedBox(height: 16),
            Text('Selected City: $selectedCity'),
            SizedBox(height: 32),
            ElevatedButton(
              onPressed: () async {
                final result = await showModalBottomSheet<Map<String, dynamic>>(
                  context: context,
                  builder: (context) {
                    return CountryStateCityPicker(
                      onCountryStateChanged: (country) {
                        setState(() {
                          selectedCountry = country!;
                        });
                      },
                      onStateChanged: (state) {
                        setState(() {
                          selectedState = state!;
                        });
                      },
                      onCityChanged: (city) {
                        setState(() {
                          selectedCity = city!;
                        });
                      },
                      favorite: [],
                      search: false,
                      selectedCountry: selectedCountry,
                      selectedState: selectedState,
                      selectedCity: selectedCity,
                    );
                  },
                );

                if (result != null) {
                  setState(() {
                    selectedCountry = result['country'] ?? '';
                    selectedState = result['state'] ?? '';
                    selectedCity = result['city'] ?? '';
                  });
                }
              },
              child: Text('Select Country, State, City'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

1. 依赖引入：

   • 在 pubspec.yaml 文件中添加 country_state_city_picker_2 依赖。

2. 主应用：

   • MyApp 是应用的根 widget。
   • MyHomePage 是包含选择器的主要页面。

3. 状态管理：

   • 使用 StatefulWidget 来管理选中的国家、州/省和城市。

4. UI 构建：

   • 使用 Column 来排列文本和按钮。
   • ElevatedButton 用于触发选择器。

5. 选择器：

   • 使用 showModalBottomSheet 显示选择器。
   • CountryStateCityPicker widget 用于显示国家、州/省和城市的选择界面。
   • 通过回调函数 onCountryStateChanged、onStateChanged 和 onCityChanged 更新选中的值。

6. 结果处理：

   • 如果选择器返回结果，则更新状态中的选中值。

运行这个示例代码，你将会看到一个简单的界面，允许用户选择国家、州/省和城市，并在界面上显示选中的值。