Flutter国家与州选择器插件country_state_picker的使用

Flutter国家与州选择器插件country_state_picker的使用

描述

country_state_picker 包提供了一个下拉菜单,用于选择国家和州。它支持根据用户选择的国家动态加载相应的州,并允许在提交表单时进行验证。

特性

  • 选择国家
  • 根据所选国家选择州
  • 提供验证函数,在提交表单时验证国家和州的选择

参数

参数名 是否必需 默认值 类型 描述
onCountryChanged ✅ null Function(String) 处理国家选择
onStateChanged ✅ null Function(String) 处理州选择
flagSize ❌ 22.0 double 输入标签上的国旗大小
listFlagSize ❌ 22.0 double 列表标签上的国旗大小
inputDecoration ❌ – InputDecoration 输入字段样式
hintTextStyle ❌ – TextStyle 输入提示文本样式
itemTextStyle ❌ – TextStyle 下拉项文本样式
dropdownColor ❌ Grey Color 下拉项文本颜色
elevation ❌ 0 int 下拉列表的高度
isExpanded ❌ true bool 确定输入字段是否应填充父宽度
divider ❌ – Widget 在国家和州字段之间创建空间或样式
countryLabel ❌ – Widget 国家字段标签
stateLabel ❌ – Widget 州字段标签
countryHintText ❌ – String 国家字段提示文本
stateHintText ❌ – String 州字段提示文本
noStateFoundText ❌ – String 当选定国家没有州时的提示文本

如何使用

  1. 导入包

    import 'package:country_state_picker/country_state_picker.dart';
    
  2. 提供至少必要的参数

    CountryStatePicker(
      onCountryChanged: (ct) => setState(() {
          country = ct;
          state = null;
        }),
        onStateChanged: (st) => setState(() {
          state = st;
        }),
     )
    

示例代码

以下是一个完整的示例代码,展示了如何在Flutter应用中使用country_state_picker插件:

import 'package:country_state_picker/components/index.dart';
import 'package:flutter/material.dart';

// IMPORT COUNTRY STATE PICKER
import 'package:country_state_picker/country_state_picker.dart';

void main() {
  runApp(const AddressPicker());
}

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

  @override
  State<AddressPicker> createState() => _AddressPickerState();
}

class _AddressPickerState extends State<AddressPicker> {
  // DECLARE STATE VARIABLES
  String? state;
  String? country;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              children: [
                // IMPLEMENT WIDGET
                CountryStatePicker(
                  countryLabel: const Label(title: "País"),
                  stateLabel: const Label(title: "Estado"),
                  onCountryChanged: (ct) => setState(() {
                    country = ct;
                    state = null;
                  }),
                  onStateChanged: (st) => setState(() {
                    state = st;
                  }),
                  // A little Spanish hint
                  countryHintText: "Elige País",
                  stateHintText: "Elige Estado",
                  noStateFoundText: "Ningún Estado",
                ),
                const SizedBox(height: 50),
                if (country != null)
                  Text("Country = $country",
                      style: const TextStyle(fontSize: 18)),
                const SizedBox(height: 40),
                if (state != null)
                  Text("State = $state", style: const TextStyle(fontSize: 18))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这个示例展示了一个简单的地址选择器界面,用户可以从中选择国家和州,并显示所选内容。


更多关于Flutter国家与州选择器插件country_state_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国家与州选择器插件country_state_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用country_state_picker插件的详细代码示例。这个插件允许用户选择国家和对应的州(或省)。

首先,你需要在你的pubspec.yaml文件中添加依赖项:

dependencies:
  flutter:
    sdk: flutter
  country_state_picker: ^2.0.0  # 请注意版本号,使用最新版本

然后,运行flutter pub get来安装依赖项。

接下来是一个完整的Flutter应用程序示例,展示了如何使用country_state_picker插件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Country State Picker 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;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country State Picker Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Selected Country: ${selectedCountry ?? "None"}',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 16),
            Text(
              'Selected State: ${selectedState ?? "None"}',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 32),
            CountryPicker(
              initialSelection: 'US',  // 初始选择的国家
              favorite: ['US', 'IN', 'CN'],  // 收藏的国家
              onChanged: (country) {
                setState(() {
                  selectedCountry = country;
                  selectedState = null;  // 清除之前的州选择
                });
                // 根据选择的国家加载州
                loadStates(country);
              },
              showFlag: true,  // 是否显示国旗
              showSearchBox: true,  // 是否显示搜索框
              pickerTextStyle: TextStyle(fontSize: 16),  // 文本样式
              favoriteTextStyle: TextStyle(fontSize: 16, color: Colors.red),  // 收藏国家的文本样式
              searchTextStyle: TextStyle(fontSize: 16),  // 搜索框的文本样式
            ),
            if (selectedCountry != null)
              StatePicker(
                country: selectedCountry!,
                onChanged: (state) {
                  setState(() {
                    selectedState = state;
                  });
                },
                pickerTextStyle: TextStyle(fontSize: 16),  // 文本样式
              ),
          ],
        ),
      ),
    );
  }

  // 根据选择的国家加载州
  void loadStates(String countryCode) {
    // 在这里你可以使用API或本地数据来加载州
    // 例如,这里我们假设有一些硬编码的数据
    final statesMap = {
      'US': ['California', 'Texas', 'Florida'],
      'IN': ['Uttar Pradesh', 'Maharashtra', 'Bihar'],
      'CN': ['Beijing', 'Shanghai', 'Guangdong'],
      // 添加更多的国家和州数据...
    };

    // 根据选择的国家设置州选择器
    if (statesMap.containsKey(countryCode)) {
      // 注意:这里的实现是假设StatePicker组件会重新构建或更新,
      // 实际上你可能需要一个更好的方法来动态更新StatePicker的选项。
      // 这里只是为了演示目的。
      // 在实际项目中,你可能需要使用Provider、Riverpod或其他状态管理库。
    }
  }
}

注意:

  1. 示例中的loadStates函数假设了一些硬编码的国家和州数据。在实际应用中,你可能需要通过API调用或其他方式动态获取这些数据。
  2. 由于StatePicker组件在示例中并没有直接提供更新选项的方法,你可能需要使用更高级的状态管理解决方案(如Provider、Riverpod等)来确保组件能够响应国家和州数据的更改。

希望这个示例能帮助你理解如何在Flutter项目中使用country_state_picker插件!

回到顶部