digit_flutter_components

Description:

digit flutter components

digit ui components #
Flutter Common UI Widgets #
Digit UI Components is a collection of common Flutter widgets designed to simplify UI development. These components offer easy-to-use and customizable features to enhance UI design and streamline the development process.
Installation #
Add this to your pubspec.yaml file:
dependencies:
digit_flutter_components: 1.0.0
copied to clipboard
Then run:
flutter pub get
copied to clipboard
Usage #
Import the package in your Dart code:
import 'package:digit_components/digit_components.dart';
copied to clipboard
Example #
Text Input Variants #
Digit UI Components includes various text input fields with optional features such as character count display, inner labels, and help text. These fields also come with built-in validation support for improved data integrity.
Text Input Field
DigitTextFormInput(
label: "Text Field",
initialValue: 'value',
controller: TextEditingController(),
innerLabel: 'label',
helpText: 'help text',
charCount: true,
);
copied to clipboard

Date Input Field
DigitDateFormInput(
label: "Date Field",
controller: TextEditingController(),
innerLabel: 'innerlabel',
helpText: 'help text',
);
copied to clipboard



Time Input Field
DigitTimeFormInput(
label: "Time Field",
controller: TextEditingController(),
innerLabel: 'innerlabel',
helpText: 'help text',
);
copied to clipboard



Location Input Field
DigitLocationFormInput(
label: "Location Field",
controller: TextEditingController(),
innerLabel: 'innerlabel',
helpText: 'help text',
);
copied to clipboard


Numeric Input Field
DigitNumericFormInput(
label: "Numeric Field",
controller: TextEditingController(),
innerLabel: 'innerlabel',
helpText: 'help text',
initialValue: '0',
step: 1,
);
copied to clipboard

Password Input Field
DigitPasswordFormInput(
label: "password Field",
controller: TextEditingController(),
innerLabel: 'innerlabel',
helpText: 'help text',
validations: [
Validator(ValidatorType.minLength, 6,
errorMessage:
'Password must be at least 6 characters.'),
],
);
copied to clipboard


Search Input Field
DigitSearchFormInput(
label: "Search Field",
controller: TextEditingController(),
innerLabel: 'innerlabel',
helpText: 'help text',
onSuffixTap: (value){},
);
copied to clipboard

TextArea Input Field
DigitTextAreaFormInput(
label: "Text Area",
controller: TextEditingController(),
innerLabel: 'innerlabel',
helpText: 'help text',
);
copied to clipboard

Button Variants #
Digit UI Components provides a variety of buttons with optional suffix and prefix icons, contributing to a cohesive and visually appealing UI.
Primary Button
DigitButton(
label: 'Primary Button',
onPressed: () {},
type: ButtonType.primary,
);
copied to clipboard

with Suffix Icon
DigitButton(
suffixIcon: Icons.add,
label: 'Primary Button',
onPressed: () {},
type: ButtonType.primary,
);
copied to clipboard

Secondary Button
DigitButton(
label: 'secondary Button',
onPressed: () {},
type: ButtonType.secondary,
);
copied to clipboard

Tertiary Button
DigitButton(
label: 'tertiary Button',
onPressed: () {},
type: ButtonType.tertiary,
);
copied to clipboard

Link
DigitButton(
label: 'link',
onPressed: () {},
type: ButtonType.link,
);
copied to clipboard

Radio Buttons #
The Radio Buttons component in Digit UI Components empowers users to make a single selection from a list of options. This intuitive interface provides a smooth user experience with hover and mouse-down effects.
DigitRadioList(
onChanged: (value) {},
groupValue: '1',
radioButtons: [
RadioButtonModel(code: '1',name: 'One',),
RadioButtonModel(code: '2', name: 'Two'),
RadioButtonModel(code: '3', name: 'Three'),
],
);
copied to clipboard

Toggle Buttons #
The Toggle Buttons component in Digit UI Components presents a list of interactive toggle buttons, providing users with the ability to select a option. Each button is equipped with callbacks for both mouse-down and hover effects, ensuring a responsive and engaging user interface.
DigitToggleList(
toggleButtons: [
ToggleButtonModel(
name: 'Toggle 1', key: 'key1', onSelected: (value) {}),
ToggleButtonModel(
name: 'Toggle 2', key: 'key2', onSelected: (value) {}),
ToggleButtonModel(
name: 'Toggle 3', key: 'key3', onSelected: (value) {}),
],
selectedIndex: 1,
onChanged: (selectedValues) {},
);
copied to clipboard

Dropdown Variants #
Digit UI Components offers various dropdown menus, including single-select, multi-select, and tree-select options.
Single Select Dropdown
The Single Select Dropdown in Digit UI Components provides a dropdown menu for users to make a single selection. This intuitive component supports options with additional features such as images, icons, and descriptions, complemented by hover and mouse-down effects.
DigitDropdown<int>(
onChange: (String value, String index) => {},
textEditingController: TextEditingController(),
items: const [
DropdownItem(name: 'first',code: '1',),
DropdownItem(name: 'second',code: '2',),
DropdownItem(name: 'third',code: '3',),
DropdownItem(name: 'fourth',code: '4',
),
],
);
copied to clipboard


