maobo/CountryCodePicker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed the Issue #43.

Browse Source 
Country name attached to flag, no padding, in RTL languages SearchDialog #43

RTL language issue
This commit is contained in:
Nilashish Roy
2024-12-14 12:34:55 +06:00
parent 08161e43b5
commit c127e4a882
3 changed files with 66 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
example/lib/main.dart
View File

@@ -104,17 +104,14 @@ class MyAppState extends State<MyApp> {
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: const ['+39', 'FR'],
countryFilter: const ['IT', 'FR'],
showFlagDialog: false,
//You can set the margin between the flag and the country name to your taste. //You can set the margin between the flag and the country name to your taste.
margin: const EdgeInsets.symmetric(horizontal: 6), margin: const EdgeInsets.symmetric(horizontal: 6),
comparator: (a, b) => b.name!.compareTo(a.name!), comparator: (a, b) => b.name!.compareTo(a.name!),
//Get the country information relevant to the initial selection //Get the country information relevant to the initial selection
onInit: (code) => debugPrint( onInit: (code) => debugPrint("on init ${code?.name} ${code?.dialCode} ${code?.name}"),
"on init ${code?.name} ${code?.dialCode} ${code?.name}"),
), ),
CountryCodePicker( CountryCodePicker(
hideHeaderText: true,
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',

82
lib/country_code_picker.dart
View File

@@ -93,6 +93,21 @@ class CountryCodePicker extends StatefulWidget {
final EdgeInsetsGeometry searchPadding; final EdgeInsetsGeometry searchPadding;
///Use This To Hide The Header Text
final bool hideHeaderText;
///Change The Header Text
final String? headerText;
///Header Text Style
final TextStyle headerTextStyle;
///Header Text Padding
final EdgeInsets topBarPadding;
///Header Text Alignment
final MainAxisAlignment headerAlignment;
const CountryCodePicker({ const CountryCodePicker({
this.onChanged, this.onChanged,
this.onInit, this.onInit,
@@ -129,9 +144,13 @@ class CountryCodePicker extends StatefulWidget {
this.dialogBackgroundColor, this.dialogBackgroundColor,
this.closeIcon = const Icon(Icons.close), this.closeIcon = const Icon(Icons.close),
this.countryList = codes, this.countryList = codes,
this.dialogItemPadding = this.dialogItemPadding = const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
this.searchPadding = const EdgeInsets.symmetric(horizontal: 24), this.searchPadding = const EdgeInsets.symmetric(horizontal: 24),
this.headerAlignment = MainAxisAlignment.spaceBetween,
this.headerText = "Select County",
this.headerTextStyle = const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
this.hideHeaderText = false,
this.topBarPadding = const EdgeInsets.symmetric(vertical: 5.0, horizontal: 20),
Key? key, Key? key,
}) : super(key: key); }) : super(key: key);
@@ -140,22 +159,15 @@ class CountryCodePicker extends StatefulWidget {
State<StatefulWidget> createState() { State<StatefulWidget> createState() {
List<Map<String, String>> jsonList = countryList; List<Map<String, String>> jsonList = countryList;
List<CountryCode> elements = List<CountryCode> elements = jsonList.map((json) => CountryCode.fromJson(json)).toList();
jsonList.map((json) => CountryCode.fromJson(json)).toList();
if (comparator != null) { if (comparator != null) {
elements.sort(comparator); elements.sort(comparator);
} }
if (countryFilter != null && countryFilter!.isNotEmpty) { if (countryFilter != null && countryFilter!.isNotEmpty) {
final uppercaseCustomList = final uppercaseCustomList = countryFilter!.map((criteria) => criteria.toUpperCase()).toList();
countryFilter!.map((criteria) => criteria.toUpperCase()).toList(); elements = elements.where((criteria) => uppercaseCustomList.contains(criteria.code) || uppercaseCustomList.contains(criteria.name) || uppercaseCustomList.contains(criteria.dialCode)).toList();
elements = elements
.where((criteria) =>
uppercaseCustomList.contains(criteria.code) ||
uppercaseCustomList.contains(criteria.name) ||
uppercaseCustomList.contains(criteria.dialCode))
.toList();
} }
return CountryCodePickerState(elements); return CountryCodePickerState(elements);
@@ -186,21 +198,14 @@ class CountryCodePickerState extends State<CountryCodePicker> {
direction: Axis.horizontal, direction: Axis.horizontal,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
if (widget.showFlagMain != null if (widget.showFlagMain != null ? widget.showFlagMain! : widget.showFlag)
? widget.showFlagMain!
: widget.showFlag)
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: Container( child: Container(
clipBehavior: widget.flagDecoration == null clipBehavior: widget.flagDecoration == null ? Clip.none : Clip.hardEdge,
? Clip.none
: Clip.hardEdge,
decoration: widget.flagDecoration, decoration: widget.flagDecoration,
margin: widget.margin ?? margin: widget.margin ?? (widget.alignLeft ? const EdgeInsets.only(right: 16.0, left: 8.0) : const EdgeInsets.only(right: 16.0)),
(widget.alignLeft
? const EdgeInsets.only(right: 16.0, left: 8.0)
: const EdgeInsets.only(right: 16.0)),
child: Image.asset( child: Image.asset(
selectedItem!.flagUri!, selectedItem!.flagUri!,
package: 'country_code_picker', package: 'country_code_picker',
@@ -212,11 +217,8 @@ class CountryCodePickerState extends State<CountryCodePicker> {
Flexible( Flexible(
fit: widget.alignLeft ? FlexFit.tight : FlexFit.loose, fit: widget.alignLeft ? FlexFit.tight : FlexFit.loose,
child: Text( child: Text(
widget.showOnlyCountryWhenClosed widget.showOnlyCountryWhenClosed ? selectedItem!.toCountryStringOnly() : selectedItem.toString(),
? selectedItem!.toCountryStringOnly() style: widget.textStyle ?? Theme.of(context).textTheme.labelLarge,
: selectedItem.toString(),
style: widget.textStyle ??
Theme.of(context).textTheme.labelLarge,
overflow: widget.textOverflow, overflow: widget.textOverflow,
), ),
), ),
@@ -225,9 +227,7 @@ class CountryCodePickerState extends State<CountryCodePicker> {
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: Padding(
padding: (widget.alignLeft padding: (widget.alignLeft ? const EdgeInsets.only(right: 16.0, left: 8.0) : const EdgeInsets.only(right: 16.0)),
? const EdgeInsets.only(right: 16.0, left: 8.0)
: const EdgeInsets.only(right: 16.0)),
child: Icon( child: Icon(
Icons.arrow_drop_down, Icons.arrow_drop_down,
color: Colors.grey, color: Colors.grey,
@@ -258,11 +258,9 @@ class CountryCodePickerState extends State<CountryCodePicker> {
if (widget.initialSelection != null) { if (widget.initialSelection != null) {
selectedItem = elements.firstWhere( selectedItem = elements.firstWhere(
(criteria) => (criteria) =>
(criteria.code!.toUpperCase() == (criteria.code!.toUpperCase() == widget.initialSelection!.toUpperCase()) ||
widget.initialSelection!.toUpperCase()) ||
(criteria.dialCode == widget.initialSelection) || (criteria.dialCode == widget.initialSelection) ||
(criteria.name!.toUpperCase() == (criteria.name!.toUpperCase() == widget.initialSelection!.toUpperCase()),
widget.initialSelection!.toUpperCase()),
orElse: () => elements[0]); orElse: () => elements[0]);
} else { } else {
selectedItem = elements[0]; selectedItem = elements[0];
@@ -278,11 +276,9 @@ class CountryCodePickerState extends State<CountryCodePicker> {
if (widget.initialSelection != null) { if (widget.initialSelection != null) {
selectedItem = elements.firstWhere( selectedItem = elements.firstWhere(
(item) => (item) =>
(item.code!.toUpperCase() == (item.code!.toUpperCase() == widget.initialSelection!.toUpperCase()) ||
widget.initialSelection!.toUpperCase()) ||
(item.dialCode == widget.initialSelection) || (item.dialCode == widget.initialSelection) ||
(item.name!.toUpperCase() == (item.name!.toUpperCase() == widget.initialSelection!.toUpperCase()),
widget.initialSelection!.toUpperCase()),
orElse: () => elements[0]); orElse: () => elements[0]);
} else { } else {
selectedItem = elements[0]; selectedItem = elements[0];
@@ -290,10 +286,7 @@ class CountryCodePickerState extends State<CountryCodePicker> {
favoriteElements = elements favoriteElements = elements
.where((item) => .where((item) =>
widget.favorite.firstWhereOrNull((criteria) => widget.favorite.firstWhereOrNull((criteria) => item.code!.toUpperCase() == criteria.toUpperCase() || item.dialCode == criteria || item.name!.toUpperCase() == criteria.toUpperCase()) !=
item.code!.toUpperCase() == criteria.toUpperCase() ||
item.dialCode == criteria ||
item.name!.toUpperCase() == criteria.toUpperCase()) !=
null) null)
.toList(); .toList();
} }
@@ -316,6 +309,11 @@ class CountryCodePickerState extends State<CountryCodePicker> {
showFlag: widget.showFlagDialog ?? widget.showFlag, showFlag: widget.showFlagDialog ?? widget.showFlag,
flagWidth: widget.flagWidth, flagWidth: widget.flagWidth,
size: widget.dialogSize, size: widget.dialogSize,
headerAlignment: widget.headerAlignment,
headerText: widget.headerText,
headerTextStyle: widget.headerTextStyle,
hideHeaderText: widget.hideHeaderText,
topBarPadding: widget.topBarPadding,
backgroundColor: widget.dialogBackgroundColor, backgroundColor: widget.dialogBackgroundColor,
barrierColor: widget.barrierColor, barrierColor: widget.barrierColor,
hideSearch: widget.hideSearch, hideSearch: widget.hideSearch,

60
lib/src/selection_dialog.dart
View File

@@ -10,20 +10,20 @@ class SelectionDialog extends StatefulWidget {
final InputDecoration searchDecoration; final InputDecoration searchDecoration;
final TextStyle? searchStyle; final TextStyle? searchStyle;
final TextStyle? textStyle; final TextStyle? textStyle;
final TextStyle? headerTextStyle; final TextStyle headerTextStyle;
final BoxDecoration? boxDecoration; final BoxDecoration? boxDecoration;
final WidgetBuilder? emptySearchBuilder; final WidgetBuilder? emptySearchBuilder;
final bool? showFlag; final bool? showFlag;
final double flagWidth; final double flagWidth;
final String? headerText;
final Decoration? flagDecoration; final Decoration? flagDecoration;
final Size? size; final Size? size;
final bool hideSearch; final bool hideSearch;
final bool hideCloseIcon; final bool hideCloseIcon;
final bool hideHeaderText;
final Icon? closeIcon; final Icon? closeIcon;
final EdgeInsets? topBarPadding; final bool hideHeaderText;
final MainAxisAlignment? headerAlignment; final String? headerText;
final EdgeInsets topBarPadding;
final MainAxisAlignment headerAlignment;
/// Background color of SelectionDialog /// Background color of SelectionDialog
final Color? backgroundColor; final Color? backgroundColor;
@@ -43,15 +43,14 @@ class SelectionDialog extends StatefulWidget {
this.favoriteElements, { this.favoriteElements, {
Key? key, Key? key,
this.showCountryOnly, this.showCountryOnly,
this.hideHeaderText = true, required this.hideHeaderText,
this.emptySearchBuilder,this.headerAlignment = MainAxisAlignment.spaceBetween, this.emptySearchBuilder,
this.headerTextStyle = required this.headerAlignment,
const TextStyle(fontSize: 18, fontWeight: FontWeight.bold), required this.headerTextStyle,
InputDecoration searchDecoration = const InputDecoration(), InputDecoration searchDecoration = const InputDecoration(),
this.searchStyle, this.searchStyle,
this.textStyle, this.textStyle,
this.topBarPadding = required this.topBarPadding,
const EdgeInsets.symmetric(vertical: 5.0, horizontal: 20),
this.headerText, this.headerText,
this.boxDecoration, this.boxDecoration,
this.showFlag, this.showFlag,
@@ -63,12 +62,9 @@ class SelectionDialog extends StatefulWidget {
this.hideSearch = false, this.hideSearch = false,
this.hideCloseIcon = false, this.hideCloseIcon = false,
this.closeIcon, this.closeIcon,
this.dialogItemPadding = this.dialogItemPadding = const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
this.searchPadding = const EdgeInsets.symmetric(horizontal: 24), this.searchPadding = const EdgeInsets.symmetric(horizontal: 24),
}) : searchDecoration = searchDecoration.prefixIcon == null }) : searchDecoration = searchDecoration.prefixIcon == null ? searchDecoration.copyWith(prefixIcon: const Icon(Icons.search)) : searchDecoration,
? searchDecoration.copyWith(prefixIcon: const Icon(Icons.search))
: searchDecoration,
super(key: key); super(key: key);
@override @override
@@ -85,8 +81,7 @@ class _SelectionDialogState extends State<SelectionDialog> {
child: Container( child: Container(
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
width: widget.size?.width ?? MediaQuery.of(context).size.width, width: widget.size?.width ?? MediaQuery.of(context).size.width,
height: height: widget.size?.height ?? MediaQuery.of(context).size.height * 0.85,
widget.size?.height ?? MediaQuery.of(context).size.height * 0.85,
decoration: widget.boxDecoration ?? decoration: widget.boxDecoration ??
BoxDecoration( BoxDecoration(
color: widget.backgroundColor ?? Colors.white, color: widget.backgroundColor ?? Colors.white,
@@ -105,13 +100,13 @@ class _SelectionDialogState extends State<SelectionDialog> {
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
children: [ children: [
Padding( Padding(
padding: widget.topBarPadding, padding:!widget.hideHeaderText? widget.topBarPadding: EdgeInsets.zero,
child: Row( child: Row(
mainAxisAlignment:widget.headerAlignment, mainAxisAlignment: widget.headerAlignment,
children: [ children: [
!widget.hideHeaderText !widget.hideHeaderText && widget.headerText != null
? Text( ? Text(
widget.headerText, widget.headerText!,
overflow: TextOverflow.fade, overflow: TextOverflow.fade,
style: widget.headerTextStyle, style: widget.headerTextStyle,
) )
@@ -182,10 +177,11 @@ class _SelectionDialogState extends State<SelectionDialog> {
if (widget.showFlag!) if (widget.showFlag!)
Flexible( Flexible(
child: Container( child: Container(
margin: const EdgeInsets.only(right: 16.0), margin: Directionality.of(context) == TextDirection.ltr // Here Adding padding depending on the locale language direction
? const EdgeInsets.only(right: 16.0)
: const EdgeInsets.only(left: 16.0),
decoration: widget.flagDecoration, decoration: widget.flagDecoration,
clipBehavior: clipBehavior: widget.flagDecoration == null ? Clip.none : Clip.hardEdge,
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',
@@ -196,9 +192,7 @@ class _SelectionDialogState extends State<SelectionDialog> {
Expanded( Expanded(
flex: 4, flex: 4,
child: Text( child: Text(
widget.showCountryOnly! widget.showCountryOnly! ? e.toCountryStringOnly() : e.toLongString(),
? e.toCountryStringOnly()
: e.toLongString(),
overflow: TextOverflow.fade, overflow: TextOverflow.fade,
style: widget.textStyle, style: widget.textStyle,
), ),
@@ -214,8 +208,7 @@ class _SelectionDialogState extends State<SelectionDialog> {
} }
return Center( return Center(
child: Text(CountryLocalizations.of(context)?.translate('no_country') ?? child: Text(CountryLocalizations.of(context)?.translate('no_country') ?? 'No country found'),
'No country found'),
); );
} }
@@ -228,12 +221,7 @@ class _SelectionDialogState extends State<SelectionDialog> {
void _filterElements(String s) { void _filterElements(String s) {
s = s.toUpperCase(); s = s.toUpperCase();
setState(() { setState(() {
filteredElements = widget.elements filteredElements = widget.elements.where((e) => e.code!.contains(s) || e.dialCode!.contains(s) || e.name!.toUpperCase().contains(s)).toList();
.where((e) =>
e.code!.contains(s) ||
e.dialCode!.contains(s) ||
e.name!.toUpperCase().contains(s))
.toList();
}); });
} }