Flutter国家选择器插件country_picker_bkb的使用

Flutter国家选择器插件country_picker_bkb的使用

功能

• 该插件用于选择国家、州/省、城市和拨号代码。
• 我们可以选择与其他详细信息相关的数据，也可以独立选择。这意味着我们可以单独使用搜索功能选择国家、州/省、城市。如果同时使用国家、州/省、城市的选取器，则会显示基于所选数据的相关信息。例如，如果我们选择一个国家，那么州/省和城市将根据该国家加载并显示其详细信息。如果我们选择了国家和州/省，则城市信息将仅基于所选国家和州/省。

开始使用

• 在您的pubspec.yaml文件的依赖项中添加以下内容：

country_picker_bkb: version

• 运行以下命令：

flutter pub get

• 在您想要使用的文件中导入该包：

import 'package:country_picker_bkb/country_picker_bkb.dart';

使用方法

您可以使用以下组件作为国家、州/省、城市和拨号代码选择器的小部件，或者单独使用它们：

// 国家选择器小部件
CountryPicker();

// 单独使用各个选择器
MobileNumberCode(required textEditingController);
Country();
StatePicker();
City();

这些选择器将选定的详细信息分别存储在以下ValueNotifier变量中：

ValueNotifier<Country_Model> selectedCountryDetailsForPhoneCode = ValueNotifier(Country_Model());

ValueNotifier<Country_Model> selectedDetailsForCountry = ValueNotifier(Country_Model());

ValueNotifier<State_Model> selectedDetailsForState = ValueNotifier(State_Model());

ValueNotifier<City_Model> selectedDetailsForCity = ValueNotifier(City_Model());

我们可以通过上述变量访问选定的详细信息：

// 调用选择器函数，并传入相应的参数
stateSelect(context, buttonPosition, buttonSize, stateSelectionValueNotifier, countrySelectionValueNotifier);
countrySelect(context, buttonPosition, buttonSize, countrySelectionValueNotifier);
citySelect(context, buttonPosition, buttonSize, city, countrySelectionValueNotifier, stateSelectionValueNotifier);

完整示例Demo

下面是一个完整的示例程序，展示如何在Flutter应用中使用country_picker_bkb插件：

import 'package:flutter/material.dart';
import 'package:country_picker_bkb/country_picker_bkb.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 初始化ValueNotifier变量
  final ValueNotifier<Country_Model> selectedCountryDetailsForPhoneCode = ValueNotifier(Country_Model());
  final ValueNotifier<Country_Model> selectedDetailsForCountry = ValueNotifier(Country_Model());
  final ValueNotifier<State_Model> selectedDetailsForState = ValueNotifier(State_Model());
  final ValueNotifier<City_Model> selectedDetailsForCity = ValueNotifier(City_Model());

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country Picker Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            // 显示选定的国家
            ValueListenableBuilder(
              valueListenable: selectedDetailsForCountry,
              builder: (context, value, child) {
                return Text('Selected Country: ${value.name}');
              },
            ),
            SizedBox(height: 10),
            // 显示选定的州/省
            ValueListenableBuilder(
              valueListenable: selectedDetailsForState,
              builder: (context, value, child) {
                return Text('Selected State: ${value.name}');
              },
            ),
            SizedBox(height: 10),
            // 显示选定的城市
            ValueListenableBuilder(
              valueListenable: selectedDetailsForCity,
              builder: (context, value, child) {
                return Text('Selected City: ${value.name}');
              },
            ),
            SizedBox(height: 20),
            // 国家选择按钮
            ElevatedButton(
              onPressed: () {
                countrySelect(
                  context,
                  Offset(0, 0), // 按钮位置
                  Size(100, 50), // 按钮大小
                  selectedDetailsForCountry,
                );
              },
              child: Text('Select Country'),
            ),
            SizedBox(height: 10),
            // 州/省选择按钮
            ElevatedButton(
              onPressed: () {
                stateSelect(
                  context,
                  Offset(0, 0), // 按钮位置
                  Size(100, 50), // 按钮大小
                  selectedDetailsForState,
                  selectedDetailsForCountry,
                );
              },
              child: Text('Select State'),
            ),
            SizedBox(height: 10),
            // 城市选择按钮
            ElevatedButton(
              onPressed: () {
                citySelect(
                  context,
                  Offset(0, 0), // 按钮位置
                  Size(100, 50), // 按钮大小
                  selectedDetailsForCity,
                  selectedDetailsForCountry,
                  selectedDetailsForState,
                );
              },
              child: Text('Select City'),
            ),
          ],
        ),
      ),
    );
  }
}