all_br_forms 1.0.0

Flutter input masks and form formatters for Brazilian documents, contact details, dates, currency, vehicles, and measurements.

example/lib/main.dart

import 'package:all_br_forms/all_br_forms.dart';
import 'package:all_br_validations/all_br_validations.dart';
import 'package:all_observer/all_observer.dart';
import 'package:flutter/material.dart';

void main() => runApp(const FormsExample());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FormsExamplePage(),
    );
  }
}

/// Demonstra dois cenários independentes:
///
/// 1. Flutter puro: máscaras em um [Form] com validação no envio.
/// 2. Integração opcional com all_observer: feedback derivado em tempo real.
class FormsExamplePage extends StatefulWidget {
  const FormsExamplePage({super.key});

  @override
  State<FormsExamplePage> createState() => _FormsExamplePageState();
}

class _FormsExamplePageState extends State<FormsExamplePage> {
  final _formKey = GlobalKey<FormState>();

  // O estado reativo existe apenas para o cenário que realmente precisa dele.
  final _companyDocument = ObsString('', name: 'companyDocument');

  late final Computed<String> _companyFeedback = Computed(() {
    final value = _companyDocument.value;
    if (value.isEmpty) return 'Digite um CNPJ';
    return BrZod().cnpjAlfa().build(value) == null
        ? 'CNPJ válido'
        : 'CNPJ inválido';
  });

  @override
  void dispose() {
    _companyFeedback.close();
    _companyDocument.close();
    super.dispose();
  }

  void _submitPureForm() {
    if (!(_formKey.currentState?.validate() ?? false)) return;
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Cadastro pronto para continuar')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('all_br_forms')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          Text('Flutter puro', style: Theme.of(context).textTheme.titleLarge),
          const SizedBox(height: 8),
          const Text(
            'Use as máscaras diretamente em TextField ou TextFormField. '
            'Nenhuma gerência de estado é necessária.',
          ),
          const SizedBox(height: 12),
          Form(
            key: _formKey,
            child: Column(
              children: [
                TextFormField(
                  key: const Key('cpfField'),
                  keyboardType: TextInputType.number,
                  inputFormatters: const [CpfMask()],
                  decoration: const InputDecoration(labelText: 'CPF'),
                  validator: BrZod().required().cpf().build,
                ),
                TextFormField(
                  key: const Key('phoneField'),
                  keyboardType: TextInputType.phone,
                  inputFormatters: const [PhoneMask()],
                  decoration: const InputDecoration(labelText: 'Celular'),
                  validator: BrZod().required().phone().build,
                ),
                const TextField(
                  key: Key('currencyField'),
                  keyboardType: TextInputType.number,
                  inputFormatters: [CurrencyMask()],
                  decoration: InputDecoration(labelText: 'Valor'),
                ),
                const SizedBox(height: 12),
                Align(
                  alignment: Alignment.centerLeft,
                  child: ElevatedButton(
                    key: const Key('validateButton'),
                    onPressed: _submitPureForm,
                    child: const Text('Validar cadastro'),
                  ),
                ),
              ],
            ),
          ),
          const Divider(height: 40),
          Text(
            'Feedback reativo opcional',
            style: Theme.of(context).textTheme.titleLarge,
          ),
          const SizedBox(height: 8),
          const Text(
            'Quando a interface precisa reagir enquanto o usuário digita, '
            'all_observer pode observar apenas o trecho que muda.',
          ),
          const SizedBox(height: 12),
          TextField(
            key: const Key('cnpjAlfaField'),
            textCapitalization: TextCapitalization.characters,
            inputFormatters: const [CnpjAlfaMask()],
            decoration: const InputDecoration(
              labelText: 'CNPJ numérico ou alfanumérico',
            ),
            onChanged: _companyDocument.setValue,
          ),
          Observer(
            () => Padding(
              padding: const EdgeInsets.only(top: 8),
              child: Text(
                _companyFeedback.value,
                key: const Key('companyFeedback'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}