Merge pull request #22 from autlunatic/master

Additional changes to showCountryOnly are made

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
+@override
-  Widget build(BuildContext context) => new Scaffold(
+ Widget build(BuildContext context) => new Scaffold(
-      body: new Center(
+     body: new Center(
-        child: new CountryCodePicker(
+       child: new CountryCodePicker(
-          onChanged: print,
+         onChanged: print,
-          // Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
+         // Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
-          initialSelection: 'IT',
+         initialSelection: 'IT',
-          favorite: ['+39','FR'],
+         favorite: ['+39','FR'],
-          // optional. Shows only country name and flag
+         // optional. Shows only country name and flag
-          showCountryOnly: false,
+         showCountryOnly: false,
-        ),
+         // optional. Shows only country name and flag when popup is closed.
-      ),
+         showOnlyCountryCodeWhenClosed: false,
-  );
+         // optional. aligns the flag and the Text left
+         alignLeft: false,
+       ),
+     ),
+ );
+
+```
 
- ```
 Note: Your onChanged function can be any function of the type shown below:
 
 ```dart
 (CountryCode)->dynamic
 
 ```
+
 Example:
 
 ```dart
@@ -45,6 +51,6 @@ void _onCountryChange(CountryCode countryCode) {
 
 ```
 
-
 ## 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.

example/lib/main.dart

@@ -21,13 +21,44 @@ class _MyAppState extends State<MyApp> {
             appBar: new AppBar(
               title: const Text('CountryPicker Example'),
             ),
-            body: new Center(
+            body: Center(
-              child: new CountryCodePicker(
+              child: Column(
-                  onChanged: print,
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                  // Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
+                children: <Widget>[
-                  initialSelection: 'IT',
+                  CountryCodePicker(
-                  showCountryOnly: true,
+                      onChanged: print,
-                  favorite: ['+39', 'FR']),
+                      // 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']),
+                    ),
+                  ),
+                ],
+              ),
             )));
   }
 }

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