show method
Displays the multi-selectable dialog and returns a Future that resolves when the dialog is dismissed.
This method shows the multi-selectable dialog on the screen and returns a Future that resolves to the list of selected items when the dialog is dismissed.
Example:
var selectedItems = await multiSelectableDialog.show(context);
print('Selected items: $selectedItems');
Implementation
Future<List<T>?> show(BuildContext context) async {
initialSelectedItems?.removeWhere((element) => !items.contains(element));
Size screenSize = MediaQuery.of(context).size;
bool isPortrait =
MediaQuery.of(context).orientation == Orientation.portrait;
List<T> selectedItems =
initialSelectedItems != null ? List.from(initialSelectedItems!) : [];
ValueNotifier<int> selectedItemsCount = ValueNotifier(selectedItems.length);
if (initiallyMultiSelectAllItems) {
selectedItems = List.from(items);
}
return await showDialog<List<T>>(
context: context,
builder: (context) {
return Center(
child: Material(
elevation: elevation,
borderRadius: BorderRadius.circular(4.0),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: dialogWidth ??
(isPortrait ? screenSize.width : screenSize.height) * 0.85,
maxWidth: dialogWidth ??
(isPortrait ? screenSize.width : screenSize.height) * 0.85,
maxHeight: dialogHeight ??
(isPortrait ? screenSize.height : screenSize.width) * 0.85,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: titleHeight,
padding: const EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: titleBackgroundColor ??
Theme.of(context).colorScheme.primary,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
alignment: Alignment.centerLeft,
child: Row(
children: [
if (title != null || titleWidget != null)
Expanded(
child: titleWidget ??
Text(
title!,
style: titleStyle ??
Theme.of(context)
.textTheme
.headlineMedium
?.copyWith(
color: Colors.white,
),
),
),
if (dialogButton == null)
IconButton(
onPressed: () =>
Navigator.of(context).pop(selectedItems),
icon: const Icon(
Icons.check,
color: Colors.white,
),
),
],
),
),
if (showSelectedTextWidget)
ValueListenableBuilder(
valueListenable: selectedItemsCount,
builder: (context, value, child) {
return selectedTextBuilder?.call(selectedItems) ??
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0, vertical: 10.0),
child: Text(
"${selectedItems.length} Selected",
style: selectedTextStyle,
),
);
},
),
Flexible(
fit: FlexFit.loose,
child: ListView.builder(
itemCount: items.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0, vertical: 3.0),
child: ValueListenableBuilder(
valueListenable: selectedItemsCount,
builder: (context, value, child) {
return Row(
children: [
Expanded(
child: InkWell(
onTap: selectionType ==
MultiDialogSelectionType
.checkboxTap
? null
: () {
if (!selectedItems
.contains(items[index])) {
selectedItems.add(items[index]);
} else {
selectedItems
.remove(items[index]);
}
selectedItemsCount.value += 1;
},
child: selectedItems
.contains(items[index]) &&
selectedItemBuilder != null
? selectedItemBuilder!.call(
context, items[index], index)
: itemBuilder.call(
context, items[index], index),
),
),
if (selectionType ==
MultiDialogSelectionType.checkboxTap)
Checkbox(
side: BorderSide(
color: Theme.of(context)
.colorScheme
.outline,
width: 1.5,
),
value:
selectedItems.contains(items[index]),
onChanged: (isChecked) {
if (isChecked ?? false) {
selectedItems.add(items[index]);
} else {
selectedItems.remove(items[index]);
}
selectedItemsCount.value += 1;
},
),
],
);
},
),
);
},
),
),
if (dialogButton?.positiveButton != null ||
dialogButton?.negativeButton != null)
Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
if (dialogButton!.negativeButton != null)
Flexible(
fit: FlexFit.loose,
child: InkWell(
onTap: dialogButton!.onNegativeButtonPressed ??
() => Navigator.of(context).pop(),
child: dialogButton!.negativeButton!,
),
),
const SizedBox(width: 10.0),
if (dialogButton!.positiveButton != null)
Flexible(
fit: FlexFit.loose,
child: InkWell(
onTap: dialogButton!.onPositiveButtonPressed ??
() => Navigator.of(context)
.pop(selectedItems),
child: dialogButton!.positiveButton!,
),
),
],
),
),
],
),
),
),
);
},
);
}