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:
Benni Heiss
2019-03-28 17:27:27 +01:00
parent 7cec16c29d
commit 11645ed088
3 changed files with 80 additions and 26 deletions

View File

@@ -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.

View File

@@ -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']),
),
),
],
),
)));
}
}

View File

@@ -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,