Updated adaptive UI for BaseInfoPage

GreyLabsDev · Nov 6, 2024 · 41f0a9b · 41f0a9b
1 parent 77d0bf8
commit 41f0a9b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 15 deletions.
diff --git a/lib/pages/TestPage.dart b/lib/pages/TestPage.dart
@@ -233,7 +233,7 @@ class TestPageState extends State {
       mainImageAsset: "assets/img/button_bg_contacts.png",
       logoImageAsset: "assets/img/logo_contacts_big.png",
       accentFilterColor: AppColors.ContentLightRed,
-      subtitle: "Here you can find me",
+      subtitle: "Find me here",
       content: Column(
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.start,

diff --git a/lib/pages/base/BaseInfoPage.dart b/lib/pages/base/BaseInfoPage.dart
@@ -66,7 +66,7 @@ class BaseInfoPage extends StatelessWidget {
               color: Colors.black54,
               colorBlendMode: BlendMode.darken,
             ),
-            _buildMainContent(content)
+            _buildMainContent(content, isNeedToSwitchVertical)
           ],
           // decoration: BoxDecoration(
           //       image: DecorationImage(
@@ -120,7 +120,7 @@ class BaseInfoPage extends StatelessWidget {
             Expanded(
               child: Container(
                   alignment: Alignment.topLeft,
-                  child: _buildMainContent(content)),
+                  child: _buildMainContent(content, isNeedToSwitchVertical)),
             ),
             Transform.flip(
               flipX: true,
@@ -167,17 +167,54 @@ class BaseInfoPage extends StatelessWidget {
     });
   }
 
-  Widget _buildMainContent(Widget content) {
-    if (subtitle != null) {
-      return Column(
-        mainAxisAlignment: MainAxisAlignment.start,
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          Align(
-            alignment: Alignment.bottomCenter,
-            child: isPaddingEnabled
+  Widget _buildAdaptiveSubtitle(
+      bool isPaddingEnabled,
+      bool isNeedToSwitchVertical,
+      String logoImageAsset,
+      Color? accentFilterColor) {
+
+    Widget bgImage = Padding(
+      padding: EdgeInsets.all(16.0),
+      child: Opacity(
+        opacity: 0.7,
+        child: Image.asset(
+          logoImageAsset,
+          height: 160.0,
+        ),
+      ),
+    );
+
+    return Align(
+        alignment: Alignment.bottomCenter,
+        child: isNeedToSwitchVertical ? Stack(
+          alignment: AlignmentDirectional.center,
+          children: [
+            RotatedBox(
+              quarterTurns: 1,
+              child: accentFilterColor != null
+                  ? ColorFiltered(
+                      colorFilter: ColorFilter.mode(
+                          accentFilterColor, BlendMode.srcATop),
+                      child: bgImage,
+                    )
+                  : bgImage,
+            ),
+            isPaddingEnabled
                 ? Padding(
-                    padding: EdgeInsets.only(top: 64.0),
+                    padding: EdgeInsets.only(top: 18.0, bottom: 18.0),
+                    child: TextTitle(
+                      text: subtitle!,
+                      textColor: accentFilterColor ?? AppColors.ContentWhite,
+                    ),
+                  )
+                : TextTitle(
+                    text: subtitle!,
+                    textColor: accentFilterColor ?? AppColors.ContentWhite,
+                  ),
+          ],
+        ) : isPaddingEnabled
+                ? Padding(
+                    padding: EdgeInsets.only(top: 18.0, bottom: 18.0),
                     child: TextTitleBig(
                       text: subtitle!,
                       textColor: accentFilterColor ?? AppColors.ContentWhite,
@@ -186,8 +223,17 @@ class BaseInfoPage extends StatelessWidget {
                 : TextTitleBig(
                     text: subtitle!,
                     textColor: accentFilterColor ?? AppColors.ContentWhite,
-                  ),
-          ),
+                  ),);
+  }
+
+  Widget _buildMainContent(Widget content, bool isNeedToSwitchVertical) {
+    if (subtitle != null) {
+      return Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          _buildAdaptiveSubtitle(isPaddingEnabled, isNeedToSwitchVertical,
+              logoImageAsset, accentFilterColor),
           Flexible(child: _buildContentContainer(content))
         ],
       );