Вёрстка экрана настроек под форматы телефона и планшета

frontend/lib/common/shared_functions.dart

@@ -0,0 +1,8 @@
+import 'package:flutter/material.dart';
+
+sealed class SharedFunctions {
+  static bool isTablet(BuildContext context) {
+    final shortestSide = MediaQuery.of(context).size.shortestSide;
+    return shortestSide >= 640;
+  }
+}

frontend/lib/router/router.dart

@@ -69,7 +69,9 @@ final shellRoutes = [
     path: RouteLocations.settingsScreen,
     parentNavigatorKey: shellNavigatorKey,
     builder: (BuildContext context, GoRouterState state) {
-      return GameSettingsView(state.extra as GameModel);
+      return GameSettingsView(
+        gameModel: state.extra as GameModel,
+      );
     },
   ),
   GoRoute(

frontend/lib/views/components/pro_functions_tooltip.dart

@@ -21,7 +21,19 @@ class ProFunctionsTooltip extends StatefulWidget {
 }
 
 class _ProFunctionsTooltipState extends State<ProFunctionsTooltip> {
-  final _controller = SuperTooltipController();
+  late final SuperTooltipController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = SuperTooltipController();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -62,14 +74,13 @@ class _ProFunctionsTooltipState extends State<ProFunctionsTooltip> {
                   ),
                 ),
               ),
-              !widget.isPro
-                  ? UpgradeToProButton(
-                      onTap: () {
-                        _controller.hideTooltip();
-                        context.push(RouteLocations.promoScreen);
-                      },
-                    )
-                  : const SizedBox.shrink()
+              if (!widget.isPro)
+                UpgradeToProButton(
+                  onTap: () {
+                    _controller.hideTooltip();
+                    context.push(RouteLocations.promoScreen);
+                  },
+                )
             ],
           ),
         ),

frontend/lib/views/setting_view/components/app_bar_settings.dart

@@ -1,4 +1,5 @@
 import "package:flutter/material.dart";
+import "package:frontend/common/shared_functions.dart";
 import "package:go_router/go_router.dart";
 import "../../../exports.dart";
 
