flutter_credit_card_detector

Um pacote Flutter que permite você implementar facilmente a interface do usuário do cartão de crédito com a detecção do cartão.

Preview

Screenshot

Aplicativo disponível na Play Store

Uso

1. Adicione dependência a pubspec.yaml

dependencies:
    flutter_credit_card_detector: ^3.0.4

2. Importar o pacote

import 'package:flutter_credit_card_detector/flutter_credit_card_detector.dart';

3. Adicionando CreditCardWidget

• Com parâmetros requeridos

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ControllerBase()),
      ],
      child: const MaterialApp(
        home: Scaffold(
          body: CreditCardWidget(onTap: _onTap),
        ),
      ),
    ),
  );
}

void _onTap() {
  debugPrint('Numero do cartão: $creditCardNumber');
  debugPrint('Nome no cartão: $creditCardName');
  debugPrint('Valido até: $creditCardExpData');
  debugPrint('CVV: $creditCardCVV');
  debugPrint('Bandeira: $creditCardBand');
  debugPrint('CPF: $creditCardCPF');
}

• Com parâmetros opcionais

CreditCardWidget(
        labelTextNum: 'Numero do cartão', // Texto exibido no textField
        labelTextName: 'Nome no cartão', // Texto exibido no textField
        labelTextExpData: 'MM/YY', // Texto exibido no textField
        labelTextCVV: 'CVV/CVC', // Texto exibido no textField
        labelTextCPF: 'CPF do Titular', // Texto exibido no textField
        labelTextButton: 'Efetuar pagamento', // Texto do button
        titleCreditCard: 'Cartão de Crédito', // Título do cartão
        labelTextValidate: 'Valido Até', // Texto de validade do cartão
        textRequired: 'Campo é obrigatorio', // Mensagem de erro no textField - campos vazios
        textSelectBand: 'Selecione a bandeira', // Mensagem de erro no textField - quando a bandeira não é identificada
        textNameMin: 'O nome deve conter pelo menos 3 caracteres', // Mensagem de erro no textField - campo nome
        textIntroNameValid: 'Insira um nome válido', // Mensagem de erro no textField - campo nome
        textCardExpired: 'Cartão vencido', // Mensagem de erro no textField - campo validade do cartão
        textInvalidateMonth: 'Mês incorreto.', // Mensagem de erro no textField - campo validade do cartão
        colorButton: const Color(0xFFfec177), // Cor do button
        colorTextButton: Colors.white, // Cor do texto no button
        colorTextField: Colors.grey, // Cor do texto no textField
        colorCardSelect: const Color(0xFFfec177), // Cor do card selecionado
        colorCreditWhite: const Color(0xff535252), // Cor do cartão
        colorCreditBlack: const Color(0xff211e1e), // Cor do cartão
        textSizeNumber: 0.06, // Tamanho do número apresentado no cartão
        textSizeName: 0.04, // Tamanho do nome apresentado no cartão
        textSizeMonth: 0.03, // Tamanho do texto apresentado no cartão
        textSizeCVC: 0.03, // Tamanho do texto apresentado no cartão
        cardStylePreset: CreditCardStylePreset.modern, // custom, modern, glass, midnight
        fontFamily: 'Roboto', // Fonte do cartão
        cardBorderRadius: 18, // Borda do cartão
        cardElevation: 7, // Elevação do cartão
        cardMargin: const EdgeInsets.symmetric(horizontal: 8),
        cardContentPadding: const EdgeInsets.all(18),
        titleTextStyle: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
        numberTextStyle: const TextStyle(fontSize: 36, letterSpacing: 1.6),
        nameTextStyle: const TextStyle(fontSize: 18),
        detailLabelTextStyle: const TextStyle(fontSize: 12),
        detailValueTextStyle: const TextStyle(fontSize: 16),
        viewLayout: false, // Vertical = false, Horizontal = true
        cpfVisibility: true, // Campo do CPF visível = true e false para ocultar o campo
        listBand: ['visa', 'mastercard'], // Definir quais cartões estarão disponíveis
        onTap: onTap, // Função
),

Personalização dos campos de texto (TextFormField)

O CreditCardWidget repassa para todos os campos (número, nome, validade, CVV, CPF) os parâmetros opcionais:

• inputDecoration — InputDecoration completo (o erro de validação continua sendo mesclado).
• inputContentPadding — padding interno (quando não usa inputDecoration).
• inputBorder, inputEnabledBorder, inputFocusedBorder, inputErrorBorder, inputFocusedErrorBorder — bordas no modo padrão (sem inputDecoration).

CreditCardWidget(
  onTap: onTap,
  inputContentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
  inputBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide(color: Colors.orange, width: 1.5),
  ),
  inputFocusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide(color: Colors.deepOrange, width: 2),
  ),
);

Para controle fino por campo, use o widget CreditCardInputField diretamente (também exportado por flutter_credit_card_detector.dart).

Preenchimento via câmera / OCR (opcional)

O pacote não inclui câmera nem OCR: você implementa a captura e o reconhecimento no app e devolve os dados com CardScanResult. O CreditCardWidget aplica apenas os campos preenchidos (número, nome e validade). CVV e CPF continuam manuais quando aplicável.

Parâmetros:

• showCardScanAction — exibe o ícone ao lado do número (padrão false).
• onCardScan — Future<CardScanResult?> Function()?: abrir câmera, processar imagem, retornar CardScanResult ou null.
• cardScanIcon, cardScanIconColor, cardScanTooltip — personalização opcional do ícone padrão.
• cardScanButtonBuilder — substitui o layout inteiro do botão ao lado do número; recebe CardScanButtonData (enabled, loading, onPressed, icon, iconColor, tooltip). Conecte onPressed ao seu widget (ex.: IconButton, FilledButton).

CreditCardWidget(
  onTap: onTap,
  showCardScanAction: true,
  onCardScan: () async {
    // Ex.: image_picker + google_mlkit_text_recognition
    return CardScanResult(
      cardNumber: '4111111111111111',
      holderName: 'NOME NO CARTAO',
      expiryMmYy: '12/30',
    );
  },
);

Layout do botão customizado:

CreditCardWidget(
  onTap: onTap,
  showCardScanAction: true,
  onCardScan: myScan,
  cardScanButtonBuilder: (context, data) {
    return IconButton.filledTonal(
      onPressed: data.onPressed,
      tooltip: data.tooltip,
      icon: data.loading
          ? SizedBox(
              width: 22,
              height: 22,
              child: CircularProgressIndicator(strokeWidth: 2),
            )
          : Icon(data.icon, color: data.iconColor),
    );
  },
);

Recursos

• Cartões suportados:
  • Visa
  • Mastercard
  • American Express
  • Maestro
  • UnionPay
  • Troy
  • Dankort
  • UATP
  • Aura
  • DinersClub
  • Discover
  • Elo
  • Hiper
  • Hipercard
  • JCB
  • Rupay

Para mais detalhes sobre o uso, confira o aplicativo example: a aba Custom usa cardScanButtonBuilder; Horizontal usa o botão padrão do pacote (dados simulados).

Licença

O flutter_credit_card_detector é liberado sob a licença MIT. Consulte LICENÇA para obter detalhes.