Skip to content
This repository has been archived by the owner on Jul 20, 2022. It is now read-only.

增加了弹出框的选择样式，可以从底部弹出 #149

Closed
wants to merge 1 commit into from
Closed

增加了弹出框的选择样式，可以从底部弹出 #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,7 @@ class _MyAppState extends State<MyApp> {
showFlagDialog: false,
comparator: (a, b) => b.name.compareTo(a.name),
//Get the country information relevant to the initial selection
onInit: (code) =>
print("on init ${code.name} ${code.dialCode} ${code.name}"),
onInit: (code) => print("on init ${code.name} ${code.dialCode} ${code.name}"),
),
CountryCodePicker(
onChanged: print,
Expand Down Expand Up @@ -141,9 +140,24 @@ class _MyAppState extends State<MyApp> {
width: 400,
height: 60,
child: CountryCodePicker(
searchDecoration: InputDecoration(
// prefix: Icon(Icons.search, color: Theme.of(context).primaryColor),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Theme.of(context).primaryColor),
),
),
closeIcon: const Icon(
Icons.close,
color: Colors.red,
),
onChanged: (e) => print(e.toLongString()),
initialSelection: 'TF',
showCountryOnly: true,
isCentral: false,
corner: 20,
//showCountryOnly: true,
showOnlyCountryWhenClosed: true,
favorite: ['+39', 'FR'],
),
Expand Down
112 changes: 65 additions & 47 deletions lib/country_code_picker.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ class CountryCodePicker extends StatefulWidget {
/// shows the name of the country instead of the dialcode
final bool showOnlyCountryWhenClosed;

final bool? isCentral;

final double? corner;

/// aligns the flag and the Text left
///
/// additionally this option also fills the available space of the widget.
Expand Down Expand Up @@ -83,6 +87,7 @@ class CountryCodePicker extends StatefulWidget {
CountryCodePicker({
this.onChanged,
this.onInit,
this.isCentral,
this.initialSelection,
this.favorite = const [],
this.textStyle,
Expand Down Expand Up @@ -111,6 +116,7 @@ class CountryCodePicker extends StatefulWidget {
this.hideSearch = false,
this.showDropDownButton = false,
this.dialogSize,
this.corner,
this.dialogBackgroundColor,
this.closeIcon = const Icon(Icons.close),
Key? key,
Expand All @@ -120,17 +126,14 @@ class CountryCodePicker extends StatefulWidget {
State<StatefulWidget> createState() {
List<Map> jsonList = codes;

List<CountryCode> elements = jsonList
.map((json) => CountryCode.fromJson(json as Map<String, dynamic>))
.toList();
List<CountryCode> elements = jsonList.map((json) => CountryCode.fromJson(json as Map<String, dynamic>)).toList();

if (comparator != null) {
elements.sort(comparator);
}

if (countryFilter != null && countryFilter!.isNotEmpty) {
final uppercaseCustomList =
countryFilter!.map((c) => c.toUpperCase()).toList();
final uppercaseCustomList = countryFilter!.map((c) => c.toUpperCase()).toList();
elements = elements
.where((c) =>
uppercaseCustomList.contains(c.code) ||
Expand Down Expand Up @@ -167,16 +170,12 @@ 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.alignLeft
? const EdgeInsets.only(right: 16.0, left: 8.0)
Expand All @@ -192,11 +191,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.button,
widget.showOnlyCountryWhenClosed ? selectedItem!.toCountryStringOnly() : selectedItem.toString(),
style: widget.textStyle ?? Theme.of(context).textTheme.button,
overflow: widget.textOverflow,
),
),
Expand Down Expand Up @@ -238,11 +234,9 @@ class CountryCodePickerState extends State<CountryCodePicker> {
if (widget.initialSelection != null) {
selectedItem = elements.firstWhere(
(e) =>
(e.code!.toUpperCase() ==
widget.initialSelection!.toUpperCase()) ||
(e.code!.toUpperCase() == widget.initialSelection!.toUpperCase()) ||
(e.dialCode == widget.initialSelection) ||
(e.name!.toUpperCase() ==
widget.initialSelection!.toUpperCase()),
(e.name!.toUpperCase() == widget.initialSelection!.toUpperCase()),
orElse: () => elements[0]);
} else {
selectedItem = elements[0];
Expand All @@ -258,8 +252,7 @@ class CountryCodePickerState extends State<CountryCodePicker> {
if (widget.initialSelection != null) {
selectedItem = elements.firstWhere(
(e) =>
(e.code!.toUpperCase() ==
widget.initialSelection!.toUpperCase()) ||
(e.code!.toUpperCase() == widget.initialSelection!.toUpperCase()) ||
(e.dialCode == widget.initialSelection) ||
(e.name!.toUpperCase() == widget.initialSelection!.toUpperCase()),
orElse: () => elements[0]);
Expand Down Expand Up @@ -296,9 +289,7 @@ class CountryCodePickerState extends State<CountryCodePicker> {
searchStyle: widget.searchStyle,
textStyle: widget.dialogTextStyle,
boxDecoration: widget.boxDecoration,
showFlag: widget.showFlagDialog != null
? widget.showFlagDialog
: widget.showFlag,
showFlag: widget.showFlagDialog != null ? widget.showFlagDialog : widget.showFlag,
flagWidth: widget.flagWidth,
size: widget.dialogSize,
backgroundColor: widget.dialogBackgroundColor,
Expand All @@ -324,28 +315,11 @@ class CountryCodePickerState extends State<CountryCodePicker> {
barrierColor: widget.barrierColor ?? Colors.grey.withOpacity(0.5),
backgroundColor: widget.backgroundColor ?? Colors.transparent,
context: context,
builder: (context) => Center(
child: SelectionDialog(
elements,
favoriteElements,
showCountryOnly: widget.showCountryOnly,
emptySearchBuilder: widget.emptySearchBuilder,
searchDecoration: widget.searchDecoration,
searchStyle: widget.searchStyle,
textStyle: widget.dialogTextStyle,
boxDecoration: widget.boxDecoration,
showFlag: widget.showFlagDialog != null
? widget.showFlagDialog
: widget.showFlag,
flagWidth: widget.flagWidth,
flagDecoration: widget.flagDecoration,
size: widget.dialogSize,
backgroundColor: widget.dialogBackgroundColor,
barrierColor: widget.barrierColor,
hideSearch: widget.hideSearch,
closeIcon: widget.closeIcon,
),
),
builder: (context) => (widget.isCentral == null || widget.isCentral == true)
? Center(
child: selectionDialog(elements, favoriteElements),
)
: selectionDialog(elements, favoriteElements),
).then((e) {
if (e != null) {
setState(() {
Expand All @@ -358,6 +332,50 @@ class CountryCodePickerState extends State<CountryCodePicker> {
}
}

// SelectionDialog(
// elements,
// favoriteElements,
// showCountryOnly: widget.showCountryOnly,
// emptySearchBuilder: widget.emptySearchBuilder,
// searchDecoration: widget.searchDecoration,
// searchStyle: widget.searchStyle,
// textStyle: widget.dialogTextStyle,
// boxDecoration: widget.boxDecoration,
// showFlag: widget.showFlagDialog != null ? widget.showFlagDialog : widget.showFlag,
// flagWidth: widget.flagWidth,
// flagDecoration: widget.flagDecoration,
// size: widget.dialogSize,
// backgroundColor: widget.dialogBackgroundColor,
// barrierColor: widget.barrierColor,
// hideSearch: widget.hideSearch,
// closeIcon: widget.closeIcon,
// )
//
Widget selectionDialog(List<CountryCode> elements, List<CountryCode> favoriteElements) {
return SelectionDialog(
elements,
favoriteElements,
corner: (widget.isCentral == null || widget.isCentral == true)
? BorderRadius.all(Radius.circular(widget.corner ?? 8.0))
: BorderRadius.only(
topLeft: Radius.circular(widget.corner ?? 8.0), topRight: Radius.circular(widget.corner ?? 8.0)),
showCountryOnly: widget.showCountryOnly,
emptySearchBuilder: widget.emptySearchBuilder,
searchDecoration: widget.searchDecoration,
searchStyle: widget.searchStyle,
textStyle: widget.dialogTextStyle,
boxDecoration: widget.boxDecoration,
showFlag: widget.showFlagDialog != null ? widget.showFlagDialog : widget.showFlag,
flagWidth: widget.flagWidth,
flagDecoration: widget.flagDecoration,
size: widget.dialogSize,
backgroundColor: widget.dialogBackgroundColor,
barrierColor: widget.barrierColor,
hideSearch: widget.hideSearch,
closeIcon: widget.closeIcon,
);
}

void _publishSelection(CountryCode e) {
if (widget.onChanged != null) {
widget.onChanged!(e);
Expand Down
20 changes: 8 additions & 12 deletions lib/selection_dialog.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ class SelectionDialog extends StatefulWidget {
/// Background color of SelectionDialog
final Color? backgroundColor;

final BorderRadius? corner;

/// Boxshaow color of SelectionDialog that matches CountryCodePicker barrier color
final Color? barrierColor;

Expand All @@ -37,6 +39,7 @@ class SelectionDialog extends StatefulWidget {
this.textStyle,
this.boxDecoration,
this.showFlag,
this.corner,
this.flagDecoration,
this.flagWidth = 32,
this.size,
Expand All @@ -63,12 +66,11 @@ 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,
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderRadius: widget.corner ?? BorderRadius.all(Radius.circular(8.0)),
boxShadow: [
BoxShadow(
color: widget.barrierColor ?? Colors.grey.withOpacity(1),
Expand Down Expand Up @@ -146,8 +148,7 @@ class _SelectionDialogState extends State<SelectionDialog> {
child: Container(
margin: const EdgeInsets.only(right: 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',
Expand All @@ -158,9 +159,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,
),
Expand Down Expand Up @@ -190,10 +189,7 @@ class _SelectionDialogState extends State<SelectionDialog> {
s = s.toUpperCase();
setState(() {
filteredElements = widget.elements
.where((e) =>
e.code!.contains(s) ||
e.dialCode!.contains(s) ||
e.name!.toUpperCase().contains(s))
.where((e) => e.code!.contains(s) || e.dialCode!.contains(s) || e.name!.toUpperCase().contains(s))
.toList();
});
}
Expand Down