fl_country_code_picker 0.1.6+1 fl_country_code_picker: ^0.1.6+1 copied to clipboard
A Flutter package for showing a modal that contains country dial code. The user can also search for the available codes and select right from the modal.
fl_country_code_picker #
A Flutter package for showing a modal that contains country dial code. The user can search for the available codes and select right from the modal. Also, it has an automatic scrolling feature that points at current device's locale. Supports localizations!
đ Examples #
đšī¸ Usage #
Instantiate FlCountryCodePicker
class to access the package's functionalities and properties.
You can also pass some optional parameters to customize the picker's view.
/// Default.
final countryPicker = const FlCountryCodePicker();
/// With custom params.
final countryPickerWithParams = const FlCountryCodePicker(
localize: true,
showDialCode: true,
showSearchBar: true,
favoritesIcon: _yourIcon,
favorites: _yourFavorites,
title: _yourModalTitleWidget,
filteredCountries: _yourFilters,
countryTextStyle: _yourCountryTextStyle,
dialCodeTextStyle: _yourdialCodeTextStyle,
searchBarDecoration: _yourInputDecoration,
);
Call the modal for country code picker.
GestureDetector(
onTap: () async {
// Show the country code picker when tapped.
final code = await countryPicker.showPicker(context: context);
// Null check
if (code != null) print(code);
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 8.0, vertical: 4.0),
margin: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(5.0))),
child: Text('Show Picker', style: const TextStyle(color: Colors.white)),
),
),
To enable localization, add the following lines in your MaterialApp
.
MaterialApp(
title: 'Your App',
// Supported locales at the moment.
// Cannot find your locale? Please make a request.
supportedLocales: flc.supportedLocales.map((e) => Locale(e)),
localizationsDelegates: const [
// Package's localization delegate.
CountryLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
// ... some omitted values
);
â FAQ: #
- How to use country code's flag directory in
Image
widget?
Image.asset(
fit: fit,
width: width,
countryCode.flagUri,
alignment: alignment,
package: countryCode.flagImagePackage,
);
- How to change modal's title?
First, Create your title Widget
.
const Widget title = Padding(
padding: EdgeInsets.all(16),
child: Text(
'My Title',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
);
Then pass it to FlCountryCodePicker
's title parameter.
countryPicker = const FlCountryCodePicker(title: title);
đ Bugs/Requests #
If you encounter any problems feel open an issue. If you feel the library is missing a feature, please raise a ticket on Github and we'll look into it. Pull request are also welcome.
đ License #
MIT License