Fix focus on mobile when navigating away and coming back to field, added readme pizaz

This commit is contained in:
Nathan Anderson 2023-11-21 11:46:42 -07:00
parent dd52ffb398
commit a8e571ca7b
4 changed files with 39 additions and 26 deletions

View File

@ -1,22 +1,22 @@
A simple and clean Stripe Element Card clone, rebuilt in native Flutter widgets. A simple and clean Stripe Element Card clone, rebuilt in native Flutter widgets.
# DISCLAIMER
This is not an officially maintained package by Stripe, but using the html stripe This is not an officially maintained package by Stripe, but using the html stripe
elements they provide with flutter is less than ideal. elements they provide in flutter was inconvenient for me, so I made this package.
# Features
## Features
Got to use emojis and taglines for attention grabbing and algorithm hacking: Got to use emojis and taglines for attention grabbing and algorithm hacking:
Blazingly fast ( its as fast as the rest of flutter ) - 󱐋 Blazingly fast ( its as fast as the rest of flutter )
🧹Cleaner ( fewer dependencies than the official stripe elements ) - 󰃢 Cleaner ( fewer dependencies than the official stripe elements )
🛡️Safe and Supports all Flutter Targets ( its native flutter with minimal dependencies ) - 🛡 Safe and Supports all Flutter Targets ( its native flutter with minimal dependencies )
☑️Seemless UI/UX ( hard to match stripe quality, but I think I got close ) - ☑ Seemless UI/UX ( hard to match stripe quality, but I think I got close )
🔄Built-in Stripe Integration ( guess that one is obvious ) -  Built-in Stripe Integration ( guess that one is obvious )
☯️Chi Energy Boost ( alright I'm fishing... ) - ☯ Chi Energy Boost ( alright I'm fishing... )
### Why StripeNativeCardField? ## Why StripeNativeCardField?
- Fewer dependencies: no more depending on Flutter Webview - Fewer dependencies: no more depending on Flutter Webview
- Customizable: the entire field can inherit native Flutter styling, i.e. `BoxDecoration()` - Customizable: the entire field can inherit native Flutter styling, i.e. `BoxDecoration()`
@ -27,19 +27,25 @@ The card data can either be retrieved with the `onCardDetailsComplete` callback,
you can have the element automatically create a Stripe card token when the fields you can have the element automatically create a Stripe card token when the fields
are filled out, and return the token with the `onTokenReceived` callback. are filled out, and return the token with the `onTokenReceived` callback.
### Mobile ### Card Provider Detection
![mobile showcase](./example/loading.gif) ![Card Provider Detection](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/readme_assets/card_provider_detection.gif)
### Desktop [Documentation to supported card providers](https://pub.dev/documentation/stripe_native_card_field/latest/card_details/CardProviderID.html)
Currently support American Express, Diners Club, Discover Card, Mastercard, Jcb, Visa
### Customizable Styles
![Customizable Style 1]()
![Customizable Style 2]()
### Cross Platform
![desktop showcase](./example/loading.gif) ![desktop showcase](./example/loading.gif)
### Customizable # Getting started
![cumstomization showcase](./example/loading.gif)
## Getting started
- Install the package by running `flutter pub add stripe_native_card_field` - Install the package by running `flutter pub add stripe_native_card_field`
@ -82,6 +88,6 @@ CardTextField(
For documentation on all of the available customizable aspects of the `CardTextField`, go For documentation on all of the available customizable aspects of the `CardTextField`, go
to the [API docs here](https://pub.dev/documentation/stripe_native_card_field/latest/stripe_native_card_field/CardTextField-class.html). to the [API docs here](https://pub.dev/documentation/stripe_native_card_field/latest/stripe_native_card_field/CardTextField-class.html).
## Additional information # Additional information
Repository located [here](https://git.fosscat.com/n8r/stripe_native_card_field) Repository located [here](https://git.fosscat.com/n8r/stripe_native_card_field)

View File

@ -261,7 +261,7 @@ enum CardDetailsValidState {
invalidZip, invalidZip,
} }
/// Enum of supported U.S. Card Providers /// Enum of supported Card Providers
enum CardProviderID { enum CardProviderID {
americanExpress, americanExpress,
dinersClub, dinersClub,

View File

@ -323,14 +323,15 @@ class CardTextFieldState extends State<CardTextField> {
}, },
// Enable scrolling on mobile and if its narrow (not all fields visible) // Enable scrolling on mobile and if its narrow (not all fields visible)
onHorizontalDragUpdate: (details) { onHorizontalDragUpdate: (details) {
const minOffset = 0.0;
final maxOffset = _horizontalScrollController.position.maxScrollExtent;
if (!_isMobile || isWideFormat) return; if (!_isMobile || isWideFormat) return;
final newOffset = _horizontalScrollController.offset - details.delta.dx; final newOffset = _horizontalScrollController.offset - details.delta.dx;
final max = _horizontalScrollController.position.maxScrollExtent; if (newOffset < minOffset) {
if (newOffset < -30.0) { _horizontalScrollController.jumpTo(minOffset);
_horizontalScrollController.jumpTo(-30.0); } else if (newOffset > maxOffset) {
} else if (newOffset > max + 30.0) { _horizontalScrollController.jumpTo(maxOffset);
_horizontalScrollController.jumpTo(max + 30.0);
} else { } else {
_horizontalScrollController.jumpTo(newOffset); _horizontalScrollController.jumpTo(newOffset);
} }
@ -773,6 +774,12 @@ class CardTextFieldState extends State<CardTextField> {
_setValidationState(null); _setValidationState(null);
} }
// If field tapped, and has focus, dismiss focus
if (_currentStep == step && _hasFocus()) {
FocusManager.instance.primaryFocus?.unfocus();
return;
}
setState(() { setState(() {
_currentStep = step; _currentStep = step;
}); });

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB