Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: ✨ Floating card animation #144

Merged
merged 5 commits into from
Sep 22, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
build/

# Android related
**/android/**/gradle-wrapper.jar
**/android/**/gradle.wrapper/
**/android/.gradle
**/android/captures/
**/android/gradlew
Expand Down Expand Up @@ -76,4 +76,4 @@ ios/.generated/

.idea/instapk.xml
instapk.log*
pubspec.lock
pubspec.lock
4 changes: 3 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# [3.0.8](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/tree/3.0.8) (Unreleased)
# [4.0.0](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/tree/4.0.0)

- Added web support for example app [#148](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/pull/148).
- Added card float animation [#144](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/pull/144).
- Fixed credit card padding in RTL [#139](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/pull/139).

# [3.0.7](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/tree/3.0.7)

Expand Down
121 changes: 108 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,49 @@
![alt text](https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/banner.png?raw=true)
![banner](https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/banner.png?raw=true)

# Flutter Credit Card

![build](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/workflows/Build/badge.svg?branch=master)
![build](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/workflows/Build/badge.svg?branch=master)
[![flutter_credit_card](https://img.shields.io/pub/v/flutter_credit_card?label=flutter_credit_card)](https://pub.dev/packages/flutter_credit_card)

A Flutter package allows you to easily implement the Credit card's UI easily with the Card detection.

## Preview

![The example app running in Android](https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/preview.gif)
<table>
<tr>
<td align="center">
<figure>
<figcaption><b>Glassmorphism and Card Background</b></figcaption>
<hr/>
<img src="https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/preview.gif" alt="The example app showing credit card widget" width="227"/>
</figure>
</td>
</tr>
<tr>
<td align="center">
<figure>
<figcaption><b>Floating Card on Mobile</b></figcaption>
<hr/>
<img src="https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/credit_card_float_preview.gif" alt="The example app showing card floating animation in mobile" width="227"/>
</figure>
</td>
</tr>
<tr>
<td align="center">
<figure>
<figcaption><b>Floating Card on Web</b></figcaption>
<hr/>
<img src="https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/credit_card_float_cursor_preview.gif" alt="The example app showing card floating animation in web" width="227"/>
</figure>
</td>
</tr>
</table>

## Installing

1. Add dependency to `pubspec.yaml`

Get the latest version in the 'Installing' tab
on [pub.dev](https://pub.dev/packages/flutter_credit_card/install)
Get the latest version from the 'Installing' tab on [pub.dev](https://pub.dev/packages/flutter_credit_card/install)

```dart
dependencies:
Expand All @@ -38,6 +65,7 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
cardHolderName: cardHolderName,
cvvCode: cvvCode,
showBackView: isCvvFocused, //true when you want to show cvv(back) view
onCreditCardWidgetChange: (CreditCardBrand brand) {}, // Callback for anytime credit card brand is changed
),
```

Expand All @@ -49,13 +77,25 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
cardHolderName: cardHolderName,
cvvCode: cvvCode,
showBackView: isCvvFocused,
cardbgColor: Colors.black,
onCreditCardWidgetChange: (CreditCardBrand brand) {},
bankName: 'Name of the Bank',
cardBgColor: Colors.black87,
glassmorphismConfig: Glassmorphism.defaultConfig(),
enableFloatingCard: true,
floatConfig: FloatConfig(
isGlareEnabled: true,
isShadowEnabled: true,
shadowConfig: FloatShadowConfig.preset(),
),
backgroundImage: 'assets/card_bg.png',
backgroundNetworkImage: 'https://www.xyz.com/card_bg.png',
labelValidThru: 'VALID\nTHRU',
obscureCardNumber: true,
obscureInitialCardNumber: false,
obscureCardCvv: true,
labelCardHolder: 'CARD HOLDER',
labelValidThru: 'VALID\nTHRU',
cardType: CardType.mastercard,
isHolderNameVisible: false,
height: 175,
textStyle: TextStyle(color: Colors.yellowAccent),
Expand All @@ -65,8 +105,10 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
animationDuration: Duration(milliseconds: 1000),
frontCardBorder: Border.all(color: Colors.grey),
backCardBorder: Border.all(color: Colors.grey),
customCardIcons: <CustomCardTypeImage>[
CustomCardTypeImage(
chipColor: Colors.red,
padding: 16,
customCardTypeIcons: <CustomCardTypeIcons>[
CustomCardTypeIcons(
cardType: CardType.mastercard,
cardImage: Image.asset(
'assets/mastercard.png',
Expand Down Expand Up @@ -109,30 +151,83 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
),
```

*Floating Card*
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a row of check boxes with indicating supported platform should also be added

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe that would be counter intuitive as we are currently not supporting only mobile web.

> NOTE: Currently the floating card animation is not supported on mobile platform browsers.

Enable floating card animation by passing `true` to `enableFloatingCard` parameter (default).

You can pass `FloatConfig` to the `floatConfig` parameter to configure various things like
whether to enable or disable the glare or the shadow associated with the floating animation.

The `FloatConfig` also supports `shadowConfig` that takes `FloatShadowConfig` to configure the
shadow that appears beneath the card when floating animation is turned on.

Passing no value to `shadowConfig` would use `FloatShadowConfig.preset()`, and `floatConfig`
would use `FloatConfig.preset()` as default configuration.

+ Default Shadow Configuration
```dart
CreditCardWidget(
enableFloatingCard: true,
floatConfig: FloatConfig(
isGlareEnabled: true,
isShadowEnabled: true,
shadowConfig: FloatShadowConfig.preset(),
),
);
```

+ Custom Shadow Configuration
```dart
CreditCardWidget(
enableFloatingCard: true,
floatConfig: FloatConfig(
isGlareEnabled: true,
isShadowEnabled: true,
shadowConfig: FloatShadowConfig(
offset: Offset(10, 10),
color: Colors.black84,
blurRadius: 15,
),
),
);
```

4. Adding CreditCardForm

```dart
CreditCardForm(
formKey: formKey, // Required
cardNumber: cardNumber, // Required
expiryDate: expiryDate, // Required
cardHolderName: cardHolderName, // Required
cvvCode: cvvCode, // Required
cardNumberKey: cardNumberKey,
cvvCodeKey: cvvCodeKey,
expiryDateKey: expiryDateKey,
cardHolderKey: cardHolderKey,
onCreditCardModelChange: (CreditCardModel data) {}, // Required
themeColor: Colors.red,
themeColor: Colors.black, // Required
textColor: Colors.white,
cursorColor: Colors.blue,
obscureCvv: true,
obscureNumber: true,
isHolderNameVisible: true,
isCardNumberVisible: true,
isExpiryDateVisible: true,
enableCvv: true,
cvvValidationMessage: 'Please input a valid CVV',
dateValidationMessage: 'Please input a valid date',
numberValidationMessage: 'Please input a valid number',
cardNumberValidator: (String? cardNumber){},
expiryDateValidator: (String? expiryDate){},
cvvValidator: (String? cvv){},
cardHolderValidator: (String? cardHolderName){},
onFormComplete: () {
// callback to execute at the end of filling card data
},
autovalidateMode: AutovalidateMode.always,
disableCardNumberAutoFillHints: false,
cardNumberDecoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Number',
Expand All @@ -155,13 +250,13 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
),
```


## 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.

## Credit

This package's animation is inspired from from this [Dribbble](https://dribbble.com/shots/2187649-Credit-card-Checkout-flow-AMEX) art.
- This package's flip animation is inspired from this [Dribbble](https://dribbble.com/shots/2187649-Credit-card-Checkout-flow-AMEX) art.
- This package's float animation is inspired from the [Motion](https://pub.dev/packages/motion) flutter package.

## Main Contributors

Expand All @@ -175,12 +270,14 @@ This package's animation is inspired from from this [Dribbble](https://dribbble.
<td align="center"><a href="https://github.com/shwetachauhan-simform"><img src="https://avatars.githubusercontent.com/u/63042002?s=100" width="100px;" alt=""/><br /><sub><b>Shweta Chauhan</b></sub></a></td>
<td align="center"><a href="https://github.com/kavantrivedi"><img src="https://avatars.githubusercontent.com/u/97207242?s=100" width="100px;" alt=""/><br /><sub><b>Kavan Trivedi</b></sub></a></td>
<td align="center"><a href="https://github.com/Ujas-Majithiya"><img src="https://avatars.githubusercontent.com/u/56400956?v=4" width="100px;" alt=""/><br /><sub><b>Ujas Majithiya</b></sub></a></td>
<td align="center"><a href="https://github.com/aditya-chavda"><img src="https://avatars.githubusercontent.com/u/41247722?v=4" width="100px;" alt=""/><br /><sub><b>Aditya Chavda</b></sub></a></td>
</tr>
</table>
<br/>

## Awesome Mobile Libraries
- Check out our other available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)

## Note
We have updated license of flutter_credit_card from BSD 2-Clause "Simplified" to MIT.

Expand Down Expand Up @@ -208,6 +305,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


```
9 changes: 9 additions & 0 deletions android/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
*.iml
.gradle
/local.properties
/.idea/workspace.xml
/.idea/libraries
.DS_Store
/build
/captures
.cxx
47 changes: 47 additions & 0 deletions android/build.gradle
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
group 'com.simform.flutter_credit_card'
version '1.0-SNAPSHOT'

buildscript {
ext.kotlin_version = '1.7.10'
repositories {
google()
mavenCentral()
}

dependencies {
classpath 'com.android.tools.build:gradle:7.3.1'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}

allprojects {
repositories {
google()
mavenCentral()
}
}

apply plugin: 'com.android.library'
apply plugin: 'kotlin-android'

android {
compileSdk 31

compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}

kotlinOptions {
jvmTarget = '1.8'
}

sourceSets {
main.java.srcDirs += 'src/main/kotlin'
test.java.srcDirs += 'src/test/kotlin'
}

defaultConfig {
minSdkVersion 16
}
}
1 change: 1 addition & 0 deletions android/settings.gradle
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
rootProject.name = 'flutter_credit_card'
3 changes: 3 additions & 0 deletions android/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.simform.flutter_credit_card">
</manifest>
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
object Constants {
const val GYROSCOPE_CHANNEL_NAME: String = "com.simform.flutter_credit_card/gyroscope"
const val METHOD_CHANNEL_NAME: String = "com.simform.flutter_credit_card"
const val INITIATE_EVENTS: String = "initiateEvents"
const val IS_GYRO_AVAILABLE: String = "isGyroscopeAvailable"
const val CANCEL_EVENTS: String = "cancelEvents"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
package com.simform.flutter_credit_card

import android.app.Activity
import android.content.Context
import android.os.Build
import android.view.Display
import android.view.WindowManager
import androidx.annotation.ChecksSdkIntAtLeast
import com.simform.flutter_credit_card.gyroscope.GyroscopeChannelImpl
import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.embedding.engine.plugins.activity.ActivityAware
import io.flutter.embedding.engine.plugins.activity.ActivityPluginBinding
import io.flutter.plugin.common.BinaryMessenger

aditya-css marked this conversation as resolved.
Show resolved Hide resolved
@ChecksSdkIntAtLeast(api = Build.VERSION_CODES.R)
private val isAtLeastOsR: Boolean = Build.VERSION.SDK_INT >= Build.VERSION_CODES.R

/** FlutterCreditCardPlugin */
class FlutterCreditCardPlugin : FlutterPlugin, ActivityAware {
private var gyroscopeChannel: GyroscopeChannelImpl? = null
private var activity: Activity? = null
aditya-css marked this conversation as resolved.
Show resolved Hide resolved

override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) =
initializeChannels(binding.applicationContext, binding.binaryMessenger)

override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) =
disposeChannels()

override fun onAttachedToActivity(binding: ActivityPluginBinding) {
activity = if (isAtLeastOsR) binding.activity else null
}

override fun onDetachedFromActivity() {
activity = null
}

override fun onReattachedToActivityForConfigChanges(binding: ActivityPluginBinding) {
activity = if (isAtLeastOsR) binding.activity else null
}

override fun onDetachedFromActivityForConfigChanges() {
activity = null
}

private fun initializeChannels(context: Context, messenger: BinaryMessenger) {
gyroscopeChannel = GyroscopeChannelImpl(context, messenger) { getViewDisplay(context) }
}

private fun getViewDisplay(context: Context): Display? {
if (isAtLeastOsR) {
return activity?.display
} else {
@Suppress("DEPRECATION")
return (context.getSystemService(Context.WINDOW_SERVICE) as WindowManager).defaultDisplay
}
}

private fun disposeChannels() {
gyroscopeChannel?.dispose()
gyroscopeChannel = null
activity = null
}
}
Loading