Flutter信用卡输入插件flutter_credit_card_new的使用
Flutter信用卡输入插件flutter_credit_card_new的使用
简介
flutter_credit_card_new 是一个用于在 Flutter 应用程序中轻松实现信用卡界面的包。它还支持卡片检测功能。
预览
安装
1. 添加依赖到 pubspec.yaml
从 pub.dartlang.org 获取最新版本并添加到 dependencies 中：
dependencies:
flutter_credit_card: <latest_version>
2. 导入包
在你的 Dart 文件中导入 flutter_credit_card 包：
import 'package:flutter_credit_card/flutter_credit_card.dart';
3. 添加 CreditCardWidget
带必需参数
CreditCardWidget(
cardNumber: cardNumber,
expiryDate: expiryDate,
cardHolderName: cardHolderName,
cvvCode: cvvCode,
showBackView: isCvvFocused, // true 当你想要显示背面（CVV）视图时
),
带可选参数
CreditCardWidget(
cardNumber: cardNumber,
expiryDate: expiryDate,
cardHolderName: cardHolderName,
cvvCode: cvvCode,
showBackView: isCvvFocused,
cardbgColor: Colors.black,
glassmorphismConfig: Glassmorphism.defaultConfig(),
backgroundImage: 'assets/card_bg.png',
obscureCardNumber: true,
obscureCardCvv: true,
isHolderNameVisible: false,
height: 175,
textStyle: TextStyle(color: Colors.yellowAccent),
width: MediaQuery.of(context).size.width,
isChipVisible: true,
isSwipeGestureEnabled: true,
animationDuration: Duration(milliseconds: 1000),
customCardIcons: [
CustomCardTypeImage(
cardType: CardType.mastercard,
cardImage: Image.asset(
'assets/mastercard.png',
height: 48,
width: 48,
),
),
],
),
Glassmorphism UI
默认配置
CreditCardWidget(
glassmorphismConfig: Glassmorphism.defaultConfig(),
),
自定义配置
CreditCardWidget(
glassmorphismConfig: Glassmorphism(
blurX: 10.0,
blurY: 10.0,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.grey.withAlpha(20),
Colors.white.withAlpha(20),
],
stops: const [
0.3,
0,
],
),
),
),
4. 添加 CreditCardForm
CreditCardForm(
formKey: formKey, // 必需
onCreditCardModelChange: (CreditCardModel data) {}, // 必需
themeColor: Colors.red,
obscureCvv: true,
obscureNumber: true,
isHolderNameVisible: false,
isCardNumberVisible: false,
isExpiryDateVisible: false,
cardNumberDecoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Number',
hintText: 'XXXX XXXX XXXX XXXX',
),
expiryDateDecoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Expired Date',
hintText: 'XX/XX',
),
cvvCodeDecoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'CVV',
hintText: 'XXX',
),
cardHolderDecoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Card Holder',
),
),
如何使用
检查 示例应用 或者在 pub.dartlang.org 上的 ‘Example’ 选项卡获取更完整的示例。
授信
此插件的动画灵感来自 Dribbble 上的艺术作品。
示例代码
以下是一个完整的示例代码：
import 'package:flutter/material.dart';
import 'package:flutter_credit_card_new/credit_card_brand.dart';
import 'package:flutter_credit_card_new/credit_card_form.dart';
import 'package:flutter_credit_card_new/credit_card_model.dart';
import 'package:flutter_credit_card_new/credit_card_widget.dart';
import 'package:flutter_credit_card_new/custom_card_type_icon.dart';
import 'package:flutter_credit_card_new/glassmorphism_config.dart';
void main() => runApp(MySample());
class MySample extends StatefulWidget {
[@override](/user/override)
State<StatefulWidget> createState() {
return MySampleState();
}
}
class MySampleState extends State<MySample> {
String cardNumber = '';
String expiryDate = '';
String cardHolderName = '';
String cvvCode = '';
bool isCvvFocused = false;
bool useGlassMorphism = false;
bool useBackgroundImage = false;
OutlineInputBorder? border;
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
[@override](/user/override)
void initState() {
border = OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey.withOpacity(0.7),
width: 2.0,
),
);
super.initState();
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Credit Card View Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
decoration: BoxDecoration(
image: !useBackgroundImage
? const DecorationImage(
image: ExactAssetImage('assets/bg.png'),
fit: BoxFit.fill,
)
: null,
color: Colors.black,
),
child: SafeArea(
child: Column(
children: <Widget>[
const SizedBox(
height: 30,
),
CreditCardWidget(
glassmorphismConfig:
useGlassMorphism ? Glassmorphism.defaultConfig() : null,
cardNumber: cardNumber,
expiryDate: expiryDate,
cardHolderName: cardHolderName,
cvvCode: cvvCode,
showBackView: isCvvFocused,
obscureCardNumber: true,
obscureCardCvv: true,
isHolderNameVisible: true,
cardBgColor: Colors.red,
backgroundImage:
useBackgroundImage ? 'assets/card_bg.png' : null,
isSwipeGestureEnabled: true,
onCreditCardWidgetChange:
(CreditCardBrand creditCardBrand) {},
customCardTypeIcons: [
CustomCardTypeIcon(
cardType: CardType.mastercard,
cardImage: Image.asset(
'assets/mastercard.png',
height: 48,
width: 48,
),
),
],
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
CreditCardForm(
formKey: formKey,
obscureCvv: true,
obscureNumber: true,
cardNumber: cardNumber,
cvvCode: cvvCode,
isHolderNameVisible: true,
isCardNumberVisible: true,
isExpiryDateVisible: true,
cardHolderName: cardHolderName,
expiryDate: expiryDate,
themeColor: Colors.blue,
cardNumberDecoration: InputDecoration(
labelText: 'Number',
hintText: 'XXXX XXXX XXXX XXXX',
hintStyle: const TextStyle(color: Colors.white),
labelStyle: const TextStyle(color: Colors.white),
focusedBorder: border,
enabledBorder: border,
),
expiryDateDecoration: InputDecoration(
hintStyle: const TextStyle(color: Colors.white),
labelStyle: const TextStyle(color: Colors.white),
focusedBorder: border,
enabledBorder: border,
labelText: 'Expired Date',
hintText: 'XX/XX',
),
cvvCodeDecoration: InputDecoration(
hintStyle: const TextStyle(color: Colors.white),
labelStyle: const TextStyle(color: Colors.white),
focusedBorder: border,
enabledBorder: border,
labelText: 'CVV',
hintText: 'XXX',
),
cardHolderDecoration: InputDecoration(
hintStyle: const TextStyle(color: Colors.white),
labelStyle: const TextStyle(color: Colors.white),
focusedBorder: border,
enabledBorder: border,
labelText: 'Card Holder',
),
onCreditCardModelChange: onCreditCardModelChange,
textStyle:
const TextStyle(color: Colors.white, fontSize: 12),
),
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Glassmorphism',
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
Switch(
value: useGlassMorphism,
inactiveTrackColor: Colors.grey,
activeColor: Colors.white,
activeTrackColor: Colors.green,
onChanged: (bool value) => setState(() {
useGlassMorphism = value;
}),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Card Image',
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
Switch(
value: useBackgroundImage,
inactiveTrackColor: Colors.grey,
activeColor: Colors.white,
activeTrackColor: Colors.green,
onChanged: (bool value) => setState(() {
useBackgroundImage = value;
}),
),
],
),
const SizedBox(
height: 20,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
primary: const Color(0xff1b447b),
),
child: Container(
margin: const EdgeInsets.all(12),
child: const Text(
'Validate',
style: TextStyle(
color: Colors.white,
fontFamily: 'halter',
fontSize: 14,
package: 'flutter_credit_card',
),
),
),
onPressed: () {
if (formKey.currentState!.validate()) {
print('valid!');
} else {
print('invalid!');
}
},
),
],
),
),
),
],
),
),
),
),
);
}
void onCreditCardModelChange(CreditCardModel? creditCardModel) {
setState(() {
cardNumber = creditCardModel!.cardNumber;
expiryDate = creditCardModel.expiryDate;
cardHolderName = creditCardModel.cardHolderName;
cvvCode = creditCardModel.cvvCode;
isCvvFocused = creditCardModel.isCvvFocused;
});
}
}
更多关于Flutter信用卡输入插件flutter_credit_card_new的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter信用卡输入插件flutter_credit_card_new的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
flutter_credit_card_new 是一个用于在 Flutter 应用程序中实现信用卡输入表单的插件。它提供了一个美观且功能齐全的信用卡输入界面，支持卡号、有效期、持卡人姓名和 CVV 的输入。以下是如何使用 flutter_credit_card_new 插件的详细步骤。
1. 添加依赖
首先，在 pubspec.yaml 文件中添加 flutter_credit_card_new 依赖：
dependencies:
flutter:
sdk: flutter
flutter_credit_card_new: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get 以安装依赖。
2. 导入插件
在你的 Dart 文件中导入插件：
import 'package:flutter_credit_card_new/flutter_credit_card_new.dart';
3. 使用 CreditCardForm
flutter_credit_card_new 提供了一个 CreditCardForm 小部件，你可以将它直接添加到你的 UI 中。以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:flutter_credit_card_new/flutter_credit_card_new.dart';
class CreditCardInputPage extends StatefulWidget {
[@override](/user/override)
_CreditCardInputPageState createState() => _CreditCardInputPageState();
}
class _CreditCardInputPageState extends State<CreditCardInputPage> {
String cardNumber = '';
String expiryDate = '';
String cardHolderName = '';
String cvvCode = '';
bool isCvvFocused = false;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Credit Card Input'),
),
body: SingleChildScrollView(
child: Column(
children: [
CreditCardForm(
onCreditCardModelChange: (CreditCardModel creditCardModel) {
setState(() {
cardNumber = creditCardModel.cardNumber;
expiryDate = creditCardModel.expiryDate;
cardHolderName = creditCardModel.cardHolderName;
cvvCode = creditCardModel.cvvCode;
isCvvFocused = creditCardModel.isCvvFocused;
});
},
themeColor: Colors.blue,
cardNumber: cardNumber,
expiryDate: expiryDate,
cardHolderName: cardHolderName,
cvvCode: cvvCode,
isCvvFocused: isCvvFocused,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// 处理信用卡信息
print('Card Number: $cardNumber');
print('Expiry Date: $expiryDate');
print('Card Holder Name: $cardHolderName');
print('CVV: $cvvCode');
},
child: Text('Submit'),
),
],
),
),
);
}
}