Flutter选择器插件csc_picker_plus的使用

csc_picker_plus

csc_picker_plus 是一个Flutter包，用于以阿拉伯语、英语或根据选择的母语显示国家、州和城市的列表。它还允许用户搜索全球的国家、州和城市。

布局示例	语言示例	垂直布局

国家和州视图	国家视图

新特性

• 首个支持多语言数据库的包：库提供了一个包含多种语言（包括阿拉伯语）支持的国家、州和城市的数据库。
• 双语显示国家和州：可以以阿拉伯语或英语（或如果不可用则为母语）显示国家和州。
• 本地语言显示城市：库允许以国家的本地语言显示城市。
• 双语搜索：可以以阿拉伯语或英语搜索国家和州，提升用户体验。
• 灵活的位置选择：库允许开发者根据需要配置选择过程，使用户可以选择仅国家，或国家和州，或国家、州和城市。
• 可定制的显示选项：可以自定义下拉菜单的设计和外观以适应应用程序的要求。

使用方法

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

CSCPickerPlus(
  countryStateLanguage: CountryStateLanguage.arabic,
  // countryStateLanguage: CountryStateLanguage.englishOrNative,
  onCountryChanged: (value) {
    setState(() {
      countryValue = value;
    });
  },
  onStateChanged: (value) {
    setState(() {
      stateValue = value ?? '';
    });
  },
  onCityChanged: (value) {
    setState(() {
      cityValue = value ?? '';
    });
  },
),

参数说明

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CSC Picker Plus Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'CSC Picker Plus'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// Variables to store country state city data in onChanged method.
  String countryValue = "";
  String stateValue = "";
  String cityValue = "";
  String address = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          height: 600,
          child: Column(
            children: [
              /// Adding CSC Picker Plus Widget in app
              CSCPickerPlus(
                showStates: true,
                showCities: true,
                flagState: CountryFlag.ENABLE,
                countryStateLanguage: CountryStateLanguage.englishOrNative,
                cityLanguage: CityLanguage.native,
                dropdownDecoration: BoxDecoration(
                  borderRadius: const BorderRadius.all(Radius.circular(10)),
                  color: Colors.white,
                  border: Border.all(color: Colors.grey.shade300, width: 1),
                ),
                disabledDropdownDecoration: BoxDecoration(
                  borderRadius: const BorderRadius.all(Radius.circular(10)),
                  color: Colors.grey.shade200,
                  border: Border.all(color: Colors.grey.shade300, width: 1),
                ),
                countryDropdownLabel: "Country",
                stateDropdownLabel: "State",
                cityDropdownLabel: "City",
                selectedItemStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 14,
                ),
                dropdownHeadingStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 17,
                  fontWeight: FontWeight.bold,
                ),
                dropdownItemStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 14,
                ),
                dropdownDialogRadius: 10.0,
                searchBarRadius: 10.0,
                onCountryChanged: (value) {
                  setState(() {
                    countryValue = value;
                  });
                },
                onStateChanged: (value) {
                  if (value != null) {
                    setState(() {
                      stateValue = value;
                    });
                  }
                },
                onCityChanged: (value) {
                  if (value != null) {
                    setState(() {
                      cityValue = value;
                    });
                  }
                },
              ),
              TextButton(
                onPressed: () {
                  setState(() {
                    address = "$cityValue, $stateValue, $countryValue";
                  });
                },
                child: const Text("Print Data"),
              ),
              Text(address),
            ],
          ),
        ),
      ),
    );
  }
}

联系方式

如有任何问题或疑问，请联系：

• 邮箱：eng.hezbr@gmail.com
• GitHub：Hezbr Al-humaidi
• LinkedIn：Hezbr Al-humaidi

特别感谢

特别感谢 Altaf Razzaque 的 csc_picker。