📦 Digit UI Components

A collection of reusable Flutter UI widgets designed to enhance development efficiency and maintain UI consistency. It includes atoms (basic UI elements), molecules (combinations of atoms), and wrapper components (higher-level UI structures), all customizable and easy to use.


📑 Table of Contents


📸 Screenshot

Digit UI Components Preview
A preview of some UI components included in this package.


🚀 Quick Start

Add the package to your pubspec.yaml and run the following command:

dependencies:
  digit_ui_components: 0.2.0

Then run:

   flutter pub get

Usage

Import the package in your Dart code:

   import 'package:digit_ui_components/digit_components.dart';

✨ Features

✅ 25+ Atoms (buttons, text fields, icons, etc.)

✅ 10+ Molecules (form fields, cards, alerts, etc.)

✅ 2+ Wrapper Components (Table Wrapper, etc.)

✅ Built-in validation and theming support

✅ Designed for scalability and reusability


📺 Demo

🎥 Live Demo: Watch the Demo

For detailed examples and usage, visit the Full Documentation.


📖 Documentation

📚 Full Documentation: Digit UI Components Documentation

Explore detailed guides, API references, and best practices to maximize the potential of Digit UI Components.


🎨 Component Overview

🟢 Atoms (Basic UI Elements)

  • Buttons
  • Text Fields
  • Alert Cards
  • Checkboxes
  • Radio Buttons
  • and More

🔵 Molecules (Combinations of Atoms)

  • Form Cards
  • Cards
  • Panel Cards
  • Table
  • hamburger
  • and More

🟠 Wrapper Components (High-Level Structures)

  • Table Wrapper Components
  • and more

📌 For a complete list of components and examples, visit our Full Documentation.


🤝 Contributing

Contributions are welcome! If you'd like to improve this package, follow these steps:

  1. Fork the repository on GitHub.
  2. Clone your forked repository:
    git clone https://github.com/egovernments/DIGIT-UI-LIBRARIES
    

This project is licensed under the MIT License. See the LICENSE file for more details.


🛍️ Marketplace

This package is available on:

Libraries

