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,
// Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
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.
margin: const EdgeInsets.symmetric(horizontal: 6),
comparator: (a, b) => b.name!.compareTo(a.name!),
//Get the country information relevant to the initial selection
onInit: (code) => debugPrint(
"on init ${code?.name} ${code?.dialCode} ${code?.name}"),
onInit: (code) => debugPrint("on init ${code?.name} ${code?.dialCode} ${code?.name}"),
),
CountryCodePicker(
hideHeaderText: true,
onChanged: print,
// Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
initialSelection: 'IT',

82
lib/country_code_picker.dart
View File

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

60
lib/src/selection_dialog.dart
View File

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