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,