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

ueman · Jul 20, 2024 · ff6f61d · ff6f61d
1 parent 502cafd
commit ff6f61d
Show file tree

Hide file tree

Showing 11 changed files with 287 additions and 255 deletions.
diff --git a/app/lib/home_page.dart b/app/lib/home_page.dart
@@ -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';
@@ -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),

diff --git a/app/lib/settings/settings_page.dart b/app/lib/settings/settings_page.dart
@@ -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';
 
@@ -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),

diff --git a/passkit_ui/lib/src/boarding_pass.dart b/passkit_ui/lib/src/boarding_pass.dart
@@ -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!;
 
@@ -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,
+                ),
+              ],
             ],
           ),
         ),

diff --git a/passkit_ui/lib/src/coupon.dart b/passkit_ui/lib/src/coupon.dart
@@ -27,8 +27,7 @@ class Coupon extends StatelessWidget {
 
     return ClipPath(
       clipBehavior: Clip.antiAlias,
-      clipper: CouponClipper(
-        Sides.vertical,
+      clipper: _CouponClipper(
         heightOfPoint: 8,
         numberOfPoints: 40,
       ),
@@ -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() ?? '',
@@ -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) {
@@ -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;
   }