📦 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
- 🚀 Quick Start
- ✨ Features
- 📺 Demo
- 📖 Documentation
- 🤝 Contributing
- 📜 Copyright & License
- 🛍️ Marketplace
📸 Screenshot
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:
- Fork the repository on GitHub.
- Clone your forked repository:
git clone https://github.com/egovernments/DIGIT-UI-LIBRARIES
📜 Copyright & License
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/DropdownModels
- 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/bread_crumb_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/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_base_form_input
- widgets/atoms/digit_bread_crumbs
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_bar
- 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/dropdown_wrapper
- widgets/atoms/filter_card
- 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/camera_handler
- widgets/helper_widget/digit_profile
- widgets/helper_widget/dropdown_options
- 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/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