diff --git a/CHANGELOG.md b/CHANGELOG.md index 346ba7a..5ee85a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 0.0.4 + +- Fix for focus and soft keyboard on mobile devices +- Added README gif to show `CardTextField` in action +- Added Icon color customization to `CardProviderIcon` widget +- Fleshed out a dark mode styling example + ## 0.0.3 Lots of improvements! diff --git a/README.md b/README.md index 52ac46e..7103cbb 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,11 @@ elements they provide in flutter was inconvenient for me, so I made this package Got to use emojis and taglines for attention grabbing and algorithm hacking: -- ๓ฑ‹ Blazingly fast ( its as fast as the rest of flutter ) -- ๓ฐƒข Cleaner ( fewer dependencies than the official stripe elements ) +- โšก Blazingly fast ( its as fast as the rest of flutter ) +- ๐Ÿงน Cleaner & Easier to Use ( fewer dependencies than the official stripe elements ) - ๐Ÿ›ก 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 ) -- ๏…• Built-in Stripe Integration ( guess that one is obvious ) +- โ˜‘ Seemless UI/UX ( hard to match stripe quality, but I think I got pretty close ) +- ๐Ÿ’ณ Built-in Stripe Integration ( guess that one is obvious ) - โ˜ฏ Chi Energy Boost ( alright I'm fishing... ) ## Why StripeNativeCardField? @@ -31,19 +31,23 @@ are filled out, and return the token with the `onTokenReceived` callback. ![Card Provider Detection](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/readme_assets/card_provider_detection.gif) -[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 +[Supported Card Providers in Docs](https://pub.dev/documentation/stripe_native_card_field/latest/card_details/CardProviderID.html) ### Customizable Styles -![Customizable Style 1]() +![Customizable Style 1](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/readme_assets/customizable_style.gif) -![Customizable Style 2]() +This dark mode style example provided [here](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/example/lib/dark_customization.dart) -### Cross Platform +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). -![desktop showcase](./example/loading.gif) +### Smooth UX + +![Smooth UX](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/readme_assets/smooth_ux.gif) + +Mimics the Stripe html elements behavior wherever possible. Auto focusing / transitioning text fields, backspacing focuses to last field, +automatically validating user input, etc. # Getting started @@ -83,11 +87,6 @@ CardTextField( ); ``` -### Cumstomization - -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). - # Additional information Repository located [here](https://git.fosscat.com/n8r/stripe_native_card_field) diff --git a/example/assets/Lato-Medium.ttf b/example/assets/Lato-Medium.ttf new file mode 100644 index 0000000..2c612da Binary files /dev/null and b/example/assets/Lato-Medium.ttf differ diff --git a/example/lib/dark_customization.dart b/example/lib/dark_customization.dart new file mode 100644 index 0000000..623f3cf --- /dev/null +++ b/example/lib/dark_customization.dart @@ -0,0 +1,99 @@ + +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import 'package:stripe_native_card_field/card_details.dart'; +import 'package:stripe_native_card_field/stripe_native_card_field.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + // This widget is the root of your application. + @override + Widget build(BuildContext context) { + return MaterialApp( + debugShowCheckedModeBanner: false, + title: 'Native Stripe Field Demo', + theme: ThemeData( + brightness: Brightness.dark, + colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple, brightness: Brightness.dark), + useMaterial3: true, + ), + home: const MyHomePage(title: 'Flutter Demo Home Page'), + ); + } +} + +class MyHomePage extends StatefulWidget { + const MyHomePage({super.key, required this.title}); + + final String title; + + @override + State createState() => _MyHomePageState(); +} + +class _MyHomePageState extends State { + CardDetailsValidState? state; + String? errorText; + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.black45, + appBar: AppBar( + backgroundColor: Theme.of(context).colorScheme.inversePrimary, + title: Text(widget.title), + ), + body: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Padding( + padding: EdgeInsets.all(8.0), + child: Text( + 'Enter your card details below:', + style: TextStyle(color: Colors.white70), + ), + ), + CardTextField( + width: 300, + onCardDetailsComplete: (details) { + if (kDebugMode) { + print(details); + } + }, + textStyle: TextStyle(fontFamily: 'Lato', color: Colors.tealAccent), + hintTextStyle: TextStyle(fontFamily: 'Lato', color: Colors.teal), + errorTextStyle: TextStyle(color: Colors.purpleAccent), + boxDecoration: BoxDecoration( + color: Colors.black54, + border: Border.all( + color: Colors.teal.withAlpha(255), + ), + ), + errorBoxDecoration: BoxDecoration( + color: Colors.black54, + border: Border.all(width: 3.0, color: Colors.purple), + ), + cardIconColor: 'teal', + cardIconErrorColor: '#b65cc2', + overrideValidState: state, + errorText: errorText, + ), + ElevatedButton( + child: const Text('Set manual error'), + onPressed: () => setState(() { + errorText = 'There is a problem'; + state = CardDetailsValidState.invalidCard; + }), + ) + ], + ), + ), + ); + } +} diff --git a/example/lib/main.dart b/example/lib/main.dart index d3fb87c..6fa38c3 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -41,11 +41,7 @@ class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar( - backgroundColor: Theme.of(context).colorScheme.inversePrimary, - title: Text(widget.title), - ), - body: Center( + body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ diff --git a/example/pubspec.lock b/example/pubspec.lock index 8ca1e8a..a26d925 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -206,7 +206,7 @@ packages: path: ".." relative: true source: path - version: "0.0.2" + version: "0.0.3" term_glyph: dependency: transitive description: diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 5fca92e..88a8cbd 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -25,3 +25,10 @@ flutter: uses-material-design: true + + + fonts: + - family: Lato + fonts: + - asset: assets/Lato-Medium.ttf + weight: 400 diff --git a/lib/card_provider_icon.dart b/lib/card_provider_icon.dart index 0271cbc..98f2e3d 100644 --- a/lib/card_provider_icon.dart +++ b/lib/card_provider_icon.dart @@ -7,42 +7,47 @@ import 'package:flutter_svg/flutter_svg.dart'; /// /// To see a list of supported card providers, see `CardDetails.provider`. class CardProviderIcon extends StatefulWidget { - const CardProviderIcon({required this.cardDetails, this.size, super.key}); + const CardProviderIcon({required this.cardDetails, this.size, this.defaultCardColor, this.errorCardColor, super.key}); final CardDetails? cardDetails; final Size? size; + final String? defaultCardColor; + final String? errorCardColor; @override State createState() => _CardProviderIconState(); } class _CardProviderIconState extends State { - final Map cardProviderSvg = { - 'credit-card': - '', - 'error': - '', - CardProviderID.discoverCard.name: - '', - CardProviderID.americanExpress.name: - '', - CardProviderID.mastercard.name: - '', - CardProviderID.visa.name: - '', - CardProviderID.dinersClub.name: - '', - CardProviderID.jcb.name: - '', - }; - + late final Map cardProviderSvg; late final Size _size; @override initState() { - super.initState(); + final errorCardColor = widget.errorCardColor ?? 'red'; + final defaultCardColor = widget.defaultCardColor ?? 'black'; + + cardProviderSvg = { + 'credit-card': + '', + 'error': + '', + CardProviderID.discoverCard.name: + '', + CardProviderID.americanExpress.name: + '', + CardProviderID.mastercard.name: + '', + CardProviderID.visa.name: + '', + CardProviderID.dinersClub.name: + '', + CardProviderID.jcb.name: + '', + }; _size = widget.size ?? const Size(30.0, 20.0); + super.initState(); } @override diff --git a/lib/stripe_native_card_field.dart b/lib/stripe_native_card_field.dart index ff2efb2..e84dce0 100644 --- a/lib/stripe_native_card_field.dart +++ b/lib/stripe_native_card_field.dart @@ -51,6 +51,8 @@ class CardTextField extends StatefulWidget { this.securityFieldWidth, this.postalFieldWidth, this.iconSize, + this.cardIconColor, + this.cardIconErrorColor, // this.loadingWidgetLocation = LoadingLocation.rightInside, }) : super(key: key) { if (stripePublishableKey != null) { @@ -99,6 +101,12 @@ class CardTextField extends StatefulWidget { /// Overrides default icon size of the card provider, defaults to `Size(30.0, 20.0)` final Size? iconSize; + /// CSS string name of color or hex code for the card SVG icon to render + final String? cardIconColor; + + /// CSS string name of color or hex code for the error card SVG icon to render + final String? cardIconErrorColor; + /// Determines where the loading indicator appears when contacting stripe // final LoadingLocation loadingWidgetLocation; @@ -367,6 +375,8 @@ class CardTextFieldState extends State { child: CardProviderIcon( cardDetails: _cardDetails, size: widget.iconSize, + defaultCardColor: widget.cardIconColor, + errorCardColor: widget.cardIconErrorColor, ), ), SizedBox( @@ -663,7 +673,7 @@ class CardTextFieldState extends State { child: Text( // Spacing changes by like a pixel if its an empty string, slight jitter when error appears and disappears _validationErrorText ?? ' ', - style: const TextStyle(color: Colors.red), + style: _errorTextStyle, ), ), ), diff --git a/pubspec.yaml b/pubspec.yaml index 8f063da..cec5d42 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: stripe_native_card_field description: A native flutter implementation of the elegant Stripe Card Field. -version: 0.0.3 +version: 0.0.4 repository: https://git.fosscat.com/n8r/stripe_native_card_field environment: diff --git a/readme_assets/customizable_style.gif b/readme_assets/customizable_style.gif new file mode 100644 index 0000000..75a78ab Binary files /dev/null and b/readme_assets/customizable_style.gif differ diff --git a/readme_assets/smooth_ux.gif b/readme_assets/smooth_ux.gif new file mode 100644 index 0000000..cb7e586 Binary files /dev/null and b/readme_assets/smooth_ux.gif differ diff --git a/slides.md b/slides.md deleted file mode 100644 index 42a9f21..0000000 --- a/slides.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -author: Nathan Anderson -date: MMMM dd, YYYY -paging: Slide %d / %d ---- - -# Steps to Publish - -1. Initialize Library -2. Write Library -4. Write some tests -5. Publish! - ---- - -# 1. Initialize Your Library! - ---- - -## Publishing Requirements - -- You must include a LICENSE file. -- Your package must be smaller than 100 MB after gzip compression. -- Your package should depend only on hosted dependencies (from the default pub -package server) and SDK dependencies (sdk: flutter). -- You must have a Google Account, - ---- - -## Publishing is Forever - -To make sure projects don't break after using a dependency, you are unable to -take down a published project. - -If you will have regrets publishing, turn back now. - ---- - -## Initialize Project - -Creating a flutter library is straightforward, simply run the command - -```sh -flutter create -template=package -``` - -Creates a new flutter project with a simple example library inside. - ---- - -## Select License - -This is important. The dart team recommends the BSD-3 clause license. - ---- - -## pubspec.yaml Considerations - -In the `pubspec.yaml` file, it is recommended to include a "homepage" or "repository" -field. This gets popultated into the package page on [pub.dev](https://pub.dev). - -```yaml -# Top of pubspec.yaml file -name: stripe_native_card_field -description: A native flutter implementation of Stripes Card Field. -version: 0.0.1 -repository: https://git.fosscat.com/nathananderson98/stripe_native_card_field -``` - ---- - -# 2. Write Your Library - ---- - -## Important Bits - -Be sure to include a `README.md` file at the root of your library as this is -what determines the content of your packages page on [pub.dev](https://pub.dev) - -A `CHANGELOG.md` file can also be included and will fill out a tab on the -package's page - -### Verified Publisher - -You can publish under a verified domain as a "Verified Publisher". Its a bit of -a process. But it adds a cool checkmark on your package and you can hide your email. - ---- - -## Tests - -Its a good idea to include some Unit Tests and Widget Tests for your library. - ---- - -# 3. Publishing! - ---- - -## Dry Run - -To see the results of what publishing will look like without going through with it run - -```sh -dart pub publish --dry-run -``` - -## Helpful Links - -[Dart Publishing Guide](https://dart.dev/tools/pub/publishing)