Reference

https://dribbble.com/shots/6440077-Add-a-New-Credit-Card-alternate-flow

Real output (실제 결과물)

Source Tree

lib
├─ components
│  ├─ back_card_view.dart
│  ├─ card_cvv.dart
│  ├─ card_logo.dart
│  ├─ card_name.dart
│  ├─ card_number.dart
│  ├─ card_sign.dart
│  ├─ card_valid.dart
│  ├─ front_card_view.dart
│  ├─ input_view_pager.dart
│  ├─ my_appbar.dart
│  ├─ round_button.dart
│  └─ yellow_border.dart
├─ constanst.dart
├─ main.dart
├─ provider
│  ├─ card_cvv_provider.dart
│  ├─ card_name_provider.dart
│  ├─ card_number_provider.dart
│  ├─ card_valid_provider.dart
│  └─ state_provider.dart
├─ screens
│  └─ MainScreen.dart
└─ util
   └─ util.dart

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

Note

• 이 코드는 모든 카드사를 체크하지 않습니다. (Visa, Master) 더 많은 카드사를 지원하기 위해서 card_logo.dart file을 수정하십시오

---

• This code does not check all card companies(only Visa and master). Modify the card_logo.dart file to support more card companies