credit_card_minimalist 1.0.7

  • Readme
  • Changelog
  • Example
  • Installing
  • new66

credit_card #

Credit card widget, a beautiful election for adding cards to your app, can be used as a good complement for store apps, gives a minimalist style.

Now implementing prepay cards #

Dependencies used #

This package uses 2 extern dependencies:

Include this in your own pubspec.yaml to get the assets (Current fix) #

- packages/credit_card_minimalist/cardIcons/visa.flr
- packages/credit_card_minimalist/cardIcons/mastercard.flr
- packages/credit_card_minimalist/cardIcons/amex.flr
- packages/credit_card_minimalist/cardIcons/credit_card.flr
- packages/credit_card_minimalist/cardIcons/PayPal.flr
- packages/credit_card_minimalist/cardIcons/Prepay.flr

Using cards #

** Now you can put 'es' or 'en' in your CreditCard() or CreditForm() language **

For using this widget we need to have a CreditCardInfo component created like in the example

  CreditCardInfo card = new CreditCardInfo(
    color: mainBlack,
    id: 1,
    cardHoldname: "User Name",
    creditNumber: "4040 5050 4400 4040",
    cvv: "123",
    expiryDate: "12/22",
    type: 1, //1: Mastercard, 2 Visa,3 Mastercard
    cardtype: CardType.credit
  );

Or an empty card

  CreditCardInfo card = new CreditCardInfo.empty();

It also can be a prepay card

  CreditCardInfo card = new CreditCardInfo(
    color: mainblack,
    id: 1,
    cardHoldname: "Prepay Card",
    credit: "\$50.0",
    cardtype: CardType.prepay,
    expiryDate: "02/20"
  )
Soon including PayPal !!

Note #

This isnt just a simple class, this is a ChangeNotifier Class, which means we are creating a Provider for our card, this Provider help us to change at realtime the information inside our CreditCard Widget. In order to use this in correct way, we have to make the parent of this Widget be a ChangeNotifierProvider, in this way, all children of this will now absorb information and will have complete control.

Then we need to create a CreditCard widget for displaying this info (Remember using notifier):

  return ChangeNotifierProvider.value(
    value: card,
    child: CreditCard(
      creditCardInfo: card,
      onChangeCard(CreditCardInfo info) {
        //Do whatever you want to new information of card
      },
      //language: 'en'
    )
  );

Creating cards #

To create new cards we can use a simple button to trigger a showDialog, and this will push us to a new screen or use a Navigator.pop and call CreditForm widget inside a new Screen, up to your taste.

  • First way #

  FlatButton(
    child: Text("Press me"),
    onPressed(){
      CreditCardInfo card = new CreditCardInfo.empty();
      showDialog(
        context: context,
        child: ChangeNotifierProvider.value(
          value: card,
          child: CreditForm(
            //Method to update card object
            (info) {
              card = info;
            },
            //Method to discard any changes if card was created
            (info) {
              card = null;
            },
            language: 'en'
            //values if we want to create a prepay card
            validateCode: (String code){
              /*Validate code here*/
            },
            codeLength: 12
          )
        )
      );
    }
  )
  • Second way #

  FlatButton(
    child: Text("Press me"),
    onPressed(){
      CreditCardInfo card = new CreditCardInfo.empty();
      Navigator.of(context).pushNamed("/createCard"), {card});

    }
  )

  // In other screen

  return ChangeNotifierProvider.value(
    value: card,
    child: CreditForm(
      //Method to update card object
      (info) {
        card = info;
      },
      //Method to discard any changes if card was created
      (info) {
        card = null;
      },
      //language: 'en'
    )
  );

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

[1.0.0] - 24/06/2020 #

  • Completely added all widget, functional
  • Added color edition
  • Forms
  • Display
  • Description

[1.0.1] - 24/06/2020 #

  • Added example and formated files

[1.0.2] - 26/06/2020 #

  • Added prepay cards!
  • Fixed bugs on card
  • Fixed width and height display resolutions
  • Easy way to decide what type of card you need
  • Soon Paypal

[1.0.3] - 28/06/2020 #

  • Added english language support

[1.0.4] . 02/07/2020 #

  • Fixed Name textForm bug

[1.0.5-rc1]- 03/07/2020 #

  • First try of fixing assets

[1.0.5-rc2]- 03/07/2020 #

  • Second try of fixing assets

[1.0.5] - 03/07/2020 #

  • Fixed asset unable to load

[1.0.6] - 03/07/200 #

  • Removed unnecesary logs (Although flutter have some problems with this)

[1.0.7] - 03/07/200 #

  • Change on filters

example/main.dart

import 'package:provider/provider.dart';

import '../lib/CreditCard.dart';
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  CreditCardInfo card = new CreditCardInfo.empty();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Column(
          children: <Widget>[
            FlatButton(
              child: Text("Press me"),
              onPressed:(){
                showDialog(
                  context: context,
                  child: ChangeNotifierProvider.value(
                    value: card,
                    child: CreditForm(
                      (info) {
                        setState(() {
                          this.card = info;
                        });
                      },
                      (info){
                        this.card = CreditCardInfo.empty();
                      }
                    ),
                  ),
                );
              } 
            ),
            card.creditNumber == null ?
            ChangeNotifierProvider.value(
              value: card,
              child: CreditCard(
                creditCardInfo: card,
                onChangeCard: (info){
                  setState(() {
                    this.card = info;
                  });
                },
              ),
            ) : Container()
          ],
        )
        
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  credit_card_minimalist: ^1.0.7

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:credit_card_minimalist/CreditCard.dart';
import 'package:credit_card_minimalist/credit_card.dart';
import 'package:credit_card_minimalist/utils/Colors.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
33
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
66
Learn more about scoring.

We analyzed this package on Jul 8, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • credit_card_minimalist that is a package requiring null.

Health suggestions

Format lib/CreditCard.dart.

Run flutter format to format lib/CreditCard.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
credit_card_number_validator ^1.0.4 1.0.4
flare_flutter ^2.0.3 2.0.5
flutter 0.0.0
provider ^4.1.2 4.3.0
Transitive dependencies
collection 1.14.12 1.14.13
flare_dart 2.3.4
meta 1.1.8 1.2.1
nested 0.0.4
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test