Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
EkaterinaMarkina-1 wants to merge 2 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
517e3ca
fix: определено разбиение виджетов для разной ширины экранов
EkaterinaMarkina-1 May 10, 2025
f1c0aa9
fix: настройка размеров текса и кнопок; разбиение настройки размеров …
EkaterinaMarkina-1 May 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions frontend/lib/views/setting_view/components/app_bar_settings.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,23 @@ class AppBarSettings extends StatelessWidget {

final String label;

bool _isTablet(BuildContext context) {
final shortestSide = MediaQuery.of(context).size.shortestSide;
return shortestSide > 640;
}

@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
final isTablet = _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);
},
Expand All @@ -25,12 +32,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);
},
Expand Down
1 change: 1 addition & 0 deletions frontend/lib/views/setting_view/components/chose_time_carousel.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
12 changes: 10 additions & 2 deletions frontend/lib/views/setting_view/components/settings_row.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,25 @@ class SettingsRow extends StatelessWidget {
required this.modalHeader,
this.choseDiffWidget,
this.onChanged,
this.forceTabletLayout,
});

final bool? chose;
final String text;
final String modalHeader;
final Widget? choseDiffWidget;
final void Function(bool)? onChanged;
final bool? forceTabletLayout;

bool _isTablet(BuildContext context) {
return forceTabletLayout ?? MediaQuery.of(context).size.width >= 640;
}

@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
final isPro = context.watch<ProVersionProvider>().isPro;
final isTablet = _isTablet(context);
return Padding(
padding: const EdgeInsets.only(bottom: 8),
child: SizedBox(
Expand All @@ -36,10 +43,11 @@ class SettingsRow extends StatelessWidget {
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,
Expand Down
7 changes: 7 additions & 0 deletions frontend/lib/views/setting_view/components/settings_rows_section.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,14 @@ class SettingsRowsSection extends StatelessWidget {
final bool choseHints;
final void Function(bool)? hintsOnChanged;

bool _isTablet(BuildContext context) {
final shortestSide = MediaQuery.of(context).size.shortestSide;
return shortestSide >= 640;
}

@override
Widget build(BuildContext context) {
final isTablet = _isTablet(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expand All @@ -30,6 +36,7 @@ class SettingsRowsSection extends StatelessWidget {
GameSettingConsts.gameSettingsHeader,
style: TextStyles.title3.copyWith(
color: Theme.of(context).colorScheme.primary,
fontSize: isTablet ? 45 : null,
),
),
),
Expand Down
12 changes: 11 additions & 1 deletion frontend/lib/views/setting_view/components/text_heading.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,31 @@ class TextHeading extends StatelessWidget {
{super.key,
required this.text,
required this.topMargin,
required this.bottomMargin});
required this.bottomMargin,
this.style,
});

final String text;
final double topMargin;
final double bottomMargin;
final TextStyle? style;

bool _isTablet(BuildContext context) {
final shortestSide = MediaQuery.of(context).size.shortestSide;
return shortestSide >= 640;
}

@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
final isTablet = _isTablet(context);
return Container(
margin: EdgeInsets.only(top: topMargin, bottom: bottomMargin),
child: Text(
text,
style: TextStyles.title3.copyWith(
color: scheme.primary,
fontSize: isTablet ? 45 : TextStyles.title3.fontSize,
),
),
);
Expand Down
122 changes: 122 additions & 0 deletions frontend/lib/views/setting_view/game_settings_mobile.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
part of 'game_settings_view.dart';

class GameSettingsMobile extends StatelessWidget {
final GameModel gameModel;
final bool withoutTime;
final int durationOfGame;
final int addingOfMove;
final bool isMoveBack;
final bool isThreats;
final bool isHints;
final void Function(int) setIsTime;
final void Function(int) setMinutes;
final void Function(int) setSeconds;
final void Function(bool) setIsMoveBack;
final void Function(bool) setIsThreats;
final void Function(bool) setIsHints;
final VoidCallback onStartGame;

const GameSettingsMobile({
super.key,
required this.gameModel,
required this.withoutTime,
required this.durationOfGame,
required this.addingOfMove,
required this.isMoveBack,
required this.isThreats,
required this.isHints,
required this.setIsTime,
required this.setMinutes,
required this.setSeconds,
required this.setIsMoveBack,
required this.setIsThreats,
required this.setIsHints,
required this.onStartGame,
});

@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
return DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: scheme.background,
body: SafeArea(
child: Stack(
children: [
SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: MediaQuery.of(context).size.height,
),
child: IntrinsicHeight(
child: Padding(
padding: const EdgeInsets.only(left: 24, right: 24, top: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AppBarSettings(label: GameSettingConsts.appBarLabel),
CustomTabBar(
initialIndex: withoutTime ? 0 : 1,
header: GameSettingConsts.timeText,
subTitles: [
GameSettingConsts.gameWithoutTimeText,
GameSettingConsts.gameWithTimeText,
],
isSettingsPage: true,
onTap: (dynamic index) => setIsTime(index as int),
),
if (!withoutTime) ...[
SetTimeSection(
minutesStartValue: durationOfGame,
minutesOnChanged: (dynamic value) => setMinutes(value as int),
secondsStartValue: addingOfMove == 0
? GameSettingConsts.longDashSymbol
: addingOfMove,
secondsOnChanged: (dynamic value) => setSeconds(value as int),
)
],
SettingsRowsSection(
choseMoveBack: isMoveBack,
moveBackOnChanged: setIsMoveBack,
choseThreats: isThreats,
threatsOnChanged: setIsThreats,
choseHints: isHints,
hintsOnChanged: setIsHints,
),
const SizedBox(height: 100),
],
),
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
color: scheme.background,
child: Padding(
padding: const EdgeInsets.only(
top: 15,
bottom: 23,
left: 23,
right: 23,
),
child: NextPageButton(
text: GameSettingConsts.startGameText,
textColor: ColorsConst.primaryColor0,
buttonColor: scheme.secondaryContainer,
isClickable: true,
onTap: onStartGame,
),
),
),
),
],
),
),
),
);
}
}
121 changes: 121 additions & 0 deletions frontend/lib/views/setting_view/game_settings_tablet.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
part of 'game_settings_view.dart';

class GameSettingsTablet extends StatelessWidget {
final GameModel gameModel;
final bool withoutTime;
final int durationOfGame;
final int addingOfMove;
final bool isMoveBack;
final bool isThreats;
final bool isHints;
final void Function(int) setIsTime;
final void Function(int) setMinutes;
final void Function(int) setSeconds;
final void Function(bool) setIsMoveBack;
final void Function(bool) setIsThreats;
final void Function(bool) setIsHints;
final VoidCallback onStartGame;

const GameSettingsTablet({
super.key,
required this.gameModel,
required this.withoutTime,
required this.durationOfGame,
required this.addingOfMove,
required this.isMoveBack,
required this.isThreats,
required this.isHints,
required this.setIsTime,
required this.setMinutes,
required this.setSeconds,
required this.setIsMoveBack,
required this.setIsThreats,
required this.setIsHints,
required this.onStartGame,
});

@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
return DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: scheme.background,
body: SafeArea(
child: Stack(
children: [
SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height,
),
child: Padding(
padding: const EdgeInsets.only(left: 24, right: 24, top: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AppBarSettings(label: GameSettingConsts.appBarLabel),
CustomTabBar(
initialIndex: withoutTime ? 0 : 1,
header: GameSettingConsts.timeText,
subTitles: [
GameSettingConsts.gameWithoutTimeText,
GameSettingConsts.gameWithTimeText,
],
isSettingsPage: true,
onTap: (dynamic index) => setIsTime(index as int),
),
if (!withoutTime) ...[
const SizedBox(height: 70),
SetTimeSection(
minutesStartValue: durationOfGame,
minutesOnChanged: (dynamic value) => setMinutes(value as int),
secondsStartValue: addingOfMove == 0
? GameSettingConsts.longDashSymbol
: addingOfMove,
secondsOnChanged: (dynamic value) => setSeconds(value as int),
)
],
const SizedBox(height: 120),
SettingsRowsSection(
choseMoveBack: isMoveBack,
moveBackOnChanged: setIsMoveBack,
choseThreats: isThreats,
threatsOnChanged: setIsThreats,
choseHints: isHints,
hintsOnChanged: setIsHints,
),
const SizedBox(height: 100),
],
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
color: scheme.background,
child: Padding(
padding: const EdgeInsets.only(
top: 15,
bottom: 23,
left: 23,
right: 23,
),
child: NextPageButton(
text: GameSettingConsts.startGameText,
textColor: ColorsConst.primaryColor0,
buttonColor: scheme.secondaryContainer,
isClickable: true,
onTap: onStartGame,
),
),
),
),
],
),
),
),
);
}
}
Loading