A Flutter package to easily create a Credit Card in your application.
License: MIT License
I am a 25 years old developer based in India 🇮🇳. I make apps, open source programs and libraries. I love building things, creating something new, solving problems, watching movies (Marvel Fan 🤭) and listening to Taylor Swift 💃🏼.
Check out my github for new open source libraries.
Is there any way that we can change the BackgroundCard Color?
For example red or blue so we can make it approach to the user's card.
Thank You
@iamvivekkaushik
India cards have additional security like some random data at the backside like the below picture. I want to store this information
fix card number overflow
class CardFrontLayout {
String bankName;
String cardNumber;
String cardExpiry;
String cardHolderName;
Widget cardTypeIcon;
double cardWidth;
double cardHeight;
Color textColor;
CardFrontLayout(
{this.bankName = "",
this.cardNumber = "",
this.cardExpiry = "",
this.cardHolderName = "",
this.cardTypeIcon,
this.cardWidth = 0,
this.cardHeight = 0,
this.textColor});
Widget layout1() {
return Padding(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 8,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 30,
child: Center(
child: Text(
bankName,
style: TextStyle(color: textColor, fontSize: 17, fontWeight: FontWeight.w500),
),
),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: new Image.asset(
'images/contactless_icon.png',
fit: BoxFit.fitHeight,
width: 30.0,
height: 30.0,
color: textColor,
package: 'awesome_card',
),
),
),
],
),
Expanded(
child: Align(
alignment: Alignment.bottomLeft,
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
/////////////////////////////////// fix here ///////////////////////////////////////
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
cardNumber == null || cardNumber.isEmpty ? 'XXXX XXXX XXXX XXXX' : cardNumber,
style: TextStyle(
package: 'awesome_card',
color: textColor,
fontWeight: FontWeight.w500,
fontFamily: "MavenPro",
fontSize: 20,
),
maxLines: 1,
overflow: TextOverflow.fade,
),
),
),
SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Exp. Date",
style: TextStyle(
package: 'awesome_card', color: textColor, fontFamily: "MavenPro", fontSize: 15),
),
SizedBox(
width: 10,
),
Text(
cardExpiry == null || cardExpiry.isEmpty ? "MM/YY" : cardExpiry,
style: TextStyle(
package: 'awesome_card',
color: textColor,
fontWeight: FontWeight.w500,
fontFamily: "MavenPro",
fontSize: 16),
),
],
),
SizedBox(
height: 15,
),
Text(
cardHolderName == null || cardHolderName.isEmpty ? "Card Holder" : cardHolderName,
style: TextStyle(
package: 'awesome_card',
color: textColor,
fontWeight: FontWeight.w500,
fontFamily: "MavenPro",
fontSize: 17),
),
],
),
),
cardTypeIcon
],
),
),
),
),
],
),
);
}
}
getting this error how to resolve this.
Here is the code
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.indigo,
title: Text("Saved Cards"),
),
body: Builder(builder: (BuildContext context) {
return Column(
// mainAxisAlignment: MainAxisAlignment.end,
children: [
CreditCard(
cardNumber: "5450 7879 4864 7854",
cardExpiry: "10/25",
cardHolderName: "Mohammad Hamza Gaya",
cvv: "456",
bankName: "Axis Bank",
showBackSide: false,
frontBackground: CardBackgrounds.black,
backBackground: CardBackgrounds.black,
showShadow: false,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.indigo,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: FlatButton(
onPressed: () {
Navigator.pushNamed(context, '/addNewCard');
},
child: Text(
"Add New Card",
style:
TextStyle(fontSize: 18, color: Colors.white),
)),
),
],
)),
),
],
);
}),
);
Hello, how I get the card type once the user has finished the number?
Hello!
Thanks a lot for this very useful package!
I am trying to use it on a mobile banking app and would like to customize text (text size especially). What about adding new features according to card's text customization
Regards
Displaying the card, the form with 4 lines and the keyboard takes too much place on a normal screen.
Do you plan to provide a more compact layout of the form on 1 on 2 lines maximum ?
1 line form layout: https://stripe.com/docs/stripe-js
Thank you for beautiful plugin. Could you add some functionality to change background image or color custom for card.
it's a deal breaker for style.
please remove default horizontal margin.
the package is practically useless as it has only one card manufacturer logo on it. Please add other bank details also / make it optional
Running on an iPhone 5s and getting 'Bottom Overflowed By 11 Pixels." Not sure if I have something wrong or if anyone else has seen this?
Hi, I clone this AwesomeCard flutter project. An exception occured when running. seel below:
FAILURE: Build failed with an exception.
Could not resolve all artifacts for configuration ':classpath'.
Could not resolve org.antlr:antlr4:4.5.3.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > androidx.databinding:databinding-compiler-common:3.2.1
> Could not resolve org.antlr:antlr4:4.5.3.
> Could not parse POM https://jcenter.bintray.com/org/antlr/antlr4/4.5.3/antlr4-4.5.3.pom
> Could not resolve org.antlr:antlr4-master:4.5.3.
> Could not resolve org.antlr:antlr4-master:4.5.3.
> Could not parse POM https://jcenter.bintray.com/org/antlr/antlr4-master/4.5.3/antlr4-master-4.5.3.pom
> Could not resolve org.sonatype.oss:oss-parent:9.
> Could not resolve org.sonatype.oss:oss-parent:9.
> Could not get resource 'https://jcenter.bintray.com/org/sonatype/oss/oss-parent/9/oss-parent-9.pom'.
> Could not GET 'https://jcenter.bintray.com/org/sonatype/oss/oss-parent/9/oss-parent-9.pom'.
> Read timed out
Could not resolve org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.2.71.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.2.71
> Skipped due to earlier error
Could not resolve net.sf.proguard:proguard-base:6.0.3.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > net.sf.proguard:proguard-gradle:6.0.3
> Skipped due to earlier error
Could not resolve com.google.auto.value:auto-value:1.5.2.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:bundletool:0.5.0
> Skipped due to earlier error
Could not resolve com.google.errorprone:error_prone_annotations:2.2.0.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:bundletool:0.5.0
> Skipped due to earlier error
Could not resolve com.google.protobuf:protobuf-java:3.4.0.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:bundletool:0.5.0
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools:sdk-common:26.2.1
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools.analytics-library:protos:26.2.1
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools.analytics-library:tracker:26.2.1
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:bundletool:0.5.0 > com.android.tools.build:aapt2-proto:0.3.1
> Skipped due to earlier error
Could not resolve com.google.protobuf:protobuf-java-util:3.4.0.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:bundletool:0.5.0
> Skipped due to earlier error
Could not resolve org.jdom:jdom2:2.0.6.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build.jetifier:jetifier-processor:1.0.0-alpha10
> Skipped due to earlier error
Could not resolve org.jetbrains.kotlin:kotlin-stdlib-common:1.2.71.
Required by:
project : > org.jetbrains.kotlin:kotlin-gradle-plugin:1.2.71 > org.jetbrains.kotlin:kotlin-stdlib:1.2.71
> Skipped due to earlier error
Could not resolve org.jetbrains:annotations:13.0.
Required by:
project : > org.jetbrains.kotlin:kotlin-gradle-plugin:1.2.71 > org.jetbrains.kotlin:kotlin-stdlib:1.2.71
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools:sdklib:26.2.1 > com.android.tools.layoutlib:layoutlib-api:26.2.1
> Skipped due to earlier error
Could not resolve org.jetbrains.kotlin:kotlin-script-runtime:1.2.71.
Required by:
project : > org.jetbrains.kotlin:kotlin-gradle-plugin:1.2.71 > org.jetbrains.kotlin:kotlin-compiler-embeddable:1.2.71
> Skipped due to earlier error
Could not resolve org.jetbrains.kotlin:kotlin-build-common:1.2.71.
Required by:
project : > org.jetbrains.kotlin:kotlin-gradle-plugin:1.2.71 > org.jetbrains.kotlin:kotlin-compiler-runner:1.2.71
> Skipped due to earlier error
Could not resolve org.jetbrains.kotlin:kotlin-daemon-client:1.2.71.
Required by:
project : > org.jetbrains.kotlin:kotlin-gradle-plugin:1.2.71 > org.jetbrains.kotlin:kotlin-compiler-runner:1.2.71
> Skipped due to earlier error
Could not resolve org.apache.commons:commons-compress:1.12.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools:sdklib:26.2.1
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools:sdklib:26.2.1 > com.android.tools:repository:26.2.1
> Skipped due to earlier error
Could not resolve javax.inject:javax.inject:1.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools:sdk-common:26.2.1
> Skipped due to earlier error
Could not resolve net.sf.kxml:kxml2:2.3.0.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools.build:manifest-merger:26.2.1
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools.ddms:ddmlib:26.2.1
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools:sdklib:26.2.1 > com.android.tools.layoutlib:layoutlib-api:26.2.1
> Skipped due to earlier error
Could not resolve com.google.code.findbugs:jsr305:1.3.9.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools.build:apkzlib:3.2.1
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.analytics-library:shared:26.2.1 > com.google.guava:guava:23.0
> Skipped due to earlier error
Could not resolve com.google.errorprone:error_prone_annotations:2.2.0.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.analytics-library:shared:26.2.1 > com.google.guava:guava:23.0
> Skipped due to earlier error
Could not resolve com.google.j2objc:j2objc-annotations:1.1.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.analytics-library:shared:26.2.1 > com.google.guava:guava:23.0
> Skipped due to earlier error
Could not resolve org.codehaus.mojo:animal-sniffer-annotations:1.14.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.analytics-library:shared:26.2.1 > com.google.guava:guava:23.0
> Skipped due to earlier error
Could not resolve commons-logging:commons-logging:1.2.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.analytics-library:crash:26.2.1 > org.apache.httpcomponents:httpclient:4.5.2
> Skipped due to earlier error
Could not resolve commons-codec:commons-codec:1.9.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.analytics-library:crash:26.2.1 > org.apache.httpcomponents:httpclient:4.5.2
> Skipped due to earlier error
Could not resolve com.sun.activation:javax.activation:1.2.0.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools:sdklib:26.2.1 > com.android.tools:repository:26.2.1
> Skipped due to earlier error
Could not resolve org.glassfish.jaxb:jaxb-runtime:2.2.11.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools:sdklib:26.2.1 > com.android.tools:repository:26.2.1
> Skipped due to earlier error
Could not resolve com.google.jimfs:jimfs:1.1.
Required by:
project : > com.android.tools.build:gradle:3.2.1 > com.android.tools.build:builder:3.2.1 > com.android.tools:sdklib:26.2.1 > com.android.tools:repository:26.2.1
> Skipped due to earlier error
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
Get more help at https://help.gradle.org
BUILD FAILED in 5m 20s
Finished with error: Gradle task assembleDebug failed with exit code 1
I can not figure it out. I dont know if this occurred to you. thank you.
amex mask is not right
xxxx xxxxx xxx
Hi,
First of all thank you for the widget. In my use case I am using stripe to store the card info, so on the front end stripe will only return the last 4 digits of the card, so by that method I cannot get card brand to show in this widget.
However stripe, returns the card brand (i.e. Visa, Master Card etc). So would be great if you can add a field in your card initialiser that allows us to manually add a card brand.
Thanks!
Running the example app on flutter web shows that the animation is broken, the card does rotate but there is that constant artifact in the middle.
Hello.
I can't control overflow. When the holder name is too much, it should go down one line.
to solve this just edit the file card_back_layout.dart and modify the return with this.
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 30,
),
Expanded(
child: Container(
color: Colors.black,
height: 50,
),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
color: Colors.grey,
height: 50,
),
flex: 3,
),
Expanded(
flex: 1,
child: Center(
child: Text(
cvv.toString(),
style: TextStyle(
fontSize: 21,
fontWeight: FontWeight.w500,
color: Colors.black
),
),
)
),
],
),
SizedBox(
height: 40,
),
],
);
it is responsive, please apply y the next update.
regards
Do you plan to update to null-safety ?
Thank you
howing dependencies that are currently not opted in to null-safety.
[✗] indicates versions without null safety support.
[✓] indicates versions opting in to null safety.
Package Name Current Upgradable Resolvable Latest
direct dependencies:
awesome_card ✗1.1.0 ✗1.1.0 ✗1.1.0 ✗1.1.0
You are already using the newest resolvable versions listed in the 'Resolvable' column.
Newer versions, listed in 'Latest', may not be mutually compatible.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.