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.

Sign up for GitHub

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

Jump to bottom

Fix Safari on iOS and Web #51

Closed
wants to merge 6 commits into from
Closed

Fix Safari on iOS and Web #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
52ee891
fix for invalid regex for safari users
NissimBet Jul 14, 2021
3b7769d
Fix Safari LinearGradient Error
Bilonik Jul 14, 2021
f0b3e83
Merge pull request #1 from NissimBet/fix-safari
Bilonik Jul 14, 2021
9f6d48d
Color on backside
Bilonik Jul 14, 2021
ec64d69
Autofill Hints to fix safari on ios
Bilonik Jul 14, 2021
bb4d982
Remove autofill hints for now -Web errors
Bilonik Aug 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions lib/credit_card_form.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@ class _CreditCardFormState extends State<CreditCardForm> {
padding: const EdgeInsets.symmetric(vertical: 8.0),
margin: const EdgeInsets.only(left: 16, top: 16, right: 16),
child: TextFormField(
// autofillHints: [AutofillHints.creditCardNumber],
obscureText: widget.obscureNumber,
controller: _cardNumberController,
cursorColor: widget.cursorColor ?? themeColor,
Expand Down Expand Up @@ -203,6 +204,7 @@ class _CreditCardFormState extends State<CreditCardForm> {
padding: const EdgeInsets.symmetric(vertical: 8.0),
margin: const EdgeInsets.only(left: 16, top: 8, right: 16),
child: TextFormField(
// autofillHints: [AutofillHints.creditCardExpirationDate],
controller: _expiryDateController,
cursorColor: widget.cursorColor ?? themeColor,
focusNode: expiryDateNode,
Expand Down Expand Up @@ -241,6 +243,7 @@ class _CreditCardFormState extends State<CreditCardForm> {
padding: const EdgeInsets.symmetric(vertical: 8.0),
margin: const EdgeInsets.only(left: 16, top: 8, right: 16),
child: TextFormField(
// autofillHints: [AutofillHints.creditCardSecurityCode],
obscureText: widget.obscureCvv,
focusNode: cvvFocusNode,
controller: _cvvCodeController,
Expand Down Expand Up @@ -274,6 +277,7 @@ class _CreditCardFormState extends State<CreditCardForm> {
padding: const EdgeInsets.symmetric(vertical: 8.0),
margin: const EdgeInsets.only(left: 16, top: 8, right: 16),
child: TextFormField(
// autofillHints: [AutofillHints.creditCardName],
controller: _cardHolderNameController,
cursorColor: widget.cursorColor ?? themeColor,
focusNode: cardHolderNode,
Expand Down
49 changes: 30 additions & 19 deletions lib/credit_card_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
late AnimationController controller;
late Animation<double> _frontRotation;
late Animation<double> _backRotation;
late Gradient backgroundGradientColor;

bool isAmex = false;

Expand All @@ -70,19 +69,19 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
vsync: this,
);

backgroundGradientColor = LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: const <double>[0.1, 0.4, 0.7, 0.9],
colors: <Color>[
widget.cardBgColor.withOpacity(1),
widget.cardBgColor.withOpacity(0.97),
widget.cardBgColor.withOpacity(0.90),
widget.cardBgColor.withOpacity(0.86),
],
);
// backgroundGradientColor = LinearGradient(
// // Where the linear gradient begins and ends
// begin: Alignment.topRight,
// end: Alignment.bottomLeft,
// // Add one stop for each color. Stops should increase from 0 to 1
// stops: const <double>[0.1, 0.4, 0.7, 0.9],
// colors: <Color>[
// widget.cardBgColor.withOpacity(1),
// widget.cardBgColor.withOpacity(0.97),
// widget.cardBgColor.withOpacity(0.90),
// widget.cardBgColor.withOpacity(0.86),
// ],
// );

///Initialize the Front to back rotation tween sequence.
_frontRotation = TweenSequence<double>(
Expand Down Expand Up @@ -177,7 +176,7 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
gradient: backgroundGradientColor,
color: widget.cardBgColor,
),
margin: const EdgeInsets.all(16),
width: widget.width ?? width,
Expand Down Expand Up @@ -268,15 +267,27 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
),
);

final String number = widget.obscureCardNumber
? widget.cardNumber.replaceAll(RegExp(r'(?<=.{4})\d(?=.{4})'), '*')
: widget.cardNumber;
String number = widget.cardNumber;
if (widget.obscureCardNumber) {
final String stripped = number.replaceAll(RegExp(r'[^\d]'), '');
if (stripped.length > 8) {
final String middle = number
.substring(4, number.length - 5)
.trim()
.replaceAll(RegExp(r'\d'), '*');
number = stripped.substring(0, 4) +
' ' +
middle +
' ' +
stripped.substring(stripped.length - 4);
}
}

return Container(
margin: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: widget.cardBgColor,
borderRadius: BorderRadius.circular(8),
gradient: backgroundGradientColor,
boxShadow: const <BoxShadow>[
BoxShadow(
color: Colors.grey,
Expand Down