Flutter卡片布局插件flutter_cardidy的使用
Flutter卡片布局插件flutter_cardidy的使用
flutter_cardidy
是一个用于轻松验证或识别卡号和CVV的Flutter插件。它可以帮助你通过极少量的代码来验证卡号或CVV,并识别卡发行提供商。
特点
- 简单易用
- 无需正则表达式
- 数据更新及时,与维基百科保持同步
- 无其他依赖
- 文档详尽
- 生产就绪
说明
这个包是原始包 Cardidy 的Flutter端口,原包是用C#编写的。
注意
越接近官方规范,数据就越准确。官方规范可以在维基百科的支付卡号页面找到。
安装
在 pubspec.yaml
文件中添加依赖:
dependencies:
flutter_cardidy: ^1.0.0
开始使用
首先,导入包:
import 'package:flutter_cardidy/flutter_cardidy.dart';
单个卡号识别
// 单个卡号识别
final result = FlutterCardidy.identify("4127540509730813");
print(result.first); // 输出 Visa
多个卡号识别
// 返回一个键值对映射,键为卡号,值为识别结果
final mapResult = FlutterCardidy.identifyMultiple(["4127540509730813", "4771320594031"]);
验证CVV
var cvv = "123";
var visaCvvIsValid = FlutterCardidy.isCvvValid(cvv, CardType.Visa);
验证卡号(不进行识别)
var isCardValid = FlutterCardidy.isCardNumberValid("47!Z320594033");
属性
identify
方法的返回类型为 List<CardType>
。有时候一张卡可能是联合品牌卡,例如Visa或Visa Electron,这种情况下会返回所有匹配的提供商。
属性 | 类型 | 默认值 | 备注 |
---|---|---|---|
cardNumString | String | - | 输入的卡号字符串 |
validateLength | bool | true | 验证长度作为字符串识别的一部分。设置为false可以识别卡号片段。 |
ignoreNoise | bool | false | 忽略常见的卡号噪声,如 - . |
handleAnonymization | bool | false | 将所有非数字字符设为零。通常使用 X 和 # 来隐藏一些数字。 |
提升
如果你发现任何问题或有新的功能建议,请在GitHub上提交一个issue。
更多
访问 pub.dev 查看更多有用的包。
许可证
本项目采用MIT许可证。
完整示例Demo
以下是一个完整的示例,展示如何在Flutter应用中使用 flutter_cardidy
插件。
import 'package:flutter/material.dart';
import 'package:flutter_cardidy/flutter_cardidy.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Cardidy 示例'),
),
body: Center(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
// 单个卡号识别
final result = FlutterCardidy.identify("4127540509730813");
print(result.first); // 输出 Visa
},
child: Text('识别单个卡号'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// 多个卡号识别
final mapResult = FlutterCardidy.identifyMultiple(["4127540509730813", "4771320594031"]);
print(mapResult);
},
child: Text('识别多个卡号'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// 验证CVV
var cvv = "123";
var visaCvvIsValid = FlutterCardidy.isCvvValid(cvv, CardType.Visa);
print(visaCvvIsValid); // 输出 true 或 false
},
child: Text('验证CVV'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// 验证卡号(不进行识别)
var isCardValid = FlutterCardidy.isCardNumberValid("47!Z320594033");
print(isCardValid); // 输出 true 或 false
},
child: Text('验证卡号'),
),
],
),
),
),
),
),
);
}
}
更多关于Flutter卡片布局插件flutter_cardidy的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter卡片布局插件flutter_cardidy的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
flutter_cardidy
是一个强大的 Flutter 插件,用于帮助开发者更轻松地实现复杂的卡片布局。它提供了多种卡片布局方式,可以让你在应用中快速构建美观且响应式的卡片设计。以下是如何使用 flutter_cardidy
插件的基本步骤和示例。
1. 添加依赖
首先,你需要在 pubspec.yaml
文件中添加 flutter_cardidy
的依赖:
dependencies:
flutter:
sdk: flutter
flutter_cardidy: ^1.0.0 # 请确保版本号是最新的
然后运行 flutter pub get
来安装依赖。
2. 基本使用
flutter_cardidy
提供了多种卡片布局方式,以下是基本的用法示例:
import 'package:flutter/material.dart';
import 'package:flutter_cardidy/flutter_cardidy.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Cardidy Example'),
),
body: CardidyLayout(
children: [
CardidyItem(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text('Card 1'),
),
),
),
CardidyItem(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text('Card 2'),
),
),
),
CardidyItem(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text('Card 3'),
),
),
),
],
),
),
);
}
}
3. 配置卡片布局
CardidyLayout
允许你配置卡片的布局方式。以下是一些常用的配置选项:
- columns: 设置卡片布局的列数。
- spacing: 设置卡片之间的间距。
- padding: 设置卡片布局的内边距。
CardidyLayout(
columns: 2,
spacing: 8.0,
padding: EdgeInsets.all(16.0),
children: [
CardidyItem(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text('Card 1'),
),
),
),
CardidyItem(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text('Card 2'),
),
),
),
// 更多卡片...
],
)
4. 响应式布局
flutter_cardidy
支持响应式布局,你可以根据屏幕宽度动态调整卡片的列数。
CardidyLayout(
columns: MediaQuery.of(context).size.width > 600 ? 3 : 2,
children: [
// 卡片...
],
)
5. 自定义卡片样式
你可以通过 CardidyItem
的 child
属性自定义每个卡片的内容和样式。
CardidyItem(
child: Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Column(
children: [
Image.network('https://via.placeholder.com/150'),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Card with Image'),
),
],
),
),
)
6. 复杂布局
你可以在 CardidyLayout
中嵌套使用其他布局组件,以实现更复杂的布局结构。
CardidyLayout(
children: [
CardidyItem(
child: Column(
children: [
Text('Top Section'),
Divider(),
Text('Bottom Section'),
],
),
),
CardidyItem(
child: GridView.count(
crossAxisCount: 2,
children: List.generate(4, (index) => Text('Item $index')),
),
),
],
)