digit_components

Description:

digit components

DIGIT Components #
DigitActionDialog :
A customizable dialog with multiple action buttons / widgets.
Usage:
onPressed : () => DigitActionDialog.show(
context,
widget: your_widget()
)
copied to clipboard

DigitCheckBox :
A single checkbox component.
Usage:
DigitCheckbox(
label: “your_label”,
value: boolean_value,
),
copied to clipboard

DigitDateFormPicker :
A Reactive Date Picker widget with custom label header. The formControlName is required to bind this ReactiveDatePicker to a FormControl.
Usage:
DigitDateFormPicker(
label: 'Date of Birth',
padding: const EdgeInsets.only(top: 32.0),
isRequired: true,
cancelText: 'Cancel',
fieldHintText: 'dd/mm/yyyy',
confirmText: 'OK',
icon: Icons.info_outline_rounded,
toolTipMsg: 'Age should not be less than 18 years',
formControlName: ’dob_key’,
autoValidation: AutovalidateMode.always,
requiredMessage: 'Date of birth is required',
validationMessages: {
'required': (_) => ‘Date of birth is required’,
'max': (_) => ‘Age cannot be greater than 18 years’
},)
copied to clipboard

DigitDivider :
A simple divider widget
Usage:
DigitDivider()
copied to clipboard

DigitDropdown :
A custom dropdown component with label header.
Usage:
DigitDropdown<YOUR_DATA_TYPE>(
value: state.selectedBoundaryMap.entries
.firstWhereOrNull(
(element) => element.key == label,
)
?.value,
label: label,
menuItems: your_item_list,
onChanged: (value) {
if (value == null) return;
//Any functions to perform on change or on select of the dropdown
},
valueMapper: (value) {
return value.name ?? value.code ?? 'No Value';
},)
copied to clipboard

DigitIconButton :
A custom icon widget with customizable icon, icon Text, icon color, icon Text Color
Usage:
DigitIconButton(
icon: Icons.check_circle,
iconText: 'delivered',
iconTextColor: Colors.white,
iconColor: Colors.orange,
)
copied to clipboard

DigitIntegerFormPicker :
An Integer Picker with option to select any number by increasing or decreasing the using + and - end buttons
Usage:
DigitIntegerFormPicker(
form: form,
minimum: 0,
formControlName: _quantityDistributedKey,
label: ‘Number of members’,
incrementer: true,
),
copied to clipboard

DigitOutlineIconButton :
An outlined button with a leading icon based on DIGIT figma.
Usage:
DigitOutlineIconButton(
icon: Icons.warning,
label:’Decline’,
onPressed: () => call_your_on_pressed_function(),
)
copied to clipboard

DigitReactiveDropdown :
A reactive dropdown form component. The formControlName is required to bind this ReactiveDropdownField to a FormControl
Usage:
DigitReactiveDropdown<String>(
label: ‘relationship’,
menuItems:
relationship.map((e) => e.toString()).toList(),
isRequired: true,
formControlName: relationshipKey,
valueMapper: (value) =>
t.translate('CORE_COMMON_$value'),
onChanged: (value) {},
validationMessages: {
'required': (_) => t.translate(
i18.wageSeeker.relationshipRequired,
),
},
)
copied to clipboard

DigitTextFormField :
A reactive form reactive dropdown component. The formControlName is required to bind this ReactiveTextField to a FormControl
Usage:
DigitTextFormField(
formControlName: fatherNameKey,
isRequired: true,
label: t.translate(i18.common.guardianName),
inputFormatter: [
FilteringTextInputFormatter.allow(RegExp("[A-Za-z ]"))
],
validationMessages: {
'required': (_) => t.translate(
i18.wageSeeker.fatherNameRequired,
),
'minLength': (_) => t.translate(
i18.wageSeeker.minFatherNameCharacters,
),
'maxLength': (_) => t.translate(
i18.wageSeeker.maxFatherNameCharacters,
),
},
)
copied to clipboard

DigitToast :
To show a toast message based on completion of user actions
Usage:
DigitToast.show(
context,
options: DigitToastOptions(
message ?? 'Unable to login',
true,
theme,
),
);
copied to clipboard

DigitCard :
A Card component with onPressed functions
Usage:
DigitCard(
child: Text(‘Card Details’),
onPressed: null)
copied to clipboard

DigitCheckBoxTile :
It is a List of checkbox widgets, with label heading
Usage:
DigitCheckboxTile(
margin: const EdgeInsets.only(top: 16),
padding: const EdgeInsets.fromLTRB(0, 8, 8, 8),
label: hint ?? 'Some',
value: (control.value ?? false) as bool,
onChanged: (value) => control.value = value,
)
copied to clipboard

DigitDialog :
A customizable dialog with options to add a custom title for the dialog , subtitle for the dialog and action buttons. It can be used on any on Pressed buttons to show this dialog
Usage:
() => DigitDialog.show(context,
options: DigitDialogOptions(
titleIcon: const Icon(
Icons.warning,
color: Colors.red,
),
titleText: ‘Warning’
contentText: ‘Are you sure to decline ?’,
primaryAction: DigitDialogActions(
label: ‘Confirm’,
action: (BuildContext context) {
//your_primary_action();
},
),
secondaryAction: DigitDialogActions(
label: ‘Cancel’,
action: (BuildContext context) =>
//your_secondary_action(),
)));
copied to clipboard