constants/app_constants
constants/AppView
constants/constant
digit_components
enum/app_enums
models/accordionModel
models/models
models/privacy_notice/privacy_notice_model
models/RadioButtonModel
models/toggleButtonModel
models/TreeModel
services/AppLocalization
services/component_localization_delegate
services/DateSelection
services/location_bloc
services/location_fetch_bloc
services/TimeSelectionBloc
theme/colors
theme/ColorTheme/color_theme
theme/ColorTheme/dark_color_theme
theme/ColorTheme/light_color_theme
theme/ComponentTheme/action_card_theme
theme/ComponentTheme/back_button_theme
theme/ComponentTheme/button_theme
theme/ComponentTheme/checkbox_theme
theme/ComponentTheme/chip_theme
theme/ComponentTheme/digit_accordion_theme
theme/ComponentTheme/digit_tab_bar_theme
theme/ComponentTheme/digit_tag_theme
theme/ComponentTheme/divider_theme
theme/ComponentTheme/info_card_theme
theme/ComponentTheme/panel_theme
theme/ComponentTheme/pop_up_card_theme
theme/ComponentTheme/radio_list_theme
theme/ComponentTheme/switch_theme
theme/ComponentTheme/toast_theme_data
theme/digit_colors
theme/digit_extended_theme
theme/digit_theme
theme/digit_theme_wrapper
theme/digit_typography
theme/spacers
theme/SpacerTheme/spacer_theme
theme/text_theme_extension
theme/TextTheme/button_text_theme
theme/TextTheme/desktop_text_theme
theme/TextTheme/digit_text_theme
theme/TextTheme/mobile_text_theme
theme/TextTheme/tab_text_theme
theme/theme
theme/theme_notifier
theme/typography
utils/app_logger
utils/component_utils
utils/date_utils
utils/fileService/file_download
utils/fileService/file_service
utils/fileService/mobile_file_download
utils/fileService/mobile_file_service
utils/fileService/web_file_download
utils/fileService/web_file_service
utils/i18_key_constants
utils/time_utils
utils/utils
utils/validators/file_validator
utils/validators/image_validator
utils/validators/validator
widgets/atoms/accordion
widgets/atoms/digit_action_card
A widget that displays a dialog with a list of action DigitButtons. The dialog can be customized with width, height, and spacing between DigitButtons. Example usage:
widgets/atoms/digit_back_button
widgets/atoms/digit_base_form_input
widgets/atoms/digit_bread_crumbs
widgets/atoms/digit_button
DigitButton is a customizable DigitButton widget that supports various styles and states. This widget provides options for primary, secondary, tertiary, and link DigitButton types. It handles hover effects, disabled state, and different icon placements. DigitButton comes with different sizes also-- large, medium and small Example usage:
widgets/atoms/digit_checkbox
DigitCheckbox is a DigitCheckbox component with a label and optional icon customization. This widget allows the user to toggle between checked and unchecked states. It supports customization of the DigitCheckbox icon color, label, and disabled state. Example usage:
widgets/atoms/digit_checkbox_icon
widgets/atoms/digit_chip
widgets/atoms/digit_date_form_input
DigitDateFormInput is a customizable formfield widget that extends the baseforminput.
widgets/atoms/digit_divider
widgets/atoms/digit_dob_picker
widgets/atoms/digit_dropdown_input
The DigitDropdownExample widget is a stateful widget that initializes a TextEditingController and a list of DropdownItem objects. The DigitDropdown component is then used with the provided parameters, and the onChange callback is used to handle the selected value. Example usage:
widgets/atoms/digit_info_card
InfoCard is a component used to display information with an icon and a description. It can be used to show different types of information such as success, error, warning, or general info. The card can optionally include additional widgets below the description. InfoCard( title: 'Welcome', type: InfoType.success, description: 'This is a success message.', additionalWidgets: ElevatedDigitButton( onPressed: () { // Handle DigitButton tap }, child: Text('OK'), ), , ),
widgets/atoms/digit_loader
widgets/atoms/digit_location_form_input
DigitLocationFormInput` is a customizable formfield widget that extends the baseforminput.
widgets/atoms/digit_multiselect_dropdown
the MultiSelectDropDown component is used to create a multi-select dropdown with a list of options. The onOptionSelected callback is used to handle the selected items, and the appearance of the dropdown, chips, and other elements can be customized using various properties. Example usage:
widgets/atoms/digit_numeric_form_input
DigitNumericFormInput is a customizable formfield widget that extends the baseforminput.
widgets/atoms/digit_otp
widgets/atoms/digit_password_form_input
DigitPasswordFormInput is a customizable formfield widget that extends the baseforminput.
widgets/atoms/digit_radio_list
RadioList is a widget for rendering a list of radio DigitButtons. This widget provides options for radio DigitButtons, handling hover effects, and a disabled state. Example usage:
widgets/atoms/digit_search_form_input
DigitSearchFormInput is a customizable form-field widget that extends the baseforminput.
widgets/atoms/digit_stepper
widgets/atoms/digit_tab
widgets/atoms/digit_tag
widgets/atoms/digit_text_area_form_input
DigitTextAreaFormInput is a customizable formfield widget that extends the baseforminput.
widgets/atoms/digit_text_form_input
DigitTextFormInput is a customizable textformfield widget that extends the baseforminput.
widgets/atoms/digit_time_form_input
DigitTextFormInput is a customizable textformfield widget that extends the baseforminput
widgets/atoms/digit_toast
widgets/atoms/digit_toggle
widgets/atoms/digit_toggle_list
ToggleList is a row of toggle DigitButtons that allows selecting one item at a time. Example usage:
widgets/atoms/digit_tree_select_dropdown
The TreeSelectDropDown component is a Flutter dropdown widget with a tree-like structure, allowing the selection of multiple or single options It initializes the options, selected options, and other configurations. It supports the integration of a TreeSelectController for programmatically controlling the dropdown. It provides customization options for the appearance of the dropdown, chips, and other elements. Example usage:
widgets/atoms/filter_card
widgets/atoms/group_menu_card
widgets/atoms/info_buttons
widgets/atoms/input_wrapper
widgets/atoms/label_value_list
widgets/atoms/labelled_fields
widgets/atoms/matrix_card
widgets/atoms/panel
A custom Panel widget that displays a title, an optional description, and an animation. The panel can be of type success or error, each having distinct background colors, animation sizes, and paddings. The appearance of the panel can be customized using the PanelThemeData theme extension.
widgets/atoms/pop_up_card
A customizable popup dialog widget. Example use
widgets/atoms/reactive_fields
widgets/atoms/selection_card
widgets/atoms/switch
widgets/atoms/table_body
widgets/atoms/table_cell
widgets/atoms/table_column
widgets/atoms/table_container
widgets/atoms/table_header
widgets/atoms/text_block
widgets/atoms/timeline
widgets/atoms/tool_tip
widgets/atoms/tooltip_2
widgets/atoms/upload_drag
widgets/atoms/upload_image
widgets/atoms/upload_popUp
widgets/helper_widget/button_list
widgets/helper_widget/camera_handler
widgets/helper_widget/digit_profile
widgets/helper_widget/overflow_detector
widgets/helper_widget/overlay_dropdown
widgets/helper_widget/simple_dropdown_list
widgets/helper_widget/tree_node_widget
widgets/localized
widgets/molecules/bottom_sheet
widgets/molecules/digit_card
widgets/molecules/digit_header
widgets/molecules/digit_slider
widgets/molecules/digit_table
widgets/molecules/digit_timeline_molecule
widgets/molecules/form_card
widgets/molecules/hamburger
widgets/molecules/label_value_summary
widgets/molecules/landing_page_card
widgets/molecules/landing_page_card_list
widgets/molecules/language_selection_card
widgets/molecules/panel_cards
widgets/molecules/show_pop_up
widgets/molecules/side_nav_bar
widgets/molecules/table_container
widgets/powered_by_digit
widgets/privacy_notice/privacy_component
widgets/privacy_notice/privacy_notice_dialog
widgets/privacy_notice/privacy_notice_expand_component
widgets/scrollable_content
widgets/widgets