feat: add padding constants (#14)

* add `Grid` class for padding constants * use `Grid` constants
TBD54566975 · Jan 24, 2024 · 25f7435 · 25f7435
1 parent 13a2b3e
commit 25f7435
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 30 deletions.
diff --git a/frontend/lib/features/account/account_did_page.dart b/frontend/lib/features/account/account_did_page.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_starter/features/account/account_providers.dart';
+import 'package:flutter_starter/shared/grid.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 class AccountDidPage extends HookConsumerWidget {
@@ -12,7 +13,7 @@ class AccountDidPage extends HookConsumerWidget {
     return Scaffold(
       appBar: AppBar(title: const Text('My DID')),
       body: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 20.0),
+          padding: const EdgeInsets.symmetric(horizontal: Grid.side),
           child: Center(child: SelectableText(did.uri))),
     );
   }

diff --git a/frontend/lib/features/account/account_vc_page.dart b/frontend/lib/features/account/account_vc_page.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_starter/features/account/account_providers.dart';
+import 'package:flutter_starter/shared/grid.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 class AccountVCPage extends HookConsumerWidget {
@@ -12,7 +13,7 @@ class AccountVCPage extends HookConsumerWidget {
     return Scaffold(
       appBar: AppBar(title: const Text('My VC')),
       body: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 20.0),
+        padding: const EdgeInsets.symmetric(horizontal: Grid.side),
         child: Center(child: SelectableText(vc ?? '')),
       ),
     );

diff --git a/frontend/lib/features/home/account_balance.dart b/frontend/lib/features/home/account_balance.dart
@@ -1,29 +1,30 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:flutter_starter/l10n/app_localizations.dart';
+import 'package:flutter_starter/shared/grid.dart';
 
 class AccountBalance extends HookWidget {
   const AccountBalance({super.key});
 
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 20.0),
+      padding: const EdgeInsets.symmetric(horizontal: Grid.side),
       child: Container(
         decoration: BoxDecoration(
           border: Border.all(
               color: Theme.of(context).colorScheme.outline, width: 2.0),
-          borderRadius: BorderRadius.circular(24.0),
+          borderRadius: BorderRadius.circular(25.0),
         ),
-        padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 16.0),
+        padding: const EdgeInsets.all(Grid.xs),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Text(
               Loc.of(context).accountBalance,
               style: Theme.of(context).textTheme.labelMedium,
             ),
-            const SizedBox(height: 10),
+            const SizedBox(height: Grid.xxs),
             Center(
               child: Text(
                 '\$0.00',
@@ -32,17 +33,15 @@ class AccountBalance extends HookWidget {
                     ),
               ),
             ),
-            const SizedBox(height: 20),
+            const SizedBox(height: Grid.xs),
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
                 Expanded(
                   child: FilledButton(
                       onPressed: () {}, child: Text(Loc.of(context).deposit)),
                 ),
-                const SizedBox(
-                  width: 20,
-                ),
+                const SizedBox(width: Grid.xs),
                 Expanded(
                   child: FilledButton(
                       onPressed: () {}, child: Text(Loc.of(context).withdraw)),

diff --git a/frontend/lib/features/onboarding/onboarding_welcome_page.dart b/frontend/lib/features/onboarding/onboarding_welcome_page.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_starter/features/pfis/pfis_page.dart';
 import 'package:flutter_starter/l10n/app_localizations.dart';
+import 'package:flutter_starter/shared/grid.dart';
 
 class OnboardingWelcomePage extends StatelessWidget {
   const OnboardingWelcomePage({super.key});
@@ -12,15 +13,15 @@ class OnboardingWelcomePage extends StatelessWidget {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
-            const SizedBox(height: 40),
+            const SizedBox(height: Grid.lg),
             Text(
               Loc.of(context).welcomeToDIDPay,
               style: Theme.of(context).textTheme.displayMedium,
               textAlign: TextAlign.center,
             ),
-            const SizedBox(height: 80),
+            const SizedBox(height: Grid.xxl),
             Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 20.0),
+              padding: const EdgeInsets.symmetric(horizontal: Grid.side),
               child: Text(
                 Loc.of(context).toSendMoney,
                 style: Theme.of(context).textTheme.titleLarge,
@@ -29,7 +30,7 @@ class OnboardingWelcomePage extends StatelessWidget {
             ),
             const Spacer(),
             Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 20.0),
+              padding: const EdgeInsets.symmetric(horizontal: Grid.side),
               child: FilledButton(
                 onPressed: () {
                   Navigator.of(context).push(

diff --git a/frontend/lib/features/pfis/pfi_confirmation_page.dart b/frontend/lib/features/pfis/pfi_confirmation_page.dart
@@ -4,6 +4,7 @@ import 'package:collection/collection.dart';
 import 'package:flutter_starter/features/account/account_providers.dart';
 import 'package:flutter_starter/services/service_providers.dart';
 import 'package:flutter_starter/shared/constants.dart';
+import 'package:flutter_starter/shared/grid.dart';
 import 'package:http/http.dart' as http;
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
@@ -44,13 +45,13 @@ class PfiConfirmationPage extends HookConsumerWidget {
       crossAxisAlignment: CrossAxisAlignment.stretch,
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        const SizedBox(height: 40),
+        const SizedBox(height: Grid.lg),
         Text(
           'Verifying your credentials...',
           style: Theme.of(context).textTheme.titleMedium,
           textAlign: TextAlign.center,
         ),
-        const SizedBox(height: 40),
+        const SizedBox(height: Grid.lg),
         const Center(child: CircularProgressIndicator())
       ],
     );
@@ -60,7 +61,7 @@ class PfiConfirmationPage extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        const SizedBox(height: 40),
+        const SizedBox(height: Grid.lg),
         Expanded(
           child: Center(
             child: Column(
@@ -71,15 +72,15 @@ class PfiConfirmationPage extends HookConsumerWidget {
                   style: Theme.of(context).textTheme.titleMedium,
                   textAlign: TextAlign.center,
                 ),
-                const SizedBox(height: 40),
+                const SizedBox(height: Grid.lg),
                 Icon(Icons.check_circle,
                     size: 80, color: Theme.of(context).colorScheme.primary),
               ],
             ),
           ),
         ),
         Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 20.0),
+          padding: const EdgeInsets.symmetric(horizontal: Grid.side),
           child: FilledButton(
             onPressed: () {
               Navigator.of(context).pushAndRemoveUntil(

diff --git a/frontend/lib/features/send/send_page.dart b/frontend/lib/features/send/send_page.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:flutter_starter/l10n/app_localizations.dart';
 import 'package:flutter_starter/shared/number_pad.dart';
+import 'package:flutter_starter/shared/grid.dart';
 
 class SendPage extends HookWidget {
   const SendPage({super.key});
@@ -24,12 +25,12 @@ class SendPage extends HookWidget {
                     style: Theme.of(context).textTheme.displayLarge,
                     textAlign: TextAlign.center,
                   ),
-                  const SizedBox(height: 40),
+                  const SizedBox(height: Grid.lg),
                 ],
               ),
             ),
             Padding(
-              padding: const EdgeInsets.symmetric(vertical: 16.0),
+              padding: const EdgeInsets.symmetric(vertical: Grid.xs),
               child: NumberPad(
                 onKeyPressed: (key) {
                   sendAmount.value = (sendAmount.value == '\$0')
@@ -45,7 +46,7 @@ class SendPage extends HookWidget {
               ),
             ),
             Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 20.0),
+              padding: const EdgeInsets.symmetric(horizontal: Grid.side),
               child: FilledButton(
                 onPressed: () {},
                 child: Text(Loc.of(context).send),

diff --git a/frontend/lib/shared/grid.dart b/frontend/lib/shared/grid.dart
@@ -0,0 +1,16 @@
+class Grid {
+  static const double gridSize = 8;
+
+  static const double none = 0;
+  static const double quarter = gridSize * 0.25;
+  static const double half = gridSize * 0.5;
+  static const double xxs = gridSize * 1;
+  static const double xs = gridSize * 2;
+  static const double sm = gridSize * 3;
+  static const double md = gridSize * 4;
+  static const double lg = gridSize * 5;
+  static const double xl = gridSize * 6;
+  static const double xxl = gridSize * 7;
+
+  static const double side = 20;
+}
diff --git a/frontend/lib/shared/number_pad.dart b/frontend/lib/shared/number_pad.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_starter/shared/grid.dart';
 
 class NumberPad extends HookWidget {
   final Function(String) onKeyPressed;
@@ -16,7 +17,7 @@ class NumberPad extends HookWidget {
     final pressedKey = useState<String>('');
 
     return Container(
-      padding: const EdgeInsets.symmetric(vertical: 16.0),
+      padding: const EdgeInsets.symmetric(vertical: Grid.xs),
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -63,20 +64,20 @@ class NumberPadKey extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    const defaultSize = 24.0;
-    const selectedSize = 40.0;
+    const defaultFontSize = 24.0;
+    const selectedFontSize = 40.0;
 
-    final keySize = useState(defaultSize);
+    final keySize = useState(defaultFontSize);
 
     return Container(
-      margin: const EdgeInsets.all(8.0),
+      margin: const EdgeInsets.all(Grid.xxs),
       width: 100.0,
       height: 50.0,
       child: GestureDetector(
-        onTapDown: (_) => keySize.value = selectedSize,
-        onTapCancel: () => keySize.value = defaultSize,
+        onTapDown: (_) => keySize.value = selectedFontSize,
+        onTapCancel: () => keySize.value = defaultFontSize,
         onTapUp: (key) {
-          keySize.value = defaultSize;
+          keySize.value = defaultFontSize;
           (title == '<') ? onDeletePressed() : onKeyPressed(title);
         },
         child: AnimatedDefaultTextStyle(