DigitDobPicker :
It is an enhanced component of DigitDateFormPicker. Here we have an additional Text field component which will be displaying the age based on the selected date and validate the age.
Usage:
DigitDobPicker(
datePickerFormControl: _dobKey,
datePickerLabel: localizations.translate(
i18.individualDetails.dobLabelText,
),
ageFieldLabel: localizations.translate(
i18.individualDetails.ageLabelText,
),
separatorLabel: localizations.translate(
i18.individualDetails.separatorLabelText,
),
),
copied to clipboard

DigitElevatedButton :
It is an elevated button with label widget options and onPressed functions based on DIGIT Figma
Usage:
DigitElevatedButton(
onPressed: ()=> your_on_Pressed_function(),
child: Center(
child: Text(
‘Manage wage seekers’,
style: Theme.of(context)
.textTheme
.titleMedium!
.apply(color: Colors.white)),
),);
copied to clipboard

DigitIconTile :
A custom list tile widget with options to add leading icon and onPressed function. Mostly it is used in Sidebar tiles.
Usage:
DigitIconTile(
title: ‘View Profile’,
selected: context.router.currentPath.contains('orgProfile'),
icon: Icons.perm_contact_cal_sharp,
onPressed: () => your_on_pressed_function())
copied to clipboard

DigitInfoCard :
A custom information card based on DIGIT Figma. Here we have options to add the desired icon, background color, icon color, description and heading title of the information card.
Usage:
DigitInfoCard(
icon: Icons.info,
backgroundColor: theme.colorScheme.tertiaryContainer,
iconColor: theme.colorScheme.surfaceTint,
description: localizations
.translate(i18.home.dataSyncInfoContent)
.replaceAll('{}', count.toString()),
title: localizations.translate(
i18.home.dataSyncInfoLabel,
),
),
copied to clipboard

DigitOutlineButton :
An outlined button based on DIGIT figma.
Usage:
DigitOutLineButton(
label: localizations.translate(
i18.memberCard.deliverDetailsUpdateLabel,
),
onPressed: () => your_on_pressed_function(),
)
copied to clipboard

DigitReactiveTypeAhead :
A TypeAhead (autocomplete) widget , where you can show suggestions to users as they type
Usage:
DigitReactiveTypeAhead<T, T>(
formControlName: formControlName,
stringify: valueMapper,
initialValue: initialValue,
initialValueText: initialValueText,
onSuggestionSelected: onSuggestionSelected,
debounceDuration: const Duration(milliseconds: 100),
suggestionsCallback: (pattern) => suggestionsCallback(
menuItems,
pattern,
),
itemBuilder: (context, item) {
return Padding(
padding: const EdgeInsets.all(kPadding * 2),
child: Text(
valueMapper(item),
style: Theme.of(context).textTheme.bodyLarge,
),
);
},
)
copied to clipboard

DigitSearchBar :
A search bar based on DIGIT figma. It has on change functionality to perform actions on text change. A hint text can also be added on the search bar
Usage:
DigitSearchBar(
controller: searchController,
hintText: localizations.translate(
i18.searchBeneficiary.beneficiarySearchHintText,
),
textCapitalization: TextCapitalization.words,
onChanged: (value) => your_on_change_function()
),
copied to clipboard

DigitSearchDropdown :
A searchable drop down that wraps DigitReactiveTypeAhead and has a custom label widget.
Usage:
DigitSearchDropdown<T, T>(
label: ‘City’
formControlName: formControlName,
stringify: valueMapper,
initialValue: initialValue,
initialValueText: initialValueText,
onSuggestionSelected: onSuggestionSelected,
debounceDuration: const Duration(milliseconds: 100),
suggestionsCallback: (pattern) => suggestionsCallback(
menuItems,
pattern,
),
itemBuilder: (context, item) {
return Padding(
padding: const EdgeInsets.all(kPadding * 2),
child: Text(
valueMapper(item),
style: Theme.of(context).textTheme.bodyLarge,
),
);
},
)
copied to clipboard

DigitSyncDialogContent :
A sync dialog with options to add a custom label for the dialog , and type of the dialog. There are 3 types of sync dialog :
In Progress
Completed
Failed
Usage:
() => DigitSyncDialogContent.show(
context,
type: DigitSyncDialogType.complete,
label: 'Data Synced',
primaryAction: DigitDialogActions(
label: 'Close',
action: (act) {
Navigator.pop(act);
},
),
);
copied to clipboard

DigitTextField :
A text field component similar to DigitTextFormField. It can be used without wrapping under reactive form
Usage:
DigitTextField(
readOnly: true,
label: localizations.translate(
i18.householdLocation.administrationAreaFormLabel,
),
controller: TextEditingController(
text: context.boundary.code,
),
),
copied to clipboard

LabeledField :
A labeled widget which has a child widget. If any field need to have a label on its top, then that widget can be wrapped with this LabeledField.
Usage:
LabeledField(
label: '$label ${isRequired ? '*' : ''}',
padding: padding,
labelStyle: Theme.of(context).textTheme.bodyLarge,
icon: icon,
toolTipMsg: toolTipMsg,
child: ReactiveDatePicker())
copied to clipboard

PoweredByDigit :
Generic Digit Footer.
Usage:
PoweredByDigit(
isWhiteLogo: true,
)
copied to clipboard

ScrollableContent :
A Scrollable wrapper widget. All children widgets can be wrapped inside a single scroll card.
Usage:
ScrollableContent(
header: Column(children: const [
Back(),
DigitCard(),
]),
footer: PoweredByDigit()
)
copied to clipboard