flutter_credit_card_detector 3.0.0
flutter_credit_card_detector: ^3.0.0 copied to clipboard
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.
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 #
- Adicione dependência a
pubspec.yaml
dependencies:
flutter_credit_card_detector: ^3.0.0
- Importar o pacote
import 'package:flutter_credit_card_detector/flutter_credit_card_detector.dart';
- 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
),
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 fornecido.
Licença #
O flutter_credit_card_detector é liberado sob a licença MIT. Consulte LICENÇA para obter detalhes.