cdx_components 1.0.0

Flutter UI library with form builders, reactive widgets, theme services, and utilities for fast app development.

cdx_components

Flutter UI library with form builders, reactive widgets, theme and app services, and utilities for fast, consistent app development. Useful for data-driven apps, admin panels, and anything that needs rich forms, a shared theme, and optional backend/CRUD glue.

What it does

Forms

• CdxFormBuilder + FormBuilderController: build reactive forms from a stream of FormItem maps; validation and values in one place.
• FormItem supports many types: text, password, multiline, number, intNumber, date, dropdown, multiselect, checkbox, radio, image, images, checkArray, customArray, dragArray, custom, none. Optional: in-row layout, break row/col, visibility streams, custom builders, object/array mapping.
• InnerForm: nested forms and sub-forms with their own controller.
• FormArray / FormArrayCustom / FormArrayReorderable: repeatable blocks and drag-to-reorder.
• Stepper support (multi-step forms) and configurable FormStrategy (e.g. controller disposal, focus).

Theme and DI

• IThemeService: light/dark ColorSet, CdxInputThemeData, CdxButtonThemeData, paddings/radius per screen type (mobile, tablet, desktop). Use DI.theme() and DI.colors() in widgets.
• IAppService, IMediaService, IEventService: pluggable app/theme/media/event hooks; you implement and register with GetIt, the library calls them where needed (toast, dialogs, image upload, events).
• DI facade: DI.theme(), DI.app(), DI.media(), DI.events().

UI widgets

• Buttons: PrimaryButton, AccentButton, ErrorButton, outline variants, CustomColorButton (custom colors), optional loading and icons.
• Inputs: InputTextField (wraps TextField with theme, errors, keyboard actions), ReactiveImage, CustomColorPicker.
• Reactive controls: ReactiveDropdownButton, ReactiveMultiSelect, ReactiveCheckbox, ReactiveRadio, ReactiveArrayItem, MultiImage (all RxDart-friendly).
• Layout / data: CustomTable, CustomGrid, StatusWidget (loading/error/idle), DataBuilder, UserAvatar. Item list: Default, DefaultSettingRow, ItemListTemplate.

Cloud and data

• ICRUDService and CRUD service implementations with configurable strategies (e.g. push/force update). Platform interfaces: IDatabasePlatform, IFunctionsPlatform (for backend/cloud integration).

Utilities

• Extensions: IntExtension, DoubleExtension, StringExtension (e.g. formatTime, normalizedNumber, isValidE164PhoneNumber, toPrice, toPercentage), list helpers.
• Throttle / Debounce handlers for events.
• NumericRangeFormatter / NumericIntRangeFormatter for numeric fields.
• Pair, Triple, Quadruple, … (t_uple.dart), DropdownItem, FormType enum, Result and result types.

Installation

Add to your pubspec.yaml:

dependencies:
  cdx_components: ^1.0.0

Then run:

flutter pub get

Quick start

Dependency injection and theme

Register your app/theme/media/event services, then run the app:

import 'package:cdx_components/injector.dart';
import 'package:cdx_components/core/services/app/iapp_service.dart';
import 'package:cdx_components/core/services/app/itheme_service.dart';
// ... your service implementations

void main() {
  GetIt.I.registerSingleton<IThemeService>(MyThemeService());
  GetIt.I.registerSingleton<IAppService>(MyAppService(/* ... */));
  // IMediaService, IEventService as needed
  runApp(const MyApp());
}

Use DI.theme(), DI.app(), etc. where the library expects these services.

CdxFormBuilder with FormItem

Build a reactive form with FormBuilderController and CdxFormBuilder:

import 'package:cdx_components/core/models/form_item.dart';
import 'package:cdx_components/core/models/dropdown_item.dart';
import 'package:cdx_components/core/models/t_uple.dart';
import 'package:cdx_components/form/builder.dart';
import 'package:cdx_components/form/controller.dart';
import 'package:cdx_components/form/models/strategy.dart';
import 'package:cdx_components/injector.dart';
import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';

// In your State:
final _subject = BehaviorSubject<Pair<bool, Map<String, dynamic>>>();
final _formMap = BehaviorSubject<Map<String, FormItem>>.seeded({});

late final FormBuilderController _controller = FormBuilderController(
  subject: _subject,
  formMap: _formMap,
  focusMap: const {},
  strategy: FormStrategy.defaultStrategy,
  inputTheme: DI.theme().inputTheme,
);

void initForm() {
  _formMap.add({
    'name': FormItem(
      hint: 'Name',
      type: FormType.text,
      value: '',
      validation: (v) => v?.toString().isNotEmpty == true,
    ),
    'country': FormItem<DropdownItem?>(
      hint: 'Country',
      type: FormType.dropdown,
      value: null,
      validation: (v) => v != null,
      options: [
        DropdownItem(title: 'Italy', value: 'IT'),
        DropdownItem(title: 'France', value: 'FR'),
      ],
    ),
  });
}

// In build:
CdxFormBuilder(
  controller: _controller,
  hintStyle: TextStyle(color: DI.colors().minorText, fontSize: 12),
  showErrorsStream: showErrorsSubject.stream,
  errorMessage: 'Please fill the field',
);

Remember to dispose the controller and subjects in your State.dispose().

Buttons

import 'package:cdx_components/widgets/custom_button.dart';

PrimaryButton(onPressed: () {}, text: 'Save');
AccentButton(onPressed: () {}, text: 'Submit');

Example app

The example/ app shows:

• Registering theme, app, media, and event services with GetIt.
• A form built with CdxFormBuilder and FormBuilderController (text, multiline, dropdown).
• Use of PrimaryButton and validation error display.

Run it from the package root:

cd example && flutter run

Package structure

• lib/app/ – Constants, components base, mappings (extend for your app).
• lib/core/models/ – FormItem, FormType, theme data, dropdown/item types, result types.
• lib/core/services/ – App/theme/media/event interfaces; cloud CRUD and platform interfaces.
• lib/form/ – FormBuilderController, CdxFormBuilder (form builder widget).
• lib/widgets/ – Buttons, reactive widgets, tables, InnerForm, etc.
• lib/utils/ – Extensions, throttle/debounce, numeric formatters.
• lib/injector.dart – DI facade.

Import what you need from subpaths, for example:

• package:cdx_components/form/builder.dart – CdxFormBuilder
• package:cdx_components/form/controller.dart – FormBuilderController
• package:cdx_components/core/models/form_item.dart
• package:cdx_components/injector.dart

Requirements

• Dart ^3.10.1
• Flutter >=1.17.0

License

Apache-2.0. See LICENSE.