Flutter颜色选择器插件csc_picker的使用

Flutter颜色选择器插件csc_picker的使用

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

如何使用

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

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

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

参数

示例

import 'package:csc_picker/csc_picker.dart';
import 'package:flutter/material.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,
      ),
      home: MyHomePage(title: 'CSC Picker'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  /// 在onChanged方法中存储国家、州、城市数据的变量。
  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 Picker组件到应用中
                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 dropdownDecoration`一起使用）
                  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,

                  /// 国家过滤器 [可选参数]
                  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(() {
                      /// 存储值到country变量
                      countryValue = value;
                    });
                  },

                  /// 当在下拉框中选择州时触发
                  onStateChanged: (value) {
                    setState(() {
                      /// 存储值到state变量
                      stateValue = value;
                    });
                  },

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

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