From 11645ed088a76c949ad9122304c827e746490d79 Mon Sep 17 00:00:00 2001 From: Benni Heiss Date: Thu, 28 Mar 2019 17:27:27 +0100 Subject: [PATCH] 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 --- README.md | 40 ++++++++++++++++++-------------- example/lib/main.dart | 45 ++++++++++++++++++++++++++++++------ lib/country_code_picker.dart | 21 +++++++++++++++-- 3 files changed, 80 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 82169a0..cc6e801 100644 --- a/README.md +++ b/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. diff --git a/example/lib/main.dart b/example/lib/main.dart index 672c493..c4f1d9a 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -21,13 +21,44 @@ class _MyAppState extends State { 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: [ + 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']), + ), + ), + ], + ), ))); } } diff --git a/lib/country_code_picker.dart b/lib/country_code_picker.dart index 9b02493..9262de3 100644 --- a/lib/country_code_picker.dart +++ b/lib/country_code_picker.dart @@ -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 { mainAxisSize: MainAxisSize.min, children: [ 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 { ), ), 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,