cdx_components 1.0.0

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

example/lib/main.dart

import 'package:cdx_components/app/components.dart';
import 'package:cdx_components/app/mappings.dart';
import 'package:cdx_components/core/models/dropdown_item.dart';
import 'package:cdx_components/core/models/form_item.dart';
import 'package:cdx_components/core/services/app/iapp_service.dart';
import 'package:cdx_components/core/services/app/ievent_service.dart';
import 'package:cdx_components/core/services/app/itheme_service.dart';
import 'package:cdx_components/core/services/app/imedia_service.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:cdx_components/widgets/custom_button.dart';
import 'package:cdx_components/core/models/t_uple.dart';
import 'package:example/services/app_theme_service.dart';
import 'package:example/services/app_service.dart';
import 'package:example/services/event_service.dart';
import 'package:example/services/media_service.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:rxdart/rxdart.dart';

class AppMappings extends Mappings {}
class AppComponents extends Components {}

void main() {
  GetIt.I.registerSingleton<IEventService>(EventService());
  GetIt.I.registerSingleton<IMediaService>(MediaService());
  GetIt.I.registerSingleton<IThemeService>(AppThemeService());
  GetIt.I.registerSingleton<IAppService>(
    AppService(mappings: AppMappings(), components: AppComponents()),
  );
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'cdx_components Example',
      theme: DI.theme().themeData,
      home: const Scaffold(
        body: SafeArea(child: FormExamplePage()),
      ),
    );
  }
}

class FormExamplePage extends StatefulWidget {
  const FormExamplePage({super.key});

  @override
  State<FormExamplePage> createState() => _FormExamplePageState();
}

class _FormExamplePageState extends State<FormExamplePage> {
  late final FormBuilderController _controller;
  late final BehaviorSubject<Pair<bool, Map<String, dynamic>>> _subject;
  late final BehaviorSubject<Map<String, FormItem>> _formMap;
  final BehaviorSubject<bool> _showErrorsSubject = BehaviorSubject();

  @override
  void initState() {
    super.initState();
    _subject = BehaviorSubject<Pair<bool, Map<String, dynamic>>>();
    _formMap = BehaviorSubject<Map<String, FormItem>>();

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

    final nations = [
      DropdownItem(title: 'Italia', value: 'IT'),
      DropdownItem(title: 'Messico', value: 'MX'),
      DropdownItem(title: 'Corea', value: 'KO'),
    ];

    _formMap.add({
      'title': FormItem<String>(
        hint: 'Title',
        type: FormType.text,
        validation: (v) => v?.toString().isNotEmpty == true,
        value: '',
        inRow: true,
      ),
      'description': FormItem<String>(
        hint: 'Description',
        type: FormType.multiline,
        validation: (v) => v?.toString().isNotEmpty == true,
        value: '',
      ),
      'author': FormItem<String>(
        hint: 'Author',
        type: FormType.text,
        validation: (_) => true,
        value: '',
        breakCol: true,
      ),
      'status': FormItem<DropdownItem?>(
        hint: 'Status',
        type: FormType.dropdown,
        validation: (v) => v != null,
        value: null,
        options: nations,
      ),
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    _subject.close();
    _formMap.close();
    _showErrorsSubject.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CdxFormBuilder(
          controller: _controller,
          hintStyle: const TextStyle(
            color: Colors.grey,
            fontWeight: FontWeight.w500,
            fontSize: 12,
          ),
          showErrorsStream: _showErrorsSubject.stream,
          errorMessage: 'Please fill the field',
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            children: [
              PrimaryButton(
                onPressed: () => _showErrorsSubject.add(true),
                text: 'Validate',
              ),
            ],
          ),
        ),
      ],
    );
  }
}