搜索插件、代码仓与 APP 分类

插件详情v0.1.2

ola_like_country_picker

一个用于国家选择器的新Flutter包。ola_like_country_picker提供了一个底部弹出层,允许用户从列表中选择一个国家(带国旗和区号)(可选)。

近 30 天下载
40
喜欢数
19
Pub 分数
40

安装插件

flutter pub add ola_like_country_picker

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,提供用于选择国家的底部弹出窗口,显示国旗和可选的区号。它提供了一个简洁、用户友好的界面,适用于需要输入国际电话号码的表单。该包轻量级,可无缝集成到现有的 Flutter 应用中。支持自定义,并以现代、直观的用户体验为设计目标。

适合场景

  • 国际电话号码输入
  • 用户资料国家选择
  • 多语言应用程序本地化
  • 旅行或运输表单国家选择器
  • 身份验证流程国家选择

主要特点

  • 底部弹出面板 UI
  • 国家旗帜显示
  • 可选的拨号代码支持
  • 可自定义外观
  • 与 Flutter 表单轻松集成
  • 轻量且快速

适合对象

  • 需要国家选择的移动应用
  • 需要电话号码输入的表单
  • 面向全球用户的应用
  • 寻求简单国家选择器的开发者
  • 面向用户界面的 Flutter 项目

使用建议

  • 仅限国家和区号
  • 无内置搜索功能
  • 不支持区域筛选
  • 需要手动处理所选国家的数据
  • 未指定离线模式

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Ola Like Country Picker

A new country picker Flutter package built in Dart.

Introduction

It is Flutter plug-n-play country picker package.

  1. Simple two lines of code. Initialize and Launch.
CountryPicker countryPicker = CountryPicker(
                                onCountrySelected:(country){
                                    print(country);
                                },
                              );
countryPicker.launch(context)

Installation

https://pub.dev/packages/ola_like_country_picker#-installing-tab-

  1. To use the Country Picker look at the example below :
Example Usage:
class _MyHomePageState extends State<MyHomePage> {
  CountryPicker countryPicker;
  Country country = Country.fromJson(countryCodes[0]); // select initial country 

  @override
  void initState() {
    super.initState();
    countryPicker = CountryPicker(onCountrySelected: (Country country) {
      print(country);
      setState(() {
        this.country = country;
      });
    });
  }
  
    @override
  Widget build(BuildContext context) {
    // To simply launch the country picker
    // use countryPicker.launch(context)
    // to forcefully dismiss use countryPicker.dismiss()
    // simple example could be
    return GestureDetector(
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image:
                AssetImage(country.flagUri, package: 'ola_like_country_picker'),
          ),
        ),
      ),
      onTap: () {
        countryPicker.launch(context);
      },
    );

  }  
}
Output
Parameters
parameter default required type remark
onCountrySelected null yes OnCountrySelectedCallback called when country is selected.
showTitle true no bool whether to show title or not.
titleText "Select your country" no String text for title.
  1. To simply use country list view any where use CountryListView() and to modify attributes like flagWidth, flagHeight, countryTitle style etc use below arguments like
CountryListView(flagWidth:50, flagHeight:50 , itemTitleStyle: TextStyle(fontSize:20)); 
Example Usage:
return MaterialApp(
  theme: ThemeData(primarySwatch: Colors.purple),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Select Country'),
    ),
    body: CountryListView(),
  ),
);
Output
Parameters
parameter default required type remark
countryJsonList country_codes no List<Map<String, String>> can be used to specify own set of sublist of countries from the variable country_codes
flagWidth 25 no double width of flag
flagHeight 25 no double height of flag
showFlag true no bool whether to show flag or not
showDialCode true no bool whether to show dial code or not
dialCodePrefix '+' no String The prefix added to the dial code for e.g +91 here prefix is '+'
itemTitleStyle null no TextStyle Used to change style of Country title e.g TextStyle(fontSize:30)
dialCodeStyle null no TextStyle Used to change style of Country's dial code e.g TextStyle(backgroundColor:Colors.green[400])
onSelected null no OnCountrySelectedCallback When Any Country is selected what callback has to be executed e.g CountryListView(onSelected: (Country country){ print(country.toString() });
  1. To use the own version of CountryListView() with CountryPicker() use setCountryListView() method before calling launch() e.g.
    c = CountryPicker(onCountrySelected: (Country country) {
      print(country);
      setState(() {
        this.country = country;
      });
    });
    CountryListView clv = CountryListView(showFlag:false); //own version of CountryListView
    c.setCountryListView(clv);
    ...
    ...
    // Call c.launch(context) in GestureDetector() or other listeners 
    ...
    ...
    

Support

The simplest way to show your support is by giving the project a star.

You can also support by becoming a patron on Patreon:

Patreon

Or by making a single donation by buying a coffee:

Buy Me A Coffee

所属分类

源码仓库

使用此插件的项目

暂无相关数据。