fix: 💄 Improve menu items layout

Items text layout is responsive.
archethic-foundation · Jun 20, 2024 · 90bf328 · 90bf328
1 parent 1911ba5
commit 90bf328
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 70 deletions.
diff --git a/lib/ui/menu/settings/components/settings_list_item_defaultvalue.dart b/lib/ui/menu/settings/components/settings_list_item_defaultvalue.dart
@@ -48,29 +48,28 @@ class _SettingsListItemWithDefaultValue extends _SettingsListItem {
                   height: AppFontSizes.size28,
                 ),
               ),
-              Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: <Widget>[
-                  SizedBox(
-                    width: Responsive.drawerWidth(context) - 100,
-                    child: Text(
+              Expanded(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: <Widget>[
+                    AutoSizeText(
                       heading,
                       style: disabled
                           ? ArchethicThemeStyles.textStyleSize16W600Primary30
                           : ArchethicThemeStyles.textStyleSize16W600Primary,
                     ),
-                  ),
-                  AutoSizeText(
-                    defaultValue.getDisplayName(context),
-                    style: disabled
-                        ? ArchethicThemeStyles.textStyleSize12W100Primary30
-                        : ArchethicThemeStyles.textStyleSize12W100Primary,
-                    maxLines: 1,
-                    stepGranularity: 0.1,
-                    minFontSize: 8,
-                  ),
-                ],
+                    AutoSizeText(
+                      defaultValue.getDisplayName(context),
+                      style: disabled
+                          ? ArchethicThemeStyles.textStyleSize12W100Primary30
+                          : ArchethicThemeStyles.textStyleSize12W100Primary,
+                      maxLines: 1,
+                      stepGranularity: 0.1,
+                      minFontSize: 8,
+                    ),
+                  ],
+                ),
               ),
             ],
           ),
@@ -127,13 +126,12 @@ class _SettingsListItemWithDefaultValueWithInfos extends _SettingsListItem {
                 height: AppFontSizes.size28,
               ),
             ),
-            Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: <Widget>[
-                SizedBox(
-                  width: Responsive.drawerWidth(context) - 80,
-                  child: Row(
+            Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: <Widget>[
+                  Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: <Widget>[
                       Text(
@@ -148,18 +146,21 @@ class _SettingsListItemWithDefaultValueWithInfos extends _SettingsListItem {
                       ),
                     ],
                   ),
-                ),
-                SizedBox(
-                  width: Responsive.drawerWidth(context) - 80,
-                  child: AutoSizeText(
-                    info,
-                    maxLines: 5,
-                    stepGranularity: 0.1,
-                    minFontSize: 8,
-                    style: ArchethicThemeStyles.textStyleSize12W100Primary,
+                  ConstrainedBox(
+                    constraints: const BoxConstraints(maxWidth: 250),
+                    child: AutoSizeText(
+                      info,
+                      maxLines: 5,
+                      stepGranularity: 0.1,
+                      minFontSize: 8,
+                      style: ArchethicThemeStyles.textStyleSize12W100Primary,
+                    ),
                   ),
-                ),
-              ],
+                ],
+              ),
+            ),
+            const SizedBox(
+              width: 13,
             ),
           ],
         ),

diff --git a/lib/ui/menu/settings/components/settings_list_item_singleline.dart b/lib/ui/menu/settings/components/settings_list_item_singleline.dart
@@ -73,31 +73,32 @@ class _SettingsListItemSingleLineWithInfos extends _SettingsListItem {
                 ),
               ),
             ),
-            Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: <Widget>[
-                SizedBox(
-                  width: Responsive.drawerWidth(context) - 100,
-                  child: Text(
+            Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: <Widget>[
+                  AutoSizeText(
                     heading,
                     style: headingStyle ??
                         ArchethicThemeStyles.textStyleSize16W600Primary,
                   ),
-                ),
-                SizedBox(
-                  width: Responsive.drawerWidth(context) - 100,
-                  child: AutoSizeText(
-                    info,
-                    maxLines: 5,
-                    stepGranularity: 0.1,
-                    minFontSize: 8,
-                    style: ArchethicThemeStyles.textStyleSize12W100Primary,
+                  ConstrainedBox(
+                    constraints: const BoxConstraints(maxWidth: 250),
+                    child: AutoSizeText(
+                      info,
+                      maxLines: 5,
+                      stepGranularity: 0.1,
+                      minFontSize: 8,
+                      style: ArchethicThemeStyles.textStyleSize12W100Primary,
+                    ),
                   ),
-                ),
-              ],
+                ],
+              ),
+            ),
+            const SizedBox(
+              width: 13,
             ),
-            const Spacer(),
             if (displayChevron != null && displayChevron == true)
               Icon(
                 Symbols.chevron_right,
@@ -160,14 +161,15 @@ class _SettingsListItemSingleLine extends _SettingsListItem {
                 height: AppFontSizes.size28,
               ),
             ),
-            SizedBox(
-              width: Responsive.drawerWidth(context) - 100,
+            Expanded(
               child: AutoSizeText(
                 heading,
                 style: headingStyle,
               ),
             ),
-            const Spacer(),
+            const SizedBox(
+              width: 13,
+            ),
             if (displayChevron != null && displayChevron == true)
               Icon(
                 Symbols.chevron_right,

diff --git a/lib/ui/menu/settings/components/settings_list_item_switch.dart b/lib/ui/menu/settings/components/settings_list_item_switch.dart
@@ -50,14 +50,15 @@ class _SettingsListItemSwitch extends _SettingsListItem {
                 height: AppFontSizes.size28,
               ),
             ),
-            SizedBox(
-              width: Responsive.drawerWidth(context) - 130,
+            Expanded(
               child: Text(
                 heading,
                 style: ArchethicThemeStyles.textStyleSize16W600Primary,
               ),
             ),
-            const Spacer(),
+            const SizedBox(
+              width: 13,
+            ),
             Container(
               padding: const EdgeInsets.only(left: 2),
               height: 30,

diff --git a/lib/ui/menu/settings/settings_sheet.dart b/lib/ui/menu/settings/settings_sheet.dart
@@ -22,7 +22,6 @@ import 'package:aewallet/model/setting_item.dart';
 import 'package:aewallet/ui/themes/archethic_theme.dart';
 import 'package:aewallet/ui/themes/archethic_theme_base.dart';
 import 'package:aewallet/ui/themes/styles.dart';
-import 'package:aewallet/ui/util/responsive.dart';
 import 'package:aewallet/ui/util/ui_util.dart';
 import 'package:aewallet/ui/views/authenticate/auth_factory.dart';
 import 'package:aewallet/ui/views/authenticate/logging_out.dart';

diff --git a/lib/ui/util/responsive.dart b/lib/ui/util/responsive.dart
@@ -1,7 +1,5 @@
 /// SPDX-License-Identifier: AGPL-3.0-or-later
 
-// Flutter imports:
-import 'package:aewallet/ui/widgets/components/window_size.dart';
 import 'package:flutter/material.dart';
 
 class Responsive extends StatelessWidget {
@@ -36,8 +34,4 @@ class Responsive extends StatelessWidget {
       return mobile;
     }
   }
-
-  static double drawerWidth(BuildContext context) {
-    return WindowSize().idealSize.width * 0.60;
-  }
 }
diff --git a/lib/ui/widgets/components/app_text_field.dart b/lib/ui/widgets/components/app_text_field.dart
@@ -99,7 +99,7 @@ class AppTextField extends ConsumerStatefulWidget {
   final TextInputType? keyboardType;
   final Function(String text)? onSubmitted;
   final Function(String)? onChanged;
-  final double? topMargin;
+  final double topMargin;
   final double? leftMargin;
   final double? rightMargin;
   final TextStyle? style;
@@ -117,7 +117,7 @@ class _AppTextFieldState extends ConsumerState<AppTextField> {
       margin: EdgeInsets.only(
         left: widget.leftMargin ?? 70,
         right: widget.rightMargin ?? 70,
-        top: widget.topMargin!,
+        top: widget.topMargin,
       ),
       padding: widget.padding,
       width: double.infinity,