With description and profile Image
DigitDropdown<int>(
onChange: (String value, String index) => {},
textEditingController: TextEditingController(),
items: const [
DropdownItem(
name: 'first',
code: '1',
description: 'description for first one',
profileImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
),
),
DropdownItem(
name: 'second',
code: '2',
description: 'description for second one',
profileImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
),
),
DropdownItem(
name: 'third',
code: '3',
description: 'description for third one',
profileImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
),
),
DropdownItem(
name: 'fourth',
code: '4',
description: 'description for fourth one',
profileImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
),
),
],
);
copied to clipboard

With Different Type of Options
DigitDropdown<int>(
onChange: (String value, String index) => {},
textEditingController: TextEditingController(),
dropdownType: DropdownType.nestedSelect,
items: const [
DropdownItem(name: 'first',code: '1',type: 'Type A',),
DropdownItem(name: 'second',code: '2',type: 'Type B'),
DropdownItem(name: 'third',code: '3',type: 'Type A',),
DropdownItem(name: 'fourth',code: '4',type: 'Type B'),
],
);
copied to clipboard

Multi Select Dropdown
The Multi Select Dropdown in Digit UI Components offers a user-friendly interface for selecting multiple options simultaneously. This clean and intuitive component is equipped with built-in chips and provides responsive mouse-down and hover effects.
MultiSelectDropDown<int>(
onOptionSelected: (List<DropdownItem> selectedOptions) {},
options: const [
DropdownItem(code: '1', name: 'first'),
DropdownItem(code: '2', name: 'second'),
DropdownItem(code: '3', name: 'third'),
DropdownItem(code: '4', name: 'four'),
],
);
copied to clipboard


Tree Select Dropdown
A hierarchical dropdown menu enabling single or multiple selections from a tree-like structure.
Single Select Option
TreeSelectDropDown<int>(
onOptionSelected: (List<TreeNode> selectedOptions) {},
options: [
TreeNode('C', 'C', [
TreeNode('C.C1', 'C1', []),
TreeNode('C.C2', 'C2', []),
]),
TreeNode('D', 'D', [
TreeNode('D.D1', 'D1', []),
TreeNode('D.D2', 'D2', []),
]),
],
controller: TreeSelectController(),
);
copied to clipboard


Multi Select Option
TreeSelectDropDown<int>(
onOptionSelected: (List<TreeNode> selectedOptions) {},
options: [
TreeNode('C', 'C', [
TreeNode('C.C1', 'C1', []),
TreeNode('C.C2', 'C2', []),
]),
TreeNode('D', 'D', [
TreeNode('D.D1', 'D1', []),
TreeNode('D.D2', 'D2', []),
]),
],
treeSelectionType: TreeSelectionType.MultiSelect,
controller: TreeSelectController(),
);
copied to clipboard


Toast #
The toast component is used for displaying toast messages with various types such as success, error, and warning.
Success toast
DigitToast.show(context,
options: DigitToastOptions(
"Your Warning message", ToastType.success));
copied to clipboard

error toast
DigitToast.show(context,
options: DigitToastOptions(
"Your Warning message", ToastType.error));
copied to clipboard

Warning toast
DigitToast.show(context,
options: DigitToastOptions(
"Your Warning message", ToastType.warning));
copied to clipboard

Info Card #
InfoCard is a versatile widget designed to showcase informational content in a visually appealing manner. It is commonly used to display messages, alerts, or other important information. The card supports various customization options to adapt to different use cases.
Info card
InfoCard(
title: 'Info',
type: InfoType.info,
description:
'Application process will take a minute to complete. It might cost around Rs.500/- to Rs.1000/- to clean your septic tank and you can expect theservice to get completed in 24 hrs from the time of payment.',
),
copied to clipboard

Success card
InfoCard(
title: 'Success',
type: InfoType.success,
description:
'Application process will take a minute to complete. It might cost around Rs.500/- to Rs.1000/- to clean your septic tank and you can expect theservice to get completed in 24 hrs from the time of payment.',
),
copied to clipboard

Warning card
InfoCard(
title: 'Warning',
type: InfoType.warning,
description:
'Application process will take a minute to complete. It might cost around Rs.500/- to Rs.1000/- to clean your septic tank and you can expect theservice to get completed in 24 hrs from the time of payment.',
),
copied to clipboard

Error card
InfoCard(
title: 'Error',
type: InfoType.error,
description:
'Application process will take a minute to complete. It might cost around Rs.500/- to Rs.1000/- to clean your septic tank and you can expect theservice to get completed in 24 hrs from the time of payment.',
),
copied to clipboard

License #
MIT