Flutter国际化选择器插件csc_picker_i18n的使用

csc_picker

一个用于显示国家、州和城市的Flutter包。此外，它还允许根据选定的内容选择国家、州和城市列表，并且可以搜索全球范围内的国家、州和城市。

如何使用

要使用此包，请在pubspec.yaml文件中添加csc_picker作为依赖项。

CSCPicker(
  onCountryChanged: (value) {
    setState(() {
      countryValue = value;
    });
  },
  onStateChanged:(value) {
    setState(() {
      stateValue = value;
    });
  },
  onCityChanged:(value) {
    setState(() {
      cityValue = value;
    });
  },
),

你将在onChanged函数中获得反馈。

参数

示例

以下是一个完整的示例代码，展示如何使用csc_picker_i18n进行国际化。

import 'package:csc_picker_i18n/csc_picker.dart';
import 'package:csc_picker_i18n/i18n/country_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

/// 这是一个国家、州和城市选择器的实现。
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CSC Picker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      supportedLocales: [
        Locale("en"), // 英文
        Locale("de"), // 德语
        Locale("ua"), // 乌克兰语
      ],
      locale: Locale("de"), // 默认语言为德语
      localizationsDelegates: [
        CscCountryLocalizations.delegate, // 国际化代理
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: MyHomePage(title: 'CSC Picker'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// 用于存储国家、州和城市数据的变量。
  String countryValue = "";
  String? stateValue = "";
  String? cityValue = "";
  String? address = "";

  [@override](/user/override)
  Widget build(BuildContext context) {
    GlobalKey<CSCPickerState> _cscPickerKey = GlobalKey();

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
            padding: EdgeInsets.symmetric(horizontal: 20),
            height: 600,
            child: Column(
              children: [
                /// 添加CSC选择器小部件到应用中
                CSCPicker(
                  /// 启用或禁用州下拉菜单 [可选参数]
                  showStates: true,

                  /// 启用或禁用城市下拉菜单 [可选参数]
                  showCities: true,

                  /// 启用（与国家名称一起获取标志）/禁用（禁用标志）/仅在下拉菜单中显示标志 [可选参数]
                  flagState: CountryFlag.DISABLE,

                  /// 下拉框装饰以样式化你的下拉选择器 [可选参数]（与disabledDropdownDecoration一起使用）
                  dropdownDecoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(10)),
                      color: Colors.white,
                      border: Border.all(color: Colors.grey.shade300, width: 1)),

                  /// 禁用下拉框装饰以样式化你的下拉选择器 [可选参数]（与disabled下拉Decoration一起使用）
                  disabledDropdownDecoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(10)),
                      color: Colors.grey.shade300,
                      border: Border.all(color: Colors.grey.shade300, width: 1)),

                  /// 搜索框占位符
                  countrySearchPlaceholder: "Country",
                  stateSearchPlaceholder: "State",
                  citySearchPlaceholder: "City",

                  /// 下拉菜单标签
                  countryDropdownLabel: "Country",
                  stateDropdownLabel: "State",
                  cityDropdownLabel: "City",

                  /// 默认国家
                  // defaultCountry: CscCountry.India,

                  /// 禁用国家下拉菜单（注意：需与默认国家一起使用）
                  // disableCountry: true,

                  /// 国家过滤器 [可选参数]
                  // countryFilter: [CscCountry.India, CscCountry.United_States, CscCountry.Canada],

                  /// 所选项样式 [可选参数]
                  selectedItemStyle: TextStyle(
                    color: Colors.black,
                    fontSize: 14,
                  ),

                  /// 下拉对话框标题样式 [可选参数]
                  dropdownHeadingStyle: TextStyle(
                      color: Colors.black,
                      fontSize: 17,
                      fontWeight: FontWeight.bold),

                  /// 下拉对话框项目样式 [可选参数]
                  dropdownItemStyle: TextStyle(
                    color: Colors.black,
                    fontSize: 14,
                  ),

                  /// 对话框圆角 [可选参数]
                  dropdownDialogRadius: 10.0,

                  /// 搜索栏圆角 [可选参数]
                  searchBarRadius: 10.0,

                  /// 当国家被选中时触发
                  onCountryChanged: (value) {
                    setState(() {
                      print("Selected country: ${value}");
                      /// 将值存储到country变量中
                      countryValue = value!;
                    });
                  },

                  /// 当州被选中时触发
                  onStateChanged: (value) {
                    setState(() {
                      /// 将值存储到state变量中
                      stateValue = value;
                    });
                  },

                  /// 当城市被选中时触发
                  onCityChanged: (value) {
                    setState(() {
                      /// 将值存储到city变量中
                      cityValue = value;
                    });
                  },
                ),

                /// 在Text小部件中打印新选择的国家、州和城市
                TextButton(
                    onPressed: () {
                      setState(() {
                        address = "$cityValue, $stateValue, $countryValue";
                      });
                    },
                    child: Text("Print Data")),
                Text(address ?? ""),
              ],
            )),
      ),
    );
  }
}