Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Flutter Credit Card Input form

License

NotificationsYou must be signed in to change notification settings

Origogi/Flutter-Credit-Card-Input-Form

Repository files navigation

PlatformAwesome Flutter

This package provides visually beautiful UX through animation of credit card information input form.

Preview

Installing

  1. Add dependency topubspec.yaml

    Get the latest version in the 'Installing' tab on pub.dartlang.org

dependencies:    credit_card_input_form:^2.3.0
  1. Import the package
import'package:credit_card_input_form/credit_card_input_form.dart';
  1. AddingCreditCardInputForm

With optional parameters

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 theexample app in theexample directory or the 'Example' tab on pub.dartlang.org for a more complete example.

New Feature

v1.3.0

added custom button style feature

DefaultCustom
defaultcustom
final buttonDecoration=BoxDecoration(    borderRadius:BorderRadius.circular(30.0),    gradient:LinearGradient(        colors: [constColor(0xfffcdf8a),constColor(0xfff38381),        ],        begin:constFractionalOffset(0.0,0.0),        end:constFractionalOffset(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.

DefaultCustom
imageimage
final cardDecoration=BoxDecoration(    boxShadow:<BoxShadow>[BoxShadow(color:Colors.black54, blurRadius:15.0, offset:Offset(0,8))    ],    gradient:LinearGradient(        colors: [Colors.red,Colors.blue,        ],        begin:constFractionalOffset(0.0,0.0),        end:constFractionalOffset(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
CreditCardInputForm(  ....  cardCVV:'222',  cardName:'Jeongtae Kim',  cardNumber:'1111111111111111',  cardValid:'12/12',  intialCardState:InputState.DONE,),

ezgif com-gif-maker

v2.2.0

AddinitialAutoFocus 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 thisDribbble art

TODO List

  • addRESET button
  • add box decoration param

Packages

No packages published

Contributors2

  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp