Skip to content

Commit

Permalink
Credit Card UI changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@faiyaz-shaikh
faiyaz-shaikh committed Dec 13, 2022
1 parent 811d09a commit c317882
Show file tree
Hide file tree
Showing 8 changed files with 111 additions and 88 deletions.
Binary file modified example/assets/bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified example/assets/card_bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions example/lib/app_colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,9 @@ class AppColors {
AppColors._();

static const Color btnColor = Color(0xff1b447b);
static const Color cardBackgroundColor = Color(0xff725f9b);
static const Color backgroundColor = Color(0xff0a0c21);
static const Color colorDF6A7D = Color(0xffDF6A7D);
static const Color colorC941A2 = Color(0xffC941A2);
static const Color colorE937FE = Color(0xffE937FE);
}
127 changes: 72 additions & 55 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'package:example/app_colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_credit_card/credit_card_brand.dart';
import 'package:flutter_credit_card/flutter_credit_card.dart';
Expand Down Expand Up @@ -51,7 +52,7 @@ class MySampleState extends State<MySample> {
fit: BoxFit.fill,
)
: null,
color: Colors.black,
color: AppColors.backgroundColor,
),
child: SafeArea(
child: Column(
Expand All @@ -71,7 +72,7 @@ class MySampleState extends State<MySample> {
obscureCardNumber: true,
obscureCardCvv: true,
isHolderNameVisible: true,
cardBgColor: Colors.red,
cardBgColor: AppColors.cardBackgroundColor,
backgroundImage:
useBackgroundImage ? 'assets/card_bg.png' : null,
isSwipeGestureEnabled: true,
Expand Down Expand Up @@ -141,60 +142,75 @@ class MySampleState extends State<MySample> {
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Glassmorphism',
style: TextStyle(
color: Colors.white,
fontSize: 18,
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Glassmorphism',
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
Switch(
value: useGlassMorphism,
inactiveTrackColor: Colors.grey,
activeColor: Colors.white,
activeTrackColor: Colors.green,
onChanged: (bool value) => setState(() {
useGlassMorphism = value;
}),
),
],
const Spacer(),
Switch(
value: useGlassMorphism,
inactiveTrackColor: Colors.grey,
activeColor: Colors.white,
activeTrackColor: Colors.green,
onChanged: (bool value) => setState(() {
useGlassMorphism = value;
}),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Card Image',
style: TextStyle(
color: Colors.white,
fontSize: 18,
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Card Image',
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
Switch(
value: useBackgroundImage,
inactiveTrackColor: Colors.grey,
activeColor: Colors.white,
activeTrackColor: Colors.green,
onChanged: (bool value) => setState(() {
useBackgroundImage = value;
}),
),
],
const Spacer(),
Switch(
value: useBackgroundImage,
inactiveTrackColor: Colors.grey,
activeColor: Colors.white,
activeTrackColor: Colors.green,
onChanged: (bool value) => setState(() {
useBackgroundImage = value;
}),
),
],
),
),
const SizedBox(
height: 20,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
backgroundColor: const Color(0xff1b447b),
),
GestureDetector(
onTap: _onValidate,
child: Container(
margin: const EdgeInsets.all(12),
margin: const EdgeInsets.symmetric(
horizontal: 16, vertical: 8),
decoration: BoxDecoration(
gradient: const LinearGradient(colors: <Color>[
AppColors.colorDF6A7D,
AppColors.colorC941A2,
AppColors.colorE937FE,
]),
borderRadius: BorderRadius.circular(8),
),
padding: const EdgeInsets.symmetric(vertical: 15),
width: double.infinity,
alignment: Alignment.center,
child: const Text(
'Validate',
style: TextStyle(
Expand All @@ -205,13 +221,6 @@ class MySampleState extends State<MySample> {
),
),
),
onPressed: () {
if (formKey.currentState!.validate()) {
print('valid!');
} else {
print('invalid!');
}
},
),
],
),
Expand All @@ -225,6 +234,14 @@ class MySampleState extends State<MySample> {
);
}

void _onValidate() {
if (formKey.currentState!.validate()) {
print('valid!');
} else {
print('invalid!');
}
}

void onCreditCardModelChange(CreditCardModel? creditCardModel) {
setState(() {
cardNumber = creditCardModel!.cardNumber;
Expand Down
Binary file modified icons/amex.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified icons/discover.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified icons/visa.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
67 changes: 34 additions & 33 deletions lib/credit_card_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
const TextStyle(
color: Colors.white,
fontFamily: 'halter',
fontSize: 16,
fontSize: 15,
package: 'flutter_credit_card',
),
);
Expand Down Expand Up @@ -280,13 +280,16 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
if (widget.bankName != null && widget.bankName!.isNotEmpty)
Padding(
padding: const EdgeInsets.only(left: 16, top: 16),
child: Text(
widget.bankName!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: defaultTextStyle,
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(right: 16, top: 16),
child: Text(
widget.bankName!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: defaultTextStyle,
),
),
),
Expanded(
Expand All @@ -304,16 +307,6 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
scale: 1,
),
),
const Spacer(),
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 8),
child: widget.cardType != null
? getCardTypeImage(widget.cardType)
: getCardTypeIcon(widget.cardNumber),
),
),
],
),
),
Expand All @@ -334,8 +327,8 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
child: Padding(
padding: const EdgeInsets.only(left: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'VALID\nTHRU',
Expand All @@ -354,20 +347,28 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
),
),
),
Visibility(
visible: widget.isHolderNameVisible,
child: Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
child: Text(
widget.cardHolderName.isEmpty
? widget.labelCardHolder
: widget.cardHolderName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: widget.textStyle ?? defaultTextStyle,
Padding(
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Visibility(
visible: widget.isHolderNameVisible,
child: Expanded(
child: Text(
widget.cardHolderName.isEmpty
? widget.labelCardHolder
: widget.cardHolderName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: widget.textStyle ?? defaultTextStyle,
),
),
),
),
widget.cardType != null
? getCardTypeImage(widget.cardType)
: getCardTypeIcon(widget.cardNumber),
],
),
),
],
Expand Down

0 comments on commit c317882

Please sign in to comment.