Skip to content

Commit

Permalink
generic cards UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@ueman
ueman committed Jul 21, 2024
1 parent 53aec9a commit 9085e0e
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 85 deletions.
96 changes: 40 additions & 56 deletions passkit_ui/lib/src/generic.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
import 'package:passkit/passkit.dart';
import 'package:passkit_ui/passkit_ui.dart';
import 'package:passkit_ui/src/theme/generic_pass_theme.dart';
import 'package:passkit_ui/src/widgets/header_row.dart';
import 'package:passkit_ui/src/widgets/thumbnail.dart';

/// https://developer.apple.com/design/human-interface-guidelines/wallet#Generic-passes
class Generic extends StatelessWidget {
Expand All @@ -11,7 +13,6 @@ class Generic extends StatelessWidget {

@override
Widget build(BuildContext context) {
final devicePixelRatio = MediaQuery.devicePixelRatioOf(context);
final passTheme = Theme.of(context).extension<GenericPassTheme>()!;
final generic = pass.pass.generic!;

Expand All @@ -29,74 +30,47 @@ class Generic extends StatelessWidget {
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Logo(logo: pass.logo),
if (pass.pass.logoText != null)
Text(
pass.pass.logoText!,
style: passTheme.logoTextStyle,
),
const Spacer(),
// TODO(ueman): The header should be as wide as the thumbnail
Column(
children: [
Text(
generic.headerFields?.first.label ?? '',
style: passTheme.headerLabelStyle,
),
Text(
generic.headerFields?.first.value?.toString() ?? '',
style: passTheme.headerTextStyle,
),
],
),
],
HeaderRow(
passTheme: passTheme,
headerFields: generic.headerFields,
logo: pass.logo,
logoText: pass.pass.logoText,
),
const SizedBox(height: 16),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_AuxiliaryRow(
passTheme: passTheme,
auxiliaryRow: generic.primaryFields!,
Expanded(
child: _AuxiliaryRow(
passTheme: passTheme,
auxiliaryRow: generic.primaryFields!,
primary: true,
),
),
// The thumbnail image (`thumbnail.png`) displayed next to the
// fields on the front of the pass. The allotted space is
// 90 x 90 points. The aspect ratio should be in the range of
// 2:3 to 3:2, otherwise the image is cropped.
if (pass.thumbnail != null)
Image.memory(
width: 90,
height: 90,
fit: BoxFit.contain,
pass.thumbnail!.forCorrectPixelRatio(devicePixelRatio),
),
Thumbnail(thumbnail: pass.thumbnail),
],
),
if (generic.secondaryFields != null)
_AuxiliaryRow(
passTheme: passTheme,
auxiliaryRow: generic.secondaryFields!,
primary: false,
),
if (generic.auxiliaryFields != null) ...[
const SizedBox(height: 16),
_AuxiliaryRow(
passTheme: passTheme,
auxiliaryRow: generic.auxiliaryFields!,
primary: false,
),
],
const SizedBox(height: 16),
if (pass.footer != null)
Image.memory(
pass.footer!.forCorrectPixelRatio(devicePixelRatio),
fit: BoxFit.contain,
width: 286,
height: 15,
),
const Spacer(),
if ((pass.pass.barcodes?.firstOrNull ?? pass.pass.barcode) !=
null)
PasskitBarcode(
Expand All @@ -116,29 +90,39 @@ class _AuxiliaryRow extends StatelessWidget {
const _AuxiliaryRow({
required this.auxiliaryRow,
required this.passTheme,
required this.primary,
});

final List<FieldDict> auxiliaryRow;
final GenericPassTheme passTheme;
final bool primary;

@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: auxiliaryRow.map((item) {
return Column(
children: [
Text(
item.label ?? '',
style: passTheme.secondaryWithStripLabelStyle,
textAlign: item.textAlignment.toFlutterTextAlign(),
),
Text(
item.formatted() ?? '',
style: passTheme.secondaryWithStripTextStyle,
textAlign: item.textAlignment.toFlutterTextAlign(),
),
],
return Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
item.label ?? '',
style: primary
? passTheme.primaryWithThumbnailLabelStyle
: passTheme.secondaryWithThumbnailLabelStyle,
textAlign: item.textAlignment.toFlutterTextAlign(),
),
Text(
item.formatted() ?? '',
style: primary
? passTheme.primaryWithThumbnailTextStyle
: passTheme.secondaryWithThumbnailTextStyle,
textAlign: item.textAlignment.toFlutterTextAlign(),
),
],
),
);
}).toList(),
);
Expand Down
30 changes: 1 addition & 29 deletions passkit_ui/lib/src/theme/generic_pass_theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,8 @@ class GenericPassTheme extends ThemeExtension<GenericPassTheme>
required this.auxiliaryTextStyle,
required this.headerLabelStyle,
required this.headerTextStyle,
required this.primaryWithStripLabelStyle,
required this.primaryWithStripTextStyle,
required this.primaryWithThumbnailLabelStyle,
required this.primaryWithThumbnailTextStyle,
required this.secondaryWithStripLabelStyle,
required this.secondaryWithStripTextStyle,
required this.secondaryWithThumbnailLabelStyle,
required this.secondaryWithThumbnailTextStyle,
required this.backgroundColor,
Expand Down Expand Up @@ -65,32 +61,14 @@ class GenericPassTheme extends ThemeExtension<GenericPassTheme>
fontSize: 12,
height: 0.9,
),
primaryWithStripLabelStyle: TextStyle(
color: foregroundColor,
fontSize: 11,
fontWeight: FontWeight.w600,
),
primaryWithStripTextStyle: TextStyle(
color: foregroundColor,
fontSize: 50,
height: 0.9,
),
secondaryWithStripLabelStyle: labelTextStyle.copyWith(
fontSize: 11,
fontWeight: FontWeight.w600,
),
secondaryWithStripTextStyle: foregroundTextStyle.copyWith(
fontSize: 12,
height: 0.9,
),
primaryWithThumbnailLabelStyle: TextStyle(
color: foregroundColor,
fontSize: 11,
fontWeight: FontWeight.w600,
),
primaryWithThumbnailTextStyle: TextStyle(
color: foregroundColor,
fontSize: 50,
fontSize: 30,
height: 0.9,
),
secondaryWithThumbnailLabelStyle: labelTextStyle.copyWith(
Expand Down Expand Up @@ -125,15 +103,9 @@ class GenericPassTheme extends ThemeExtension<GenericPassTheme>
@override
final TextStyle headerTextStyle;

final TextStyle primaryWithStripLabelStyle;
final TextStyle primaryWithStripTextStyle;

final TextStyle primaryWithThumbnailLabelStyle;
final TextStyle primaryWithThumbnailTextStyle;

final TextStyle secondaryWithStripLabelStyle;
final TextStyle secondaryWithStripTextStyle;

final TextStyle secondaryWithThumbnailLabelStyle;
final TextStyle secondaryWithThumbnailTextStyle;

Expand Down
28 changes: 28 additions & 0 deletions passkit_ui/lib/src/widgets/thumbnail.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import 'package:flutter/material.dart';
import 'package:passkit/passkit.dart';
import 'package:passkit_ui/src/extensions/pk_pass_image_extension.dart';

/// The thumbnail image (thumbnail.png) displayed next to the fields on the
/// front of the pass. The allotted space is 90 x 90 points. The aspect ratio
/// should be in the range of 2:3 to 3:2, otherwise the image is cropped.
///
/// From https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/PassKit_PG/Creating.html#//apple_ref/doc/uid/TP40012195-CH4-SW8
class Thumbnail extends StatelessWidget {
const Thumbnail({super.key, this.thumbnail});

final PkPassImage? thumbnail;

@override
Widget build(BuildContext context) {
if (thumbnail == null) return const SizedBox.shrink();

final devicePixelRatio = MediaQuery.devicePixelRatioOf(context);

return Image.memory(
thumbnail!.forCorrectPixelRatio(devicePixelRatio),
fit: BoxFit.contain,
width: 90,
height: 90,
);
}
}

0 comments on commit 9085e0e

Please sign in to comment.