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_ui_components: 1.0.0

Then run:

   flutter pub get

Usage

Import the package in your Dart code:

   import 'package:digit_ui_components/digit_components.dart';

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,
    );

text-field

Date Input Field

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

date-field-1

date

date-1

Time Input Field

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

time-field-1

time

time-1

Location Input Field

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

location

location-1

Numeric Input Field

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

numeric

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.'),
        ],
    );

password-1

password-2

Search Input Field

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

TextArea Input Field

    DigitTextAreaFormInput(
        label: "Text Area",
        controller: TextEditingController(),
        innerLabel: 'innerlabel',
        helpText: 'help text',
    );

textArea

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

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

primary-button

with Suffix Icon

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

primary-button-1

Secondary Button

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

secondary-button

Tertiary Button

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

tertiary-button

Link

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

link

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.

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

radio

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.

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

toggle-list

Digit UI Components offers various dropdown menus, including single-select, multi-select, and tree-select options.

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',
        ),
    ],
);

simple-dropdown

simple-dropdown-1

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',
            ),
        ),
    ],
);

simple-dropdown-variation

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'),
    ],
);

dropdown-type

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'),
    ],
);

multiselect

multiselect-1

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

tree-select

tree-select-1

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

tree-multiselect

tree-multiselect-1

Toast

The toast component is used for displaying toast messages with various types such as success, error, and warning.

Success toast

    Toast.show(context,
                      options: ToastOptions(
                          "Your Warning message", ToastType.success));

Screenshot from 2024-03-11 14-32-23

error toast

    Toast.show(context,
                    options: ToastOptions(
                        "Your Warning message", ToastType.error));

Screenshot from 2024-03-11 14-32-28

Warning toast

    Toast.show(context,
                        options: ToastOptions(
                            "Your Warning message", ToastType.warning));

Screenshot from 2024-03-11 14-32-34

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.',
            ),

Screenshot from 2024-03-11 14-39-56

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.',
            ),

Screenshot from 2024-03-11 14-40-34

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.',
            ),

Screenshot from 2024-03-11 14-41-10

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.',
            ),

Screenshot from 2024-03-11 14-40-57

License

MIT

Libraries

blocs/DateSelection
blocs/LocationBloc
blocs/TimeSelectionBloc
constants/app_constants
constants/AppView
digit_components
enum/app_enums
models/chipModel
models/DropdownModels
models/RadioButtonModel
models/toggleButtonModel
models/TreeModel
theme/colors
theme/digit_theme
theme/theme
theme/typography
utils/date_utils
utils/time_utils
utils/utils
utils/validators/validator
widgets/atoms/digit_base_form_input
widgets/atoms/digit_button
widgets/atoms/digit_checkbox
widgets/atoms/digit_checkbox_icon
widgets/atoms/digit_date_form_input
widgets/atoms/digit_dropdown_input
widgets/atoms/digit_info_card
widgets/atoms/digit_location_form_input
widgets/atoms/digit_multiselect_dropdown
widgets/atoms/digit_numeric_form_input
widgets/atoms/digit_password_form_input
widgets/atoms/digit_radio_list
widgets/atoms/digit_search_form_input
widgets/atoms/digit_text_area_form_input
widgets/atoms/digit_text_form_input
widgets/atoms/digit_time_form_input
widgets/atoms/digit_toast
widgets/atoms/digit_toggle
widgets/atoms/digit_toggle_list
widgets/atoms/digit_tree_select_dropdown
widgets/atoms/dropdown_wrapper
widgets/atoms/input_wrapper
widgets/atoms/labelled_fields
widgets/atoms/text_area_icons: Flutter icons TextArea Copyright (C) 2024 by original authors @ fluttericon.com, fontello.com This font was generated by FlutterIcon.com, which is derived from Fontello.
widgets/helper_widget/dropdown_options
widgets/helper_widget/selection_chip
widgets/helper_widget/tree_node_widget
widgets/powered_by_digit
widgets/scrollable_content
widgets/widgets