Compare commits

..

No commits in common. "645d0749da1f6aa0cb4a71d593887878215ee933" and "a8e571ca7bd506220010f711f24360c4299a8f7a" have entirely different histories.

13 changed files with 156 additions and 168 deletions

View File

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

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

Binary file not shown.

View File

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

View File

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

View File

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

View File

@ -25,10 +25,3 @@ 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,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),
),
),
),

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 924 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 MiB

111
slides.md Normal file
View File

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