1 of 9

DIGIT UI Core Flutter Components

Introduction

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.

Getting Started

Add this to your pubspec.yaml file:

Then run:

Import the package in your Dart code:

Component List

Atom

Variants

States

Input Field

Overview

DIGIT UI components include 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.

Input Field Type

Text Input Field: A text input field for general alphanumeric data.
Text Area Input Field: For multi-line text input.
Search Input Field: Designed for search queries or search-related inputs.
Password Input Field: A secure input field for password entry.
Numeric Input Field: This field is suitable for numeric input.
Date Input Field: An input field designed to capture dates.
Time Input Field: Use this field to input time values.
Location Input Field: Specifically for geographic location data, such as coordinates.

Properties

These are some common props which can be sent inside all the input fields:

TextAreaScroll

Configuration

Text Input Field

Usages

TextArea Input Field

Usages

Search Input Field

Usages

Password Input Field

Usages

Numeric Input Field

Usages

Date Input Field

Usages

Time Input Field

Usages

Location Input Field

Usages

Radio

Overview

The Radio Buttons component in DIGIT UI 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. It is designed to handle both horizontal and vertical layouts based on the screen width.

Properties

Below are some required parameters inside the radio list:

Name                            Description

radioButtons                 A list of RadioButtonModel representing the radio button

onChanged                   a callback when a radio button is selected

The following are additional parameters:

groupValue                  the current selected value in the radio group, using this
                            any radio button can be selected initially, the default is a
                            empty string.

isDisabled                   indicates whether radio buttons are disabled

containerPadding              padding applied around each radio button

Configuration

Usages

Add the below lines of code to configure the radio button:

RadioList(
  onChanged: (value) {},
  radioButtons: [
    RadioButtonModel(code: '1',name: 'One',),
    RadioButtonModel(code: '2', name: 'Two'),
    RadioButtonModel(code: '3', name: 'Three'),
  ],
);

Toggle

Overview

The Toggle Buttons component in DIGIT UI presents a list of interactive toggle buttons, providing users with the ability to select an option. Each button is equipped with callbacks for both mouse-down and hover effects, ensuring a responsive and engaging user interface.

Properties

The widget contains the following required parameters:

Name                           Description

toggleButtons                   A list of ToggleButtonModels that define the toggle 
                                button

onChanged                       a callback when a toggle is selected

Below are some additional parameters:

selectedIndex                 initially selected toggle(by default first toggle will 
                              be selected)

contentPadding                optional Padding around toggle buttons

Configuration

Usages

Add the following lines of code:

ToggleList(
  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) {},
);

Button

Overview

DIGIT UI components provide a variety of buttons with optional suffix and prefix icons, contributing to a cohesive and visually appealing UI.

Properties

Button Type

Primary: Represents the primary action. It features a prominent colour, and its appearance can change on hover or click.
Secondary: Offers a secondary action. It has a different colour scheme than the primary button.
Tertiary: Provides a tertiary action with a distinct visual style.
Link: Resembles a hyperlink, suitable for navigation or linking to other parts of the application. It typically includes an underline.

Hover and Disabled State

The DigitButton widget handles hover effects and a disabled state. When the button is hovered over, it can exhibit visual changes depending on its type. The disabled state prevents interaction and adjusts the button's appearance accordingly.

Icon Placement

The widget supports the placement of icons both before and after the label text. This allows for flexibility in button design.

Properties

It contains the following required Parameters:

Name                         Description

label(string)                text displayed on the button

onPressed(voidCallBack)     A callback function, when button is pressed

type                        specify the type of button(primary or secondary)

These are some optional parameters:

PrefixIcon                  Icon to be displayed before the label text

SuffixIcon                  Icon to be displayed after the label text

isDisabled                  indicates where the button is in a disabled state

Configuration

Primary Button

To use the primary button add the below lines of code:

Button(
  label: 'Primary Button',
  onPressed: () {},
  type: ButtonType.primary,
);

With suffix Icon:

Button(
  suffixIcon: Icons.add,
  label: 'Primary Button',
  onPressed: () {},
  type: ButtonType.primary,
);

With prefix Icon:

Button(
  prefixIcon: Icons.add,
  label: 'Primary Button',
  onPressed: () {},
  type: ButtonType.primary,
);

Secondary Button

To use the secondary button add the following lines of code:

Button(
  label: 'secondary Button',
  onPressed: () {},
  type: ButtonType.secondary,
);

Prefix and Suffix icons can be added to the secondary button using the same code as given for the primary button.

Tertiary Button

To use the tertiary button add the below lines of code:

Button(
  label: 'tertiary Button',
  onPressed: () {},
  type: ButtonType.tertiary,
);

Link

To use a link, add the following lines of code:

Button(
  label: 'link',
  onPressed: () {},
  type: ButtonType.link,
);

Dropdown

Overview

DIGIT UI components offer various drop-down menus, including single-select, multi-select, and tree-select options.

Single Select Drop-down

The Single Select drop-down in Digit UI Components provides a drop-down menu for users to make a single selection. It supports various features such as item filtering and selection handling. This intuitive component supports options with additional features such as images, icons, and descriptions, complemented by hover and mouse-down effects.

Sub-Types

Default drop-down
Nested drop-down
Tree drop-down

Properties

Below are some required parameters:

Name                             Description

textEditingController         controller for managing the text

onChange                      a callback when a new option is selected

items                         A list of DropdownItem representing the options

These are some additional customisation parameters:

suffixIcon                    modify the suffixIcon to open dropdown

dropdownType                   dropdown can be nested dropdown( type is mandatory in
                               nested dropdown item list)

emptyItemText                 Text to display when empty options are sent or no match
                              is found during searching

isSearchable                 flag indicating if the dropdown should support filtering
                             option

selectedOption              the default selected option

isDisabled                 flag indicating where dropdown is disabled(default: false)

DropdownItem

Inside the dropdown item, we can pass additional parameters to include the drop-down like description, image and icons.

There are the customisations available inside the drop-down item:

code(required)                 unique identifier for option

name(required)                 the label or name of dropdown option

description                    additional description for the dropdown option

textIcon                      Icon to be displayed inside the dropdown option

textIcon                      Icon to be displayed inside the dropdown option

type                          in case of nested dropdown type will be sent

TreeNode

Inside the tree node we can pass a list of children associated with a node:

code(required)                 unique identifier for that node

name(required)                 displaying the name or label for the node

children                      a list of the tree node

Configuration

Usages

Default drop-down

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  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',),
  ],
);

With description and profile image:

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

Nested drop-down

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  dropdownSubtype: DropdownSubtype.nested,
  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'),
  ],
);

Tree drop-down

TreeSelectDropDown<int>(
  dropdownType: type.singleSelect,
  dropdownSubtype: DropdownSubtype.tree,
  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(),
);

Multi Select Drop-down

The Multi-Select drop-down 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.

Sub-Types

Default drop-down
Nested drop-down
Tree drop-down

Properties

Below are some required parameters:

Name                             Description

options                         A list of DropdownItem representing options

onOptionSelected                callback function when an option is selected

These are some additional parameters:

selectionType                   nested Selected(type is required inside DropdownItem)

selectedOptions                  List of DropdownItem, which will be selected by 
                                 default

chipConfig                       configuration of appearance of selected option

suffixIcon                      custom suffix icon

focusNode                       a focus node can be passed, to control focus

isDisabled                      whether dropdown is enabled or disabled

clearAllText                    Text for Clear all button in chip selection

valueMapper                      mapper to show selected option inside the chip

controller                      MultiSelectController can be passed

Configuration

Usages

Default Drop-down

MultiSelectDropDown<int>(
  dropdownType: type.multiSelect,
  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'),
  ],
);

Nested Drop-down

MultiSelectDropDown<int>(
  dropdownType: type.multiSelect,
  dropdownSubtype: DropdownSubtype.nested,
  onOptionSelected: (List<DropdownItem> selectedOptions) {},
  options: const [
    DropdownItem(
      code: '1', name: 'first', type: "Type A"),
    DropdownItem(
      code: '2', name: 'second', type: "Type A"),
    DropdownItem(
      code: '3', name: 'third', type: "Type A"),
    DropdownItem(
      code: '4', name: 'four', type: "Type B"),
    DropdownItem(
      code: '5', name: 'five', type: "Type B"),
  ],
  selectionType: SelectionType.nestedMultiSelect,
);

Tree Drop-down

TreeSelectDropDown<int>(
  dropdownType: type.multiSelect,
  dropdownSubtype: DropdownSubtype.tree,
  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(),
);

Checkbox

Overview

This widget is a versatile and customizable checkbox component. It provides a checkbox with an associated label and allows users to toggle between checked and unchecked states. This widget supports various customisation options, including the ability to customise the checkbox icon colour, label, padding, and disabled state.

The widget provides a hover state, visually indicating when the user hovers over the checkbox. This is useful for enhancing the user experience.

Properties

This widget contains the following required parameters:

Name                         Description

label(string)               label associated with the checkbox

onChange(boolCallBack)      callback function when the checkbox value changes

These are some option parameters:

value(default: false)        current state of checkbox

isDisabled                     indicates whether the checkbox is disabled

iconColor                    checkbox colour can be customized using this

Padding                      padding around the checkbox widget

Configuration

Usages

Add the following lines of code:

DigitCheckbox(
  label: "Label for checkbox",
  onChanged: (value) {},
),

Toast

Overview

The Toast widget provides a customizable toast notification for Flutter applications. It is designed to display short-lived messages, alerts, or notifications to users in a visually appealing and informative manner.

The ToastType enumeration defines different types of toasts, including:

success: Indicates a successful operation.
error: Indicates an error or failure.
warning: Indicates a warning or caution.

Properties

The Toast widget provides a static method for displaying toasts. This method includes the following parameters:

Configuration

Usage

Success Toast

Error Toast

Warning Toast

Info Card

Overview

This widget is a versatile and customizable information card designed inside a digit ui widget. It provides a visually appealing way to display information, with options for different types of information.

The Info Card supports different types of information, each with its distinct visual style:

Info: Default information card with a blue background and an information icon.
Success: This represents a successful operation, featuring a green background and a check-circle icon.
Error: Indicates an error or unsuccessful operation with a red background and an error icon.
Warning: Represents a warning or caution, featuring a yellow background and a warning icon.

Developers can include additional widgets beneath the description for extra information or interactive elements. The inline property controls whether these widgets are displayed horizontally or vertically.

Properties

Info cards contain the following required parameters:

There are some additional customisation parameters:

Configuration

Usages

Info Card

Success Card

Error Card

Warning Card

Dropdown

Overview

DIGIT UI components offer various drop-down menus, including single-select, multi-select, and tree-select options.

Single Select Drop-down

Sub-Types

Default drop-down
Nested drop-down
Tree drop-down

Properties

Below are some required parameters:

Name                             Description

textEditingController         controller for managing the text

onChange                      a callback when a new option is selected

items                         A list of DropdownItem representing the options

These are some additional customisation parameters:

suffixIcon                    modify the suffixIcon to open dropdown

dropdownType                   dropdown can be nested dropdown( type is mandatory in
                               nested dropdown item list)

emptyItemText                 Text to display when empty options are sent or no match
                              is found during searching

isSearchable                 flag indicating if the dropdown should support filtering
                             option

selectedOption              the default selected option

isDisabled                 flag indicating where dropdown is disabled(default: false)

DropdownItem

Inside the dropdown item, we can pass additional parameters to include the drop-down like description, image and icons.

There are the customisations available inside the drop-down item:

code(required)                 unique identifier for option

name(required)                 the label or name of dropdown option

description                    additional description for the dropdown option

textIcon                      Icon to be displayed inside the dropdown option

textIcon                      Icon to be displayed inside the dropdown option

type                          in case of nested dropdown type will be sent

TreeNode

Inside the tree node we can pass a list of children associated with a node:

code(required)                 unique identifier for that node

name(required)                 displaying the name or label for the node

children                      a list of the tree node

Configuration

Usages

Default drop-down

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  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',),
  ],
);

With description and profile image:

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

Nested drop-down

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  dropdownSubtype: DropdownSubtype.nested,
  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'),
  ],
);

Tree drop-down

TreeSelectDropDown<int>(
  dropdownType: type.singleSelect,
  dropdownSubtype: DropdownSubtype.tree,
  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(),
);

Multi Select Drop-down

Sub-Types

Default drop-down
Nested drop-down
Tree drop-down

Properties

Below are some required parameters:

Name                             Description

options                         A list of DropdownItem representing options

onOptionSelected                callback function when an option is selected

These are some additional parameters:

selectionType                   nested Selected(type is required inside DropdownItem)

selectedOptions                  List of DropdownItem, which will be selected by 
                                 default

chipConfig                       configuration of appearance of selected option

suffixIcon                      custom suffix icon

focusNode                       a focus node can be passed, to control focus

isDisabled                      whether dropdown is enabled or disabled

clearAllText                    Text for Clear all button in chip selection

valueMapper                      mapper to show selected option inside the chip

controller                      MultiSelectController can be passed

Configuration

Usages

Default Drop-down

MultiSelectDropDown<int>(
  dropdownType: type.multiSelect,
  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'),
  ],
);

Nested Drop-down

MultiSelectDropDown<int>(
  dropdownType: type.multiSelect,
  dropdownSubtype: DropdownSubtype.nested,
  onOptionSelected: (List<DropdownItem> selectedOptions) {},
  options: const [
    DropdownItem(
      code: '1', name: 'first', type: "Type A"),
    DropdownItem(
      code: '2', name: 'second', type: "Type A"),
    DropdownItem(
      code: '3', name: 'third', type: "Type A"),
    DropdownItem(
      code: '4', name: 'four', type: "Type B"),
    DropdownItem(
      code: '5', name: 'five', type: "Type B"),
  ],
  selectionType: SelectionType.nestedMultiSelect,
);

Tree Drop-down

TreeSelectDropDown<int>(
  dropdownType: type.multiSelect,
  dropdownSubtype: DropdownSubtype.tree,
  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(),
);

Input Field

Overview

Input Field Type

Text Input Field: A text input field for general alphanumeric data.
Text Area Input Field: For multi-line text input.
Search Input Field: Designed for search queries or search-related inputs.
Password Input Field: A secure input field for password entry.
Numeric Input Field: This field is suitable for numeric input.
Date Input Field: An input field designed to capture dates.
Time Input Field: Use this field to input time values.
Location Input Field: Specifically for geographic location data, such as coordinates.

Properties

These are some common props which can be sent inside all the input fields:

label                            label for input field

readOnly                        determines if the input field is read-only or not

isRequired                      determines if the input field is required or not

isDisabled                      indicates where the field is disabled or not

info                            boolean to show the tooltip

infoText                         customize the tooltip text

charCount                       boolean to show the char count

innerLabel                      inner label for input field

helpText                         help message to display below the text field

validations                     a list of validations can be passed

initialValue                     initial value for the field

keyBoardType                      customize keyboard type

textInputFormatter               list of filterTextInputFormatter

onTap                           a call-back function when the user taps on the field

suffixText                       a text which will be shown as a suffix

prefixText                      a text which will be shown as a prefix

suffixIcon                       an icon which will be shown as a suffix

textAreaScroll                 defines the scroll behaviour for textArea

TextAreaScroll

smart                           height will increase based on the input

vertical                        can be increased height by vertical drag

none                            height and width will not change

Configuration

Text Input Field

Usages

InputField(
  Type: InputType.text,
  label: "Text Field",
  initialValue: 'value',
  controller: TextEditingController(),
  innerLabel: 'label',
  helpText: 'help text',
  charCount: true,
);

TextArea Input Field

Usages

InputField(
  Type: InputType.textArea,
  label: "Text Area",
  controller: TextEditingController(),
  helpText: 'help text',
);

Search Input Field

Usages

InputField(
  Type: InputType.search,
  label: "Search Field",
  controller: TextEditingController(),
  helpText: 'help text',
  onSuffixTap: (value){},
);

Password Input Field

Usages

InputField(
  Type: InputType.password,
  label: "password Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

Numeric Input Field

Usages

InputField(
  Type: InputType.numeric,
  label: "Numeric Field",
  controller: TextEditingController(),
  helpText: 'help text',
  initialValue: '0',
  step: 1,
);

Date Input Field

Usages

InputField(
  Type: InputType.date,
  label: "Date Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

Time Input Field

Usages

InputField(
  Type: InputType.time,
  label: "Time Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

Location Input Field

Usages

InputField(
  Type: InputType.location,
  label: "Location Field",
  controller: TextEditingController(),
  helpText: 'help text',
);