Added own parameter for showOnlyCountryWhenClosed
this is for compatibility to prev 1.1.5 version added alignLeft parameter this aligns the flag and the text left and uses more space added additional examples
This commit is contained in:
40
README.md
40
README.md
@@ -11,29 +11,35 @@ A flutter package for showing a country code selector.
|
||||
|
||||
Just put the component in your application setting the onChanged callback.
|
||||
|
||||
```dart
|
||||
```dart
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => new Scaffold(
|
||||
body: new Center(
|
||||
child: new CountryCodePicker(
|
||||
onChanged: print,
|
||||
// Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
|
||||
initialSelection: 'IT',
|
||||
favorite: ['+39','FR'],
|
||||
// optional. Shows only country name and flag
|
||||
showCountryOnly: false,
|
||||
),
|
||||
),
|
||||
);
|
||||
@override
|
||||
Widget build(BuildContext context) => new Scaffold(
|
||||
body: new Center(
|
||||
child: new CountryCodePicker(
|
||||
onChanged: print,
|
||||
// Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
|
||||
initialSelection: 'IT',
|
||||
favorite: ['+39','FR'],
|
||||
// optional. Shows only country name and flag
|
||||
showCountryOnly: false,
|
||||
// optional. Shows only country name and flag when popup is closed.
|
||||
showOnlyCountryCodeWhenClosed: false,
|
||||
// optional. aligns the flag and the Text left
|
||||
alignLeft: true,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
Note: Your onChanged function can be any function of the type shown below:
|
||||
|
||||
```dart
|
||||
(CountryCode)->dynamic
|
||||
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```dart
|
||||
@@ -42,9 +48,9 @@ void _onCountryChange(CountryCode countryCode) {
|
||||
//Todo : manipulate the selected country code here
|
||||
print("New Country selected: " + countryCode.toString());
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
## Contributions
|
||||
|
||||
Contributions of any kind are more than welcome! Feel free to fork and improve country_code_picker in any way you want, make a pull request, or open an issue.
|
||||
|
||||
@@ -21,13 +21,44 @@ class _MyAppState extends State<MyApp> {
|
||||
appBar: new AppBar(
|
||||
title: const Text('CountryPicker Example'),
|
||||
),
|
||||
body: new Center(
|
||||
child: new CountryCodePicker(
|
||||
onChanged: print,
|
||||
// Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
|
||||
initialSelection: 'IT',
|
||||
showCountryOnly: true,
|
||||
favorite: ['+39', 'FR']),
|
||||
body: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
CountryCodePicker(
|
||||
onChanged: print,
|
||||
// Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
|
||||
initialSelection: 'IT',
|
||||
favorite: ['+39', 'FR']),
|
||||
SizedBox(
|
||||
width: 400,
|
||||
height: 60,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: CountryCodePicker(
|
||||
onChanged: print,
|
||||
initialSelection: 'TF',
|
||||
showCountryOnly: true,
|
||||
showOnlyCountryWhenClosed: true,
|
||||
alignLeft: true,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 400,
|
||||
height: 60,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: CountryCodePicker(
|
||||
onChanged: print,
|
||||
initialSelection: 'TF',
|
||||
showCountryOnly: true,
|
||||
showOnlyCountryWhenClosed: true,
|
||||
favorite: ['+39', 'FR']),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,6 +15,16 @@ class CountryCodePicker extends StatefulWidget {
|
||||
final EdgeInsetsGeometry padding;
|
||||
final bool showCountryOnly;
|
||||
|
||||
/// shows the name of the country instead of the dialcode
|
||||
final bool showOnlyCountryWhenClosed;
|
||||
|
||||
/// aligns the flag and the Text left
|
||||
///
|
||||
/// additionally this option also fills the available space of the widget.
|
||||
/// this is especially usefull in combination with [showOnlyCountryWhenClosed],
|
||||
/// because longer countrynames are displayed in one line
|
||||
final bool alignLeft;
|
||||
|
||||
CountryCodePicker({
|
||||
this.onChanged,
|
||||
this.initialSelection,
|
||||
@@ -22,6 +32,8 @@ class CountryCodePicker extends StatefulWidget {
|
||||
this.textStyle,
|
||||
this.padding = const EdgeInsets.all(0.0),
|
||||
this.showCountryOnly = false,
|
||||
this.showOnlyCountryWhenClosed = false,
|
||||
this.alignLeft = false,
|
||||
});
|
||||
|
||||
@override
|
||||
@@ -55,8 +67,12 @@ class _CountryCodePickerState extends State<CountryCodePicker> {
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
Flexible(
|
||||
flex: widget.alignLeft ? 0 : 1,
|
||||
fit: widget.alignLeft ? FlexFit.tight : FlexFit.loose,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(right: 16.0),
|
||||
padding: widget.alignLeft
|
||||
? const EdgeInsets.only(right: 16.0, left: 8.0)
|
||||
: const EdgeInsets.only(right: 16.0),
|
||||
child: Image.asset(
|
||||
selectedItem.flagUri,
|
||||
package: 'country_code_picker',
|
||||
@@ -65,8 +81,9 @@ class _CountryCodePickerState extends State<CountryCodePicker> {
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
fit: widget.alignLeft ? FlexFit.tight : FlexFit.loose,
|
||||
child: Text(
|
||||
widget.showCountryOnly
|
||||
widget.showOnlyCountryWhenClosed
|
||||
? selectedItem.toCountryStringOnly()
|
||||
: selectedItem.toString(),
|
||||
style: widget.textStyle ?? Theme.of(context).textTheme.button,
|
||||
|
||||
Reference in New Issue
Block a user