showListDialog static method

Future showListDialog({ required BuildContext context, required List options, String title = '', String prefixText = '', String suffixText = '', dynamic onSelection(int, dynamic)?, dynamic selectedValue, List<bool> multiSelectValues = const [], String okBtnText = 'Submit', dynamic onSubmit(List<bool>)?, bool barrierDismissible = true, BoxConstraints constraints = const BoxConstraints(maxWidth: 850, maxHeight: 750), })

Shows a dialog with list of items to select

options the list of items to display

title the title of the dialog

prefixText text to be added before each item

suffixText text to be added after each item

onSelection the event triggered when an item is selected

prefixText or suffixText won't send with onSelection. Only the selected value in the options will be used in onSelection

selectedValue similar to default value. You can set the initial selected value

multiSelectValues if you want to diplay a checkbox for each item, pass a boolean list with exactly same number count of options

okBtnText title for accept button. Default title is 'Submit'.

onSubmit this function will be called when the okBtnText button is pressed

Implementation

static Future showListDialog({
  required final BuildContext context,
  required final List options,
  final String title = '',
  final String prefixText = '',
  final String suffixText = '',
  final Function(int, dynamic)? onSelection,
  final selectedValue,
  final List<bool> multiSelectValues = const [],
  final String okBtnText = 'Submit',
  final Function(List<bool>)? onSubmit,
  bool barrierDismissible = true,
  BoxConstraints constraints =
      const BoxConstraints(maxWidth: 850, maxHeight: 750),
}) {
  final bool multiSelect = multiSelectValues.length == options.length;

  return showDialog(
    context: context,
    barrierDismissible: barrierDismissible,
    builder: (_) {
      return StatefulBuilder(
        builder: (context, setState) {
          return AlertDialog(
            contentPadding: const EdgeInsets.all(6.0),
            title: title == ''
                ? null
                : Text(title,
                    style: const TextStyle(fontWeight: FontWeight.bold)),
            content: Container(
              width: 300,
              constraints: constraints,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: options.length,
                itemBuilder: (BuildContext context, int index) {
                  final String soption =
                      '$prefixText ${options[index].toString()} $suffixText'
                          .trim();
                  return ListTile(
                    leading: () {
                      if (multiSelect) {
                        return Checkbox(
                          value: multiSelectValues[index],
                          onChanged: (value) {
                            multiSelectValues[index] = value ?? false;
                            setState(() {});
                          },
                        );
                      } else {
                        return null;
                      }
                    }(),
                    selectedTileColor: Colors.black12,
                    selected: () {
                      if (multiSelect || selectedValue == null) return false;
                      return options[index] == selectedValue;
                    }(),
                    title: Text(soption),
                    onTap: () {
                      if (onSelection != null) {
                        onSelection(index, options[index]);
                      }
                    },
                  );
                },
              ),
            ),
            actions: () {
              if (!multiSelect) return null;
              return [
                TextButton(
                  child: const Text('CANCEL'),
                  onPressed: Navigator.of(context).pop,
                ),
                TextButton(
                  child: Text(okBtnText),
                  onPressed: () {
                    Navigator.of(context).pop();
                    if (onSubmit != null) onSubmit(multiSelectValues);
                  },
                ),
              ];
            }(),
          );
        },
      );
    },
  );
}