@@ -10,13 +11,14 @@ class AppBarSettings extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final scheme = Theme.of(context).colorScheme;
+    final isTablet = SharedFunctions.isTablet(context);
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
         CustomIconButton(
           iconName: "assets/images/icons/left_big_arrow_icon.svg",
           color: scheme.onTertiary,
-          iconSize: 40,
+          iconSize: isTablet ? 50 : 40,
           onTap: () {
             context.go(RouteLocations.homeScreen);
           },
@@ -25,12 +27,13 @@ class AppBarSettings extends StatelessWidget {
           label,
           style: TextStyles.body1.copyWith(
             color: scheme.primary,
+            fontSize: isTablet ? 30 : 20,
           ),
         ),
         ButtonToGuide(
           backGroundColor: scheme.outlineVariant,
-          height: 40,
-          width: 40,
+          height: isTablet ? 50 : 40,
+          width: isTablet ? 50 : 40,
           onTap: () {
             context.push(RouteLocations.guidebookScreen);
           },

frontend/lib/views/setting_view/components/chose_time_carousel.dart

@@ -47,6 +47,7 @@ class _ChoseTimeCarouselState extends State<ChoseTimeCarousel> {
             textAlign: TextAlign.center,
             style: TextStyles.header2.copyWith(
               color: scheme.primary,
+              fontSize: MediaQuery.of(context).size.width > 640 ? 24 : 16,
             ),
           ),
           Center(

frontend/lib/views/setting_view/components/settings_row.dart

@@ -1,9 +1,10 @@
 import "package:flutter/material.dart";
 import "package:flutter_svg/flutter_svg.dart";
+import "package:frontend/common/shared_functions.dart";
 import "package:frontend/exports.dart";
 import "package:provider/provider.dart";
 
-class SettingsRow extends StatelessWidget {
+class SettingsRow extends StatefulWidget {
   const SettingsRow({
     super.key,
     this.chose,
@@ -19,10 +20,16 @@ class SettingsRow extends StatelessWidget {
   final Widget? choseDiffWidget;
   final void Function(bool)? onChanged;
 
+  @override
+  State<SettingsRow> createState() => _SettingsRowState();
+}
+
+class _SettingsRowState extends State<SettingsRow> {
   @override
   Widget build(BuildContext context) {
     final scheme = Theme.of(context).colorScheme;
     final isPro = context.watch<ProVersionProvider>().isPro;
+    final isTablet = SharedFunctions.isTablet(context);
     return Padding(
       padding: const EdgeInsets.only(bottom: 8),
       child: SizedBox(
@@ -33,17 +40,16 @@ class SettingsRow extends StatelessWidget {
             Row(
               children: [
                 Text(
-                  text,
+                  widget.text,
                   style: TextStyles.body2.copyWith(
                     color: isPro ? scheme.primary : ColorsConst.disabledColor,
+                    fontSize: isTablet ? 25 : 16,
                   ),
                 ),
-                const SizedBox(
-                  width: 10,
-                ),
+                SizedBox(width: isTablet ? 16 : 10),
                 ProFunctionsTooltip(
                   isPro: isPro,
-                  modalHeader: modalHeader,
+                  modalHeader: widget.modalHeader,
                   child: SvgPicture.asset(
                     "assets/images/icons/question_icon.svg",
                     colorFilter: ColorFilter.mode(
@@ -57,17 +63,22 @@ class SettingsRow extends StatelessWidget {
             ),
             Theme(
               data: ThemeData(useMaterial3: false),
-              child: Switch(
-                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-                value: isPro ? chose! : false,
-                inactiveThumbColor:
-                    isPro ? scheme.surfaceTint : ColorsConst.disabledColor,
-                inactiveTrackColor: scheme.outline,
-                activeColor: scheme.inversePrimary,
-                activeTrackColor: ColorsConst.primaryColor100,
-                onChanged: onChanged,
+              child: ProFunctionsTooltip(
+                isPro: isPro,
+                modalHeader: widget.modalHeader,
+                child: Switch(
+                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                  value: isPro ? widget.chose! : false,
+                  inactiveThumbColor:
+                      isPro ? scheme.surfaceTint : ColorsConst.disabledColor,
+                  inactiveTrackColor: scheme.outline,
+                  activeColor: scheme.inversePrimary,
+                  activeTrackColor: ColorsConst.primaryColor100,
+                  onChanged:
+                      isPro ? (value) => widget.onChanged?.call(value) : null,
+                ),
               ),
-            )
+            ),
           ],
         ),
       ),

frontend/lib/views/setting_view/components/settings_rows_section.dart

@@ -1,23 +1,14 @@
 import 'package:flutter/material.dart';
+import 'package:frontend/common/shared_functions.dart';
 import 'package:frontend/exports.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:frontend/views/setting_view/providers/game_settings_provider.dart';
+import 'package:provider/provider.dart';
 
 class SettingsRowsSection extends StatelessWidget {
-  const SettingsRowsSection(
-      {super.key,
-      required this.choseMoveBack,
-      required this.moveBackOnChanged,
-      required this.choseThreats,
-      required this.threatsOnChanged,
-      required this.choseHints,
-      required this.hintsOnChanged});
-
-  final bool choseMoveBack;
-  final void Function(bool)? moveBackOnChanged;
-  final bool choseThreats;
-  final void Function(bool)? threatsOnChanged;
-  final bool choseHints;
-  final void Function(bool)? hintsOnChanged;
+  const SettingsRowsSection({
+    super.key,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -32,32 +23,34 @@ class SettingsRowsSection extends StatelessWidget {
               l10n.gameSettings,
               style: TextStyles.title3.copyWith(
                 color: Theme.of(context).colorScheme.primary,
+                fontSize: SharedFunctions.isTablet(context) ? 45 : null,
               ),
             ),
           ),
         ),
-        Column(
-          children: [
-            SettingsRow(
-              chose: choseMoveBack,
-              text: l10n.undoMoves,
-              modalHeader: l10n.undoMovesDescription,
-              onChanged: moveBackOnChanged,
-            ),
-            SettingsRow(
-              chose: choseThreats,
-              text: l10n.threats,
-              modalHeader: l10n.threatsDescription,
-              onChanged: threatsOnChanged,
-            ),
-            SettingsRow(
-              chose: choseHints,
-              text: l10n.hints,
-              modalHeader: l10n.hintsDescription,
-              onChanged: hintsOnChanged,
-            )
-          ],
-        ),
+        Consumer<GameSettingsProvider>(
+            builder: (_, provider, __) => Column(
+                  children: [
+                    SettingsRow(
+                      chose: provider.isMoveBack,
+                      text: l10n.undoMoves,
+                      modalHeader: l10n.undoMovesDescription,
+                      onChanged: provider.setIsMoveBack,
+                    ),
+                    SettingsRow(
+                      chose: provider.isThreats,
+                      text: l10n.threats,
+                      modalHeader: l10n.threatsDescription,
+                      onChanged: provider.setIsThreats,
+                    ),
+                    SettingsRow(
+                      chose: provider.isHints,
+                      text: l10n.hints,
+                      modalHeader: l10n.hintsDescription,
+                      onChanged: provider.setIsHints,
+                    )
+                  ],
+                )),
       ],
     );
   }

frontend/lib/views/setting_view/components/text_heading.dart

@@ -1,26 +1,32 @@
 import "package:flutter/material.dart";
+import "package:frontend/common/shared_functions.dart";
 import "package:frontend/exports.dart";
 
 class TextHeading extends StatelessWidget {
-  const TextHeading(
-      {super.key,
-      required this.text,
-      required this.topMargin,
-      required this.bottomMargin});
+  const TextHeading({
+    super.key,
+    required this.text,
+    required this.topMargin,
+    required this.bottomMargin,
+    this.style,
+  });
 
   final String text;
   final double topMargin;
   final double bottomMargin;
+  final TextStyle? style;
 
   @override
   Widget build(BuildContext context) {
-    final scheme = Theme.of(context).colorScheme;
     return Container(
       margin: EdgeInsets.only(top: topMargin, bottom: bottomMargin),
       child: Text(
         text,
         style: TextStyles.title3.copyWith(
-          color: scheme.primary,
+          color: Theme.of(context).colorScheme.primary,
+          fontSize: SharedFunctions.isTablet(context)
+              ? 45
+              : TextStyles.title3.fontSize,
         ),
       ),
     );