搜尋套件、儲存庫與 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

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。