Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(passkit_ui): Improve storecards and event tickets #67

Merged
merged 7 commits into from
Jul 20, 2024
Merged

feat(passkit_ui): Improve storecards and event tickets #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2e018ef
small improvements
ueman Jul 19, 2024
58a1b8e
remove boarding pass icon
ueman Jul 19, 2024
8e250cb
wip
ueman Jul 20, 2024
3495ed2
wip
ueman Jul 20, 2024
fc5a614
fix store card font size
ueman Jul 20, 2024
6723500
docs
ueman Jul 20, 2024
81e56d2
docs
ueman Jul 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions app/lib/home_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import 'package:app/widgets/app_icon.dart';
import 'package:app/widgets/pass_list_tile.dart';
import 'package:desktop_drop/desktop_drop.dart';
import 'package:drift/drift.dart' as drift;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:passkit/passkit.dart';
Expand Down Expand Up @@ -62,6 +63,12 @@ class _HomePageState extends State<HomePage> {
appBar: AppBar(
title: const AppIcon(),
centerTitle: true,
leading: kDebugMode
? IconButton(
onPressed: () => router.push('/examples'),
icon: const Icon(Icons.card_giftcard),
)
: null,
actions: [
IconButton(
onPressed: () => pickPass(context),
Expand Down
7 changes: 0 additions & 7 deletions app/lib/settings/settings_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import 'package:app/db/preferences.dart';
import 'package:app/router.dart';
import 'package:app/widgets/show_about_dialog.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

Expand All @@ -19,11 +17,6 @@ class _SettingsPageState extends State<SettingsPage> {
appBar: AppBar(
title: Text(AppLocalizations.of(context).settings),
actions: [
if (kDebugMode)
IconButton(
onPressed: () => router.push('/examples'),
icon: const Icon(Icons.card_giftcard),
),
IconButton(
onPressed: () => showAboutWalletApp(context),
icon: const Icon(Icons.info),
Expand Down
115 changes: 50 additions & 65 deletions passkit_ui/lib/src/boarding_pass.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ class BoardingPass extends StatelessWidget {

@override
Widget build(BuildContext context) {
final devicePixelRatio = MediaQuery.devicePixelRatioOf(context);
final theme = Theme.of(context).extension<BoardingPassTheme>()!;
final boardingPass = pass.pass.boardingPass!;

Expand All @@ -35,79 +34,65 @@ class BoardingPass extends StatelessWidget {
color: theme.backgroundColor,
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Stack(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
HeaderRow(
passTheme: theme,
logoText: pass.pass.logoText,
headerFields: boardingPass.headerFields,
logo: pass.logo,
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
HeaderRow(
passTheme: theme,
logoText: pass.pass.logoText,
headerFields: boardingPass.headerFields,
logo: pass.logo,
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_FromTo(
data: boardingPass.primaryFields!.first,
theme: theme,
crossAxisAlignment: CrossAxisAlignment.start,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TransitTypeWidget(
transitType: boardingPass.transitType,
width: 30,
height: 30,
color: theme.labelColor,
),
),
_FromTo(
data: boardingPass.primaryFields![1],
theme: theme,
crossAxisAlignment: CrossAxisAlignment.end,
),
],
_FromTo(
data: boardingPass.primaryFields!.first,
theme: theme,
crossAxisAlignment: CrossAxisAlignment.start,
),
const SizedBox(height: 16),
if (boardingPass.auxiliaryFields != null)
_AuxiliaryRow(
auxiliaryRow: pass.pass.boardingPass!.auxiliaryFields!,
theme: theme,
Padding(
padding: const EdgeInsets.all(8.0),
child: TransitTypeWidget(
transitType: boardingPass.transitType,
width: 30,
height: 30,
color: theme.labelColor,
),
const SizedBox(height: 16),
// secondary fields
_AuxiliaryRow(
auxiliaryRow: pass.pass.boardingPass!.secondaryFields!,
),
_FromTo(
data: boardingPass.primaryFields![1],
theme: theme,
crossAxisAlignment: CrossAxisAlignment.end,
),

const SizedBox(height: 16),
if ((pass.pass.barcodes?.firstOrNull ?? pass.pass.barcode) !=
null) ...[
const Spacer(),
Footer(footer: pass.footer),
const SizedBox(height: 2),
PasskitBarcode(
barcode: (pass.pass.barcodes?.firstOrNull ??
pass.pass.barcode)!,
fontSize: 12,
),
],
],
),
if (pass.icon != null)
// TODO(ueman): check whether this matches Apples design guidelines
Align(
alignment: Alignment.bottomLeft,
child: Image.memory(
pass.icon!.forCorrectPixelRatio(devicePixelRatio),
fit: BoxFit.contain,
height: 15,
),
const SizedBox(height: 16),
if (boardingPass.auxiliaryFields != null)
_AuxiliaryRow(
auxiliaryRow: pass.pass.boardingPass!.auxiliaryFields!,
theme: theme,
),
const SizedBox(height: 16),
// secondary fields
_AuxiliaryRow(
auxiliaryRow: pass.pass.boardingPass!.secondaryFields!,
theme: theme,
),

const SizedBox(height: 16),
if ((pass.pass.barcodes?.firstOrNull ?? pass.pass.barcode) !=
null) ...[
const Spacer(),
Footer(footer: pass.footer),
const SizedBox(height: 2),
PasskitBarcode(
barcode:
(pass.pass.barcodes?.firstOrNull ?? pass.pass.barcode)!,
fontSize: 12,
),
],
],
),
),
Expand Down
82 changes: 37 additions & 45 deletions passkit_ui/lib/src/coupon.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@ class Coupon extends StatelessWidget {

return ClipPath(
clipBehavior: Clip.antiAlias,
clipper: CouponClipper(
Sides.vertical,
clipper: _CouponClipper(
heightOfPoint: 8,
numberOfPoints: 40,
),
Expand All @@ -53,10 +52,7 @@ class Coupon extends StatelessWidget {
pass.strip!.forCorrectPixelRatio(devicePixelRatio),
),
Column(
crossAxisAlignment: coupon
.primaryFields?.firstOrNull?.textAlignment
.toCrossAxisAlign() ??
CrossAxisAlignment.stretch,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
coupon.primaryFields?.firstOrNull?.formatted() ?? '',
Expand Down Expand Up @@ -122,37 +118,36 @@ class _AuxiliaryRow extends StatelessWidget {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: auxiliaryRow.map((item) {
return Column(
children: [
Text(
item.label ?? '',
style: passTheme.auxiliaryLabelStyle,
textAlign: item.textAlignment.toFlutterTextAlign(),
),
Text(
item.formatted() ?? '',
style: passTheme.auxiliaryTextStyle,
textAlign: item.textAlignment.toFlutterTextAlign(),
),
],
return Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
item.label ?? '',
style: passTheme.auxiliaryLabelStyle,
textAlign: item.textAlignment.toFlutterTextAlign(),
),
Text(
item.formatted() ?? '',
style: passTheme.auxiliaryTextStyle,
textAlign: item.textAlignment.toFlutterTextAlign(),
),
],
),
);
}).toList(),
);
}
}

enum Sides { bottom, vertical }

class CouponClipper extends CustomClipper<Path> {
CouponClipper(
this.side, {
class _CouponClipper extends CustomClipper<Path> {
_CouponClipper({
this.heightOfPoint = 12,
this.numberOfPoints = 16,
}); // final Sides side;

final double heightOfPoint;
final int numberOfPoints;
final Sides side;

@override
Path getClip(Size size) {
Expand All @@ -163,31 +158,28 @@ class CouponClipper extends CustomClipper<Path> {
double yControlPoint = size.height - heightOfPoint;
double increment = size.width / numberOfPoints;

if (side == Sides.bottom || side == Sides.vertical) {
while (x < size.width) {
path.quadraticBezierTo(
x + increment / 2,
yControlPoint,
x + increment,
y,
);
x += increment;
}
while (x < size.width) {
path.quadraticBezierTo(
x + increment / 2,
yControlPoint,
x + increment,
y,
);
x += increment;
}

path.lineTo(size.width, 0.0);

if (side == Sides.vertical) {
while (x > 0) {
path.quadraticBezierTo(
x - increment / 2,
heightOfPoint,
x - increment,
0,
);
x -= increment;
}
while (x > 0) {
path.quadraticBezierTo(
x - increment / 2,
heightOfPoint,
x - increment,
0,
);
x -= increment;
}

path.close();
return path;
}
Expand Down
Loading
Loading