Compare commits

..

2 Commits

Author SHA1 Message Date
645d0749da Merge pull request 'Updateto 0.0.4' (#2) from 0.0.4 into main
Reviewed-on: #2
2023-11-21 13:39:47 -07:00
Nathan Anderson
bd91c1f814 Updateto 0.0.4 2023-11-21 13:38:02 -07:00
13 changed files with 168 additions and 156 deletions

View File

@ -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!

View File

@ -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)

Binary file not shown.

View File

@ -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<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;
}),
)
],
),
),
);
}
}

View File

@ -41,11 +41,7 @@ class _MyHomePageState extends State<MyHomePage> {
@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: <Widget>[

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

@ -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<CardTextField> {
child: CardProviderIcon(
cardDetails: _cardDetails,
size: widget.iconSize,
defaultCardColor: widget.cardIconColor,
errorCardColor: widget.cardIconErrorColor,
),
),
SizedBox(
@ -663,7 +673,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: const TextStyle(color: Colors.red),
style: _errorTextStyle,
),
),
),

View File

@ -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:

Binary file not shown.

After

Width:  |  Height:  |  Size: 924 KiB

BIN
readme_assets/smooth_ux.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 MiB

111
slides.md
View File

@ -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 <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)