Improve Landscape Support

* Improve Landscape Support #3 Add Landscape support (make content scrollable) on the DigidPinPage. * Improve Landscape Support #2 Add Landscape support (make content scrollable) on the WalletPersonalizeDigidErrorPage. * Improve Landscape Support Add Landscape support (make content scrollable) on the WalletPersonalizeIntroPage.
MinBZK · May 15, 2023 · dcda2c3 · dcda2c3
1 parent 10dfc7a
commit dcda2c3
Show file tree

Hide file tree

Showing 4 changed files with 255 additions and 141 deletions.
diff --git a/wallet_app/lib/src/feature/common/widget/sliver_sized_box.dart b/wallet_app/lib/src/feature/common/widget/sliver_sized_box.dart
@@ -2,15 +2,22 @@ import 'package:flutter/cupertino.dart';
 
 class SliverSizedBox extends StatelessWidget {
   final double? width, height;
+  final Widget? child;
 
-  const SliverSizedBox({this.width, this.height, Key? key}) : super(key: key);
+  const SliverSizedBox({
+    this.width,
+    this.height,
+    this.child,
+    Key? key,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return SliverToBoxAdapter(
       child: SizedBox(
         width: width,
         height: height,
+        child: child,
       ),
     );
   }

diff --git a/wallet_app/lib/src/feature/mock_digid/page/digid_pin_page.dart b/wallet_app/lib/src/feature/mock_digid/page/digid_pin_page.dart
@@ -25,63 +25,126 @@ class DigidPinPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: SafeArea(
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisSize: MainAxisSize.max,
-          children: [
-            const SizedBox(height: 32),
-            Center(
-              child: Image.asset(
-                _kDigidLogoPath,
-                scale: 0.7,
-              ),
+      body: OrientationBuilder(
+        builder: (context, orientation) {
+          switch (orientation) {
+            case Orientation.portrait:
+              return _buildPortrait(context);
+            case Orientation.landscape:
+              return _buildLandscape(context);
+          }
+        },
+      ),
+    );
+  }
+
+  Widget _buildPortrait(BuildContext context) {
+    return SafeArea(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.max,
+        children: [
+          const SizedBox(height: 32),
+          Center(
+            child: Image.asset(
+              _kDigidLogoPath,
+              scale: 0.7,
             ),
-            const SizedBox(height: 32),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16),
-              child: Row(
-                crossAxisAlignment: CrossAxisAlignment.center,
-                children: [
-                  Expanded(
-                    child: Text(
-                      AppLocalizations.of(context).mockDigidScreenEnterPin,
-                      style: Theme.of(context).textTheme.bodyMedium,
-                    ),
+          ),
+          const SizedBox(height: 32),
+          _buildEnterPinInfoSection(context),
+          const Spacer(),
+          _buildPinSection(context),
+          const Spacer(),
+          _buildForgotPinCta(context),
+          const SizedBox(height: 16),
+          const Divider(height: 1),
+          PinKeyboard(
+            onKeyPressed: onKeyPressed,
+            onBackspacePressed: onBackspacePressed,
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildLandscape(BuildContext context) {
+    return SafeArea(
+      child: Row(
+        children: [
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
+              mainAxisSize: MainAxisSize.max,
+              children: [
+                const Spacer(),
+                Center(
+                  child: Image.asset(
+                    _kDigidLogoPath,
+                    scale: 0.7,
                   ),
-                  const Icon(Icons.help, size: 20),
-                ],
-              ),
-            ),
-            const Spacer(),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16),
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: List.generate(_kDigidPinCount, (index) {
-                  return _buildPinField(context, index == selectedIndex, index < selectedIndex);
-                }),
-              ),
+                ),
+                const SizedBox(height: 32),
+                _buildEnterPinInfoSection(context),
+                const Spacer(),
+                _buildPinSection(context),
+                const Spacer(),
+                _buildForgotPinCta(context),
+                const Spacer(),
+              ],
             ),
-            const Spacer(),
-            Center(
-              child: Text(
-                AppLocalizations.of(context).mockDigidScreenForgotPinCta,
-                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                      color: Theme.of(context).colorScheme.primary,
-                      fontWeight: FontWeight.bold,
-                      decoration: TextDecoration.underline,
-                    ),
-              ),
-            ),
-            const SizedBox(height: 16),
-            const Divider(height: 1),
-            PinKeyboard(
+          ),
+          Expanded(
+            child: PinKeyboard(
               onKeyPressed: onKeyPressed,
               onBackspacePressed: onBackspacePressed,
             ),
-          ],
-        ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget _buildEnterPinInfoSection(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Expanded(
+            child: Text(
+              AppLocalizations.of(context).mockDigidScreenEnterPin,
+              style: Theme.of(context).textTheme.bodyMedium,
+            ),
+          ),
+          const Icon(Icons.help, size: 20),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildPinSection(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: List.generate(_kDigidPinCount, (index) {
+          return _buildPinField(context, index == selectedIndex, index < selectedIndex);
+        }),
+      ),
+    );
+  }
+
+  Widget _buildForgotPinCta(BuildContext context) {
+    return Center(
+      child: Text(
+        AppLocalizations.of(context).mockDigidScreenForgotPinCta,
+        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+              color: Theme.of(context).colorScheme.primary,
+              fontWeight: FontWeight.bold,
+              decoration: TextDecoration.underline,
+            ),
       ),
     );
   }

diff --git a/wallet_app/lib/src/feature/wallet/personalize/page/wallet_personalize_digid_error_page.dart b/wallet_app/lib/src/feature/wallet/personalize/page/wallet_personalize_digid_error_page.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import '../../../common/widget/button/text_icon_button.dart';
+import '../../../common/widget/sliver_sized_box.dart';
 
 const _kDigidLogoPath = 'assets/images/digid_logo.png';
 
@@ -18,59 +19,79 @@ class WalletPersonalizeDigidErrorPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final locale = AppLocalizations.of(context);
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 16),
-      child: Column(
-        mainAxisSize: MainAxisSize.max,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          const SizedBox(height: 12),
-          SizedBox(
-            height: 105,
-            child: Container(
-              decoration: BoxDecoration(
-                color: Theme.of(context).colorScheme.secondaryContainer,
-                borderRadius: BorderRadius.circular(8),
+    return Scrollbar(
+      thumbVisibility: true,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16),
+        child: CustomScrollView(
+          slivers: [
+            const SliverSizedBox(height: 36),
+            SliverSizedBox(
+              height: 105,
+              child: Container(
+                decoration: BoxDecoration(
+                  color: Theme.of(context).colorScheme.secondaryContainer,
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                alignment: Alignment.center,
+                child: const Text('Placeholder image'),
               ),
-              alignment: Alignment.center,
-              child: const Text('Placeholder image'),
             ),
-          ),
-          const SizedBox(height: 24),
-          Text(
-            locale.walletPersonalizeDigidErrorPageTitle,
-            textAlign: TextAlign.start,
-            style: Theme.of(context).textTheme.displaySmall,
-          ),
-          const SizedBox(height: 8),
-          Text(
-            locale.walletPersonalizeDigidErrorPageDescription,
-            textAlign: TextAlign.start,
-            style: Theme.of(context).textTheme.bodyLarge,
-          ),
-          const Spacer(),
-          ElevatedButton(
-            onPressed: onRetryPressed,
-            child: Row(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Image.asset(_kDigidLogoPath),
-                const SizedBox(width: 12),
-                Text(locale.walletPersonalizeDigidErrorPageLoginWithDigidCta),
-              ],
+            const SliverSizedBox(height: 24),
+            SliverToBoxAdapter(
+              child: Text(
+                locale.walletPersonalizeDigidErrorPageTitle,
+                textAlign: TextAlign.start,
+                style: Theme.of(context).textTheme.displaySmall,
+              ),
             ),
-          ),
-          const SizedBox(height: 8),
-          Center(
-            child: TextIconButton(
-              onPressed: onHelpPressed,
+            const SliverSizedBox(height: 8),
+            SliverToBoxAdapter(
               child: Text(
-                locale.walletPersonalizeDigidErrorPageNoDigidCta,
+                locale.walletPersonalizeDigidErrorPageDescription,
+                textAlign: TextAlign.start,
+                style: Theme.of(context).textTheme.bodyLarge,
               ),
             ),
-          ),
-        ],
+            const SliverSizedBox(height: 32),
+            SliverFillRemaining(
+              hasScrollBody: false,
+              fillOverscroll: true,
+              child: _buildBottomSection(context),
+            ),
+          ],
+        ),
       ),
     );
   }
+
+  Widget _buildBottomSection(BuildContext context) {
+    final locale = AppLocalizations.of(context);
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.end,
+      children: [
+        ElevatedButton(
+          onPressed: onRetryPressed,
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Image.asset(_kDigidLogoPath),
+              const SizedBox(width: 12),
+              Text(locale.walletPersonalizeDigidErrorPageLoginWithDigidCta),
+            ],
+          ),
+        ),
+        const SizedBox(height: 8),
+        Center(
+          child: TextIconButton(
+            onPressed: onHelpPressed,
+            child: Text(
+              locale.walletPersonalizeDigidErrorPageNoDigidCta,
+            ),
+          ),
+        ),
+        const SizedBox(height: 24),
+      ],
+    );
+  }
 }