Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Origogi/Flutter-Credit-Card-Input
Flutter Credit Card Input form
https://github.com/Origogi/Flutter-Credit-Card-Input
animation card card-companies flutter flutter-apps flutter-examples flutter-plugin flutter-ui-challenges
Last synced: about 1 month ago
JSON representation
Flutter Credit Card Input form
- Host: GitHub
- URL: https://github.com/Origogi/Flutter-Credit-Card-Input
- Owner: Origogi
- License: bsd-2-clause
- Created: 2020-03-04T12:27:41.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-04-03T13:20:49.000Z (over 3 years ago)
- Last Synced: 2024-05-20T22:45:14.126Z (4 months ago)
- Topics: animation, card, card-companies, flutter, flutter-apps, flutter-examples, flutter-plugin, flutter-ui-challenges
- Language: Dart
- Homepage:
- Size: 996 KB
- Stars: 494
- Watchers: 11
- Forks: 51
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter-cn - Credit Card Form - 动画信用卡输入表单,由[Origogi](https://github.com/Origogi)创建。 (组件 / UI)
- awesome-flutter-cn - Credit Card Form - 带动画的信用卡输入表单,[Origogi](https://github.com/Origogi). (组件 / UI)
- awesome-flutter - Credit Card Form - Flutter Credit Card Input form ` 📝 3 months ago ` (UI [🔝](#readme))
README
This package provides visually beautiful UX through animation of credit card information input form.
## Preview
## Installing
1. Add dependency to `pubspec.yaml`
*Get the latest version in the 'Installing' tab on pub.dartlang.org*
```dart
dependencies:
credit_card_input_form: ^2.3.0
```2. Import the package
```dart
import 'package:credit_card_input_form/credit_card_input_form.dart';
```3. Adding `CreditCardInputForm`
*With optional parameters*
```dart
CreditCardInputForm(
cardHeight: 170,
showResetButton : true,
onStateChange: (currentState, cardInfo) {
print(currentState);
print(cardInfo);
},
customCaptions: {...},
frontCardDecoration: cardDecoration,
backCardDecoration: cardDecoration,
prevButtonDecoration: buttonStyle,
nextButtonDecoration: buttonStyle,
resetButtonDecoration : buttonStyle,
prevButtonTextStyle: buttonTextStyle,
nextButtonTextStyle: buttonTextStyle,
resetButtonTextStyle: buttonTextStyle,
initialAutoFocus: true, // optional),
```## How to use
Check out the **example** app in the [example](example) directory or the 'Example' tab on pub.dartlang.org for a more complete example.
## New Feature
### v1.3.0
added custom button style feature
|Default|Custom|
|------|---|
|![default](https://user-images.githubusercontent.com/35194820/89704240-1e49f180-d98d-11ea-9305-5938f0386251.PNG)|![custom](https://user-images.githubusercontent.com/35194820/89704237-1d18c480-d98d-11ea-9557-36a8519da301.PNG)|~~~dart
final buttonDecoration = BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
gradient: LinearGradient(
colors: [
const Color(0xfffcdf8a),
const Color(0xfff38381),
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
);final buttonTextStyle =
TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18);CreditCardInputForm(
prevButtonDecoration: buttonDecoration,
nextButtonDecoration: buttonDecoration,
prevButtonTextStyle: buttonTextStyle,
nextButtonTextStyle: buttonTextStyle,
resetButtonTextStyle: buttonTextStyle,
),~~~
### v2.0.0
It provides more options using boxdecoration that can only change the color of the card.
|Default|Custom|
|------|---|
|![image](https://user-images.githubusercontent.com/35194820/89976756-434ba680-dca4-11ea-8297-ed7dccbfb6e6.png)|![image](https://user-images.githubusercontent.com/35194820/89976725-2b742280-dca4-11ea-8771-9e3bd9690ee0.png)|~~~dart
final cardDecoration = BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black54, blurRadius: 15.0, offset: Offset(0, 8))
],
gradient: LinearGradient(
colors: [
Colors.red,
Colors.blue,
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
borderRadius: BorderRadius.all(Radius.circular(15)));CreditCardInputForm(
frontCardDecoration: cardDecoration,
backCardDecoration: cardDecoration,
),
]),
~~~### v2.1.0
implement a new feature to add an initial value when creating a widget
Code Preview
~~~dart
CreditCardInputForm(
....
cardCVV: '222',
cardName: 'Jeongtae Kim',
cardNumber: '1111111111111111',
cardValid: '12/12',
intialCardState: InputState.DONE,
),
~~~![ezgif com-gif-maker](https://user-images.githubusercontent.com/35194820/96005684-a958d380-0e77-11eb-8b5e-f9dd889c875f.gif)
### v2.2.0
Add `initialAutoFocus` parameter
## 3rd party library
### Flip card
https://pub.dev/packages/flip_card
*For use card flip animation*
### Provider
https://pub.dev/packages/provider
*For use state management*
## Reference
This package's animation is inspired from from this [Dribbble](https://dribbble.com/shots/6440077-Add-a-New-Credit-Card-alternate-flow
) art## TODO List
- [x] add `RESET` button
- [x] add box decoration param