From c127e4a8825d55509fd99847706baa978f019923 Mon Sep 17 00:00:00 2001 From: Nilashish Roy Date: Sat, 14 Dec 2024 12:34:55 +0600 Subject: [PATCH] Fixed the Issue #43. Country name attached to flag, no padding, in RTL languages SearchDialog #43 RTL language issue --- example/lib/main.dart | 7 +-- lib/country_code_picker.dart | 82 +++++++++++++++++------------------ lib/src/selection_dialog.dart | 60 ++++++++++--------------- 3 files changed, 66 insertions(+), 83 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index a5191e7..d801daa 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -104,17 +104,14 @@ class MyAppState extends State { 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', diff --git a/lib/country_code_picker.dart b/lib/country_code_picker.dart index 1a3f871..4bde20d 100644 --- a/lib/country_code_picker.dart +++ b/lib/country_code_picker.dart @@ -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 createState() { List> jsonList = countryList; - List elements = - jsonList.map((json) => CountryCode.fromJson(json)).toList(); + List 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 { direction: Axis.horizontal, mainAxisSize: MainAxisSize.min, children: [ - 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 { 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 { 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 { 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 { 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 { 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 { 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, diff --git a/lib/src/selection_dialog.dart b/lib/src/selection_dialog.dart index 74d7d07..58b1f97 100644 --- a/lib/src/selection_dialog.dart +++ b/lib/src/selection_dialog.dart @@ -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 { 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 { 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 { 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 { 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 { } 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 { 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(); }); }