fix: language page responsive

3 days ago · 40d18df6c2
6 changed files with 157 additions and 62 deletions
--- a/assets/svg/button_tablet.svg
+++ b/assets/svg/button_tablet.svg
@ -0,0 +1,27 @@
+<svg width="381" height="117" viewBox="0 0 381 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.01249 101.746C20.4465 120.18 338.386 121.655 366.084 102.507C391.363 85.096 380.999 22.7774 359.476 10.3612C330.152 -6.57422 46.5201 -0.556426 22.7939 12.7398C0.656583 25.156 -6.89102 82.6698 7.01249 101.746Z" fill="url(#paint0_linear_38_11)"/>
+<path d="M356.017 98.496C355.68 98.7141 355.317 98.9169 354.932 99.1029C324.414 114.506 59.5876 113.961 22.6272 100.128C21.0177 99.6066 19.6782 98.8162 18.7616 97.8472C5.70675 81.1052 12.7937 30.5024 33.5458 19.5573C55.8577 7.83788 322.176 2.52229 349.71 17.4645C370.021 28.3678 379.652 83.177 356.017 98.496Z" fill="url(#paint1_linear_38_11)"/>
+<path d="M18.8637 94.5198C31.4778 110.739 330.01 112.036 356.018 95.1894C379.754 79.8705 370.022 25.0404 349.812 14.1162C322.278 -0.784229 55.9598 4.51044 33.6818 16.2089C12.8958 27.1331 5.80891 77.7359 18.8637 94.5198Z" fill="url(#paint2_linear_38_11)"/>
+<path style="mix-blend-mode:screen" opacity="0.5" d="M65.6934 12.9261C65.6934 12.9261 249.924 -3.84809 346.186 13.9614C352.198 19.0256 356.045 24.2608 357.63 29.5398C333.599 36.1001 301.62 39.6061 268.016 39.3646C217.881 39.2953 170.314 19.2911 128.148 16.0317C107.706 14.228 86.7231 13.1846 65.6934 12.9261Z" fill="url(#paint3_linear_38_11)"/>
+<defs>
+<linearGradient id="paint0_linear_38_11" x1="190.431" y1="116.232" x2="190.431" y2="-0.00935347" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CADCFF"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint1_linear_38_11" x1="191.085" y1="110.592" x2="191.085" y2="8.31921" gradientUnits="userSpaceOnUse">
+<stop stop-color="#07A7FD"/>
+<stop offset="1" stop-color="#00DDF4"/>
+</linearGradient>
+<linearGradient id="paint2_linear_38_11" x1="191.086" y1="107.265" x2="191.086" y2="4.99177" gradientUnits="userSpaceOnUse">
+<stop stop-color="#01EDF2"/>
+<stop offset="1" stop-color="#08A3FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_38_11" x1="65.356" y1="18.4497" x2="357.219" y2="36.2768" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7ED140"/>
+<stop offset="0.11" stop-color="#74C13B"/>
+<stop offset="0.34" stop-color="#5B972E"/>
+<stop offset="0.65" stop-color="#325319"/>
+<stop offset="1"/>
+</linearGradient>
+</defs>
+</svg>
--- a/lib/common_ui/resources/my_assets.dart
+++ b/lib/common_ui/resources/my_assets.dart
@ -33,6 +33,7 @@ class MyAssets {
  static const String musicOff = 'assets/svg/music_off.svg';
  static const String musicOn = 'assets/svg/music_on.svg';
  static const String button = 'assets/svg/button.svg';
+  static const String buttonTablet = 'assets/svg/button_tablet.svg';
  static const String button2 = 'assets/svg/button_2.svg';
  static const String button3 = 'assets/svg/button_3.svg';
  static const String theme = 'assets/svg/theme.svg';
--- a/lib/core/widgets/button/my_blue_button.dart
+++ b/lib/core/widgets/button/my_blue_button.dart
@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_colors.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_text_style.dart';
+import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart';
+import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart';
+
+class MyBlueButton extends StatelessWidget {
+  const MyBlueButton({
+    super.key,
+    this.onTap,
+    this.title,
+  });
+
+  final VoidCallback? onTap;
+  final String? title;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      highlightColor: MyColors.transparent,
+      splashColor: MyColors.transparent,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          MyImage(image:
+          setSize(
+            context: context,
+            mobile: MyAssets.button,
+            tablet: MyAssets.buttonTablet,
+          ) ??
+              '',
+          ),
+          PositionedDirectional(
+            top: setSize(context: context, mobile: MySpaces.s10, tablet: MySpaces.s20),
+            child: Text(
+              title ?? '',
+              style: MYTextStyle.button1.copyWith(
+                color: Color(0XFF1D6EFF),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/core/widgets/button/my_button.dart
+++ b/lib/core/widgets/button/my_button.dart
@ -37,7 +37,7 @@ class MyButton extends StatelessWidget {
              top: MySpaces.s2,
              child: Text(
                title ?? '',
-                style: DinoKids.regular45.copyWith(
+                style: MYTextStyle.button1.copyWith(
                  color: ButtonType.textColor[type],
                ),
              ),
--- a/lib/features/language/presentation/ui/language_page.dart
+++ b/lib/features/language/presentation/ui/language_page.dart
@ -6,11 +6,13 @@ import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart';
 import 'package:hadi_hoda_flutter/common_ui/resources/my_text_style.dart';
 import 'package:hadi_hoda_flutter/core/utils/my_localization.dart';
 import 'package:hadi_hoda_flutter/core/utils/screen_size.dart';
-import 'package:hadi_hoda_flutter/core/widgets/button/my_button.dart';
+import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart';
+import 'package:hadi_hoda_flutter/core/widgets/button/my_blue_button.dart';
 import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart';
 import 'package:hadi_hoda_flutter/features/language/presentation/bloc/language_bloc.dart';
 import 'package:hadi_hoda_flutter/features/language/presentation/bloc/language_event.dart';
 import 'package:hadi_hoda_flutter/features/language/presentation/bloc/language_state.dart';
+import 'package:hadi_hoda_flutter/features/language/presentation/ui/widgets/language_widget.dart';

 class LanguagePage extends StatelessWidget {
  const LanguagePage({super.key});
@ -39,10 +41,10 @@ class LanguagePage extends StatelessWidget {
        ),
        child: Padding(
          padding: EdgeInsets.only(
-            left: 60,
-            right: 60,
-            bottom: MediaQuery.viewPaddingOf(context).bottom + MySpaces.s16,
-            top: MediaQuery.viewPaddingOf(context).bottom + 50,
+            left: setSize(context: context, mobile: 60, tablet: 0.3.w) ?? 0,
+            right: setSize(context: context, mobile: 60, tablet: 0.3.w) ?? 0,
+            bottom: MySpaces.s40,
+            top: 100,
          ),
          child: Column(
            children: [_title(context), _list(context), _btn(context)],
@ -60,7 +62,7 @@ class LanguagePage extends StatelessWidget {
        MyImage(image: MyAssets.lang, size: 28),
        Text(
          context.translate.select_language,
-          style: Marhey.semiBold22.copyWith(color: Color(0XFF847AC4)),
+          style: MYTextStyle.titr0.copyWith(color: Color(0XFF847AC4)),
        ),
      ],
    );
@ -74,60 +76,22 @@ class LanguagePage extends StatelessWidget {
          mainAxisAlignment: MainAxisAlignment.center,
          children: List.generate(
            context.read<LanguageBloc>().languages.length,
-            (index) => BlocBuilder<LanguageBloc, LanguageState>(
-                buildWhen: (previous, current) =>
-                previous.selectedLang.code != current.selectedLang.code,
-                builder: (context, state) {
-                  final LanguageBloc languageBloc = context.read<LanguageBloc>();
-                  return ListTile(
-                    selected: state.selectedLang.code ==
-                        languageBloc.languages[index].code,
-                    onTap: () {
-                      languageBloc.add(
-                          ChangeLanguageEvent(languageBloc.languages[index]));
-                    },
-                    title: Text(context.read<LanguageBloc>().languages[index].title ?? ''),
-                    titleTextStyle: Marhey.medium16.copyWith(
-                      color: MyColors.white,
-                    ),
-                    contentPadding: EdgeInsets.symmetric(
-                      vertical: MySpaces.s12,
-                      horizontal: 30,
-                    ),
-                    minVerticalPadding: 0,
-                    minTileHeight: 0,
-                    minLeadingWidth: 0,
-                    horizontalTitleGap: MySpaces.s12,
-                    leading:  state.selectedLang.code ==
-                        languageBloc.languages[index].code ? Container(
-                      height: 17,
-                      width: 17,
-                      padding: EdgeInsets.all(3),
-                      decoration: BoxDecoration(
-                        shape: BoxShape.circle,
-                        border: Border.all(
-                          width: 1,
-                          color: Color(0XFF3CFF3C),
-                        ),
-                        gradient: LinearGradient(
-                          begin: Alignment.topCenter,
-                          end: Alignment.bottomCenter,
-                          colors: [
-                            Color(0XFF48D336),
-                            Color(0XFF2D7C23),
-                          ],
-                        ),
-                      ),
-                      child: MyImage(image: MyAssets.doneRounded),
-                    ) : SizedBox(height: 17, width: 17),
-                    shape: RoundedRectangleBorder(
-                      borderRadius: BorderRadius.all(Radius.circular(12)),
-                    ),
-                    selectedTileColor: MyColors.white.withValues(alpha: 0.2),
-                    selectedColor: MyColors.white,
-                  );
-                }
-            ),
+                (index) =>
+                BlocBuilder<LanguageBloc, LanguageState>(
+                    buildWhen: (previous, current) =>
+                    previous.selectedLang.code != current.selectedLang.code,
+                    builder: (context, state) {
+                      final LanguageBloc languageBloc = context.read<LanguageBloc>();
+                      return LanguageWidget(
+                        selected: state.selectedLang.code ==
+                            languageBloc.languages[index].code,
+                        onTap: () {
+                          languageBloc.add(ChangeLanguageEvent(languageBloc.languages[index]));
+                        },
+                        title: context.read<LanguageBloc>().languages[index].title,
+                      );
+                    }
+                ),
          ),
        ),
      ),
@ -135,7 +99,7 @@ class LanguagePage extends StatelessWidget {
  }

  Widget _btn(BuildContext context) {
-    return MyButton(
+    return MyBlueButton(
      onTap: () => context.read<LanguageBloc>().add(SaveLevelsEvent()),
      title: context.translate.select,
    );
--- a/lib/features/language/presentation/ui/widgets/language_widget.dart
+++ b/lib/features/language/presentation/ui/widgets/language_widget.dart
@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_colors.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_text_style.dart';
+import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart';
+
+class LanguageWidget extends StatelessWidget {
+  const LanguageWidget({super.key, this.selected, this.onTap, this.title});
+
+  final bool? selected;
+  final VoidCallback? onTap;
+  final String? title;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      selected: selected ?? false,
+      onTap: onTap,
+      title: Text(title ?? ''),
+      titleTextStyle: MYTextStyle.titr1,
+      contentPadding: EdgeInsets.symmetric(
+        vertical: MySpaces.s12,
+        horizontal: 30,
+      ),
+      minVerticalPadding: 0,
+      minTileHeight: 0,
+      minLeadingWidth: 0,
+      horizontalTitleGap: MySpaces.s12,
+      leading: selected ?? false
+          ? Container(
+              height: 17,
+              width: 17,
+              padding: EdgeInsets.all(3),
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                border: Border.all(width: 1, color: Color(0XFF3CFF3C)),
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [Color(0XFF48D336), Color(0XFF2D7C23)],
+                ),
+              ),
+              child: MyImage(image: MyAssets.doneRounded),
+            )
+          : SizedBox(height: 17, width: 17),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(12)),
+      ),
+      selectedTileColor: MyColors.white.withValues(alpha: 0.2),
+      selectedColor: MyColors.white,
+    );
+  }
+}