CHANGELOG.md

@@ -1,10 +1,3 @@
-## 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!

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 & Easier to Use ( fewer dependencies than the official stripe elements )
+- 󱐋  Blazingly fast ( its as fast as the rest of flutter )
+- 󰃢  Cleaner ( 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 pretty close )
-- 💳 Built-in Stripe Integration ( guess that one is obvious )
+- ☑  Seemless UI/UX ( hard to match stripe quality, but I think I got close )
+-   Built-in Stripe Integration ( guess that one is obvious )
 - ☯  Chi Energy Boost ( alright I'm fishing... )
 
 ## Why StripeNativeCardField?
@@ -31,23 +31,19 @@ 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)
 
-[Supported Card Providers in Docs](https://pub.dev/documentation/stripe_native_card_field/latest/card_details/CardProviderID.html)
+[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](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/readme_assets/customizable_style.gif)
+![Customizable Style 1]()
 
-This dark mode style example provided [here](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/example/lib/dark_customization.dart)
+![Customizable Style 2]()
 
-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).
+### Cross Platform
 
-### 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.
+![desktop showcase](./example/loading.gif)
 
 # Getting started
 
@@ -87,6 +83,11 @@ 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)

example/lib/dark_customization.dart

@@ -1,99 +0,0 @@
-
-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<MyHomePage> createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-  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: <Widget>[
-            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;
-              }),
-            )
-          ],
-        ),
-      ),
-    );
-  }
-}

example/lib/main.dart

@@ -41,7 +41,11 @@ class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-         body: Center(
+      appBar: AppBar(
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: Text(widget.title),
+      ),
+      body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[

example/pubspec.lock

@@ -206,7 +206,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.3"
+    version: "0.0.2"
   term_glyph:
     dependency: transitive
     description:

example/pubspec.yaml

@@ -25,10 +25,3 @@ flutter:
 
   uses-material-design: true
 
-
-
-  fonts:
-    - family: Lato
-      fonts:
-        - asset: assets/Lato-Medium.ttf
-          weight: 400

lib/stripe_native_card_field.dart

@@ -51,8 +51,6 @@ class CardTextField extends StatefulWidget {
     this.securityFieldWidth,
     this.postalFieldWidth,
     this.iconSize,
-    this.cardIconColor,
-    this.cardIconErrorColor,
     // this.loadingWidgetLocation = LoadingLocation.rightInside,
   }) : super(key: key) {
     if (stripePublishableKey != null) {
@@ -101,12 +99,6 @@ 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;
 
@@ -375,8 +367,6 @@ class CardTextFieldState extends State<CardTextField> {
                             child: CardProviderIcon(
                               cardDetails: _cardDetails,
                               size: widget.iconSize,
-                              defaultCardColor: widget.cardIconColor,
-                              errorCardColor: widget.cardIconErrorColor,
                             ),
                           ),
                           SizedBox(
@@ -673,7 +663,7 @@ class CardTextFieldState extends State<CardTextField> {
             child: Text(
               // Spacing changes by like a pixel if its an empty string, slight jitter when error appears and disappears
               _validationErrorText ?? ' ',
-              style: _errorTextStyle,
+              style: const TextStyle(color: Colors.red),
             ),
           ),
         ),

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.4
+version: 0.0.3
 repository: https://git.fosscat.com/n8r/stripe_native_card_field
 
 environment:

slides.md

@@ -0,0 +1,111 @@
+---
+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 <package_name>
+```
+
+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)