Added flagDecoration feature to allow for flexibility in flag design/shape etc

This commit is contained in:
lordvidex
2021-01-23 10:50:56 +03:00
parent 0fe203e8ff
commit 4ea7dc717f
3 changed files with 27 additions and 4 deletions

View File

@@ -49,6 +49,16 @@ class _MyAppState extends State<MyApp> {
onInit: (code) => onInit: (code) =>
print("on init ${code.name} ${code.dialCode} ${code.name}"), print("on init ${code.name} ${code.dialCode} ${code.name}"),
), ),
CountryCodePicker(
onChanged: print,
// Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
initialSelection: 'IT',
favorite: ['+39', 'FR'],
countryFilter: ['IT', 'FR'],
// flag can be styled with BoxDecoration's `borderRadius` and `shape` fields
flagDecoration:
BoxDecoration(borderRadius: BorderRadius.circular(7)),
),
SizedBox( SizedBox(
width: 400, width: 400,
height: 60, height: 60,

View File

@@ -74,6 +74,9 @@ class CountryCodePicker extends StatefulWidget {
/// Set to true if you want to show drop down button /// Set to true if you want to show drop down button
final bool showDropDownButton; final bool showDropDownButton;
/// [BoxDecoration] for the flag image
final Decoration flagDecoration;
CountryCodePicker({ CountryCodePicker({
this.onChanged, this.onChanged,
this.onInit, this.onInit,
@@ -92,6 +95,7 @@ class CountryCodePicker extends StatefulWidget {
this.showFlagDialog, this.showFlagDialog,
this.hideMainText = false, this.hideMainText = false,
this.showFlagMain, this.showFlagMain,
this.flagDecoration,
this.builder, this.builder,
this.flagWidth = 32.0, this.flagWidth = 32.0,
this.enabled = true, this.enabled = true,
@@ -164,8 +168,11 @@ class CountryCodePickerState extends State<CountryCodePicker> {
Flexible( Flexible(
flex: widget.alignLeft ? 0 : 1, flex: widget.alignLeft ? 0 : 1,
fit: widget.alignLeft ? FlexFit.tight : FlexFit.loose, fit: widget.alignLeft ? FlexFit.tight : FlexFit.loose,
child: Padding( child: Container(
padding: widget.alignLeft clipBehavior:
widget.flagDecoration == null ? Clip.none : Clip.hardEdge,
decoration: widget.flagDecoration,
margin: widget.alignLeft
? const EdgeInsets.only(right: 16.0, left: 8.0) ? const EdgeInsets.only(right: 16.0, left: 8.0)
: const EdgeInsets.only(right: 16.0), : const EdgeInsets.only(right: 16.0),
child: Image.asset( child: Image.asset(
@@ -281,6 +288,7 @@ class CountryCodePickerState extends State<CountryCodePicker> {
? widget.showFlagDialog ? widget.showFlagDialog
: widget.showFlag, : widget.showFlag,
flagWidth: widget.flagWidth, flagWidth: widget.flagWidth,
flagDecoration: widget.flagDecoration,
size: widget.dialogSize, size: widget.dialogSize,
backgroundColor: widget.dialogBackgroundColor, backgroundColor: widget.dialogBackgroundColor,
barrierColor: widget.barrierColor, barrierColor: widget.barrierColor,

View File

@@ -12,6 +12,7 @@ class SelectionDialog extends StatefulWidget {
final WidgetBuilder emptySearchBuilder; final WidgetBuilder emptySearchBuilder;
final bool showFlag; final bool showFlag;
final double flagWidth; final double flagWidth;
final Decoration flagDecoration;
final Size size; final Size size;
final bool hideSearch; final bool hideSearch;
final Icon closeIcon; final Icon closeIcon;
@@ -36,6 +37,7 @@ class SelectionDialog extends StatefulWidget {
this.textStyle, this.textStyle,
this.boxDecoration, this.boxDecoration,
this.showFlag, this.showFlag,
this.flagDecoration,
this.flagWidth = 32, this.flagWidth = 32,
this.size, this.size,
this.backgroundColor, this.backgroundColor,
@@ -142,8 +144,11 @@ class _SelectionDialogState extends State<SelectionDialog> {
children: <Widget>[ children: <Widget>[
if (widget.showFlag) if (widget.showFlag)
Flexible( Flexible(
child: Padding( child: Container(
padding: const EdgeInsets.only(right: 16.0), margin: const EdgeInsets.only(right: 16.0),
decoration: widget.flagDecoration,
clipBehavior:
widget.flagDecoration == null ? Clip.none : Clip.hardEdge,
child: Image.asset( child: Image.asset(
e.flagUri, e.flagUri,
package: 'country_code_picker', package: 'country_code_picker',