diff --git a/assets/svg/button_tablet.svg b/assets/svg/button_tablet.svg new file mode 100644 index 0000000..4a7184a --- /dev/null +++ b/assets/svg/button_tablet.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lib/common_ui/resources/my_assets.dart b/lib/common_ui/resources/my_assets.dart index 27dc537..842bcd7 100644 --- 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'; diff --git a/lib/core/widgets/button/my_blue_button.dart b/lib/core/widgets/button/my_blue_button.dart new file mode 100644 index 0000000..709a036 --- /dev/null +++ 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), + ), + ), + ), + ], + ), + ); + } +} diff --git a/lib/core/widgets/button/my_button.dart b/lib/core/widgets/button/my_button.dart index a399435..cadc2d7 100644 --- 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], ), ), diff --git a/lib/features/language/presentation/ui/language_page.dart b/lib/features/language/presentation/ui/language_page.dart index 957f1bc..345b972 100644 --- 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().languages.length, - (index) => BlocBuilder( - buildWhen: (previous, current) => - previous.selectedLang.code != current.selectedLang.code, - builder: (context, state) { - final LanguageBloc languageBloc = context.read(); - return ListTile( - selected: state.selectedLang.code == - languageBloc.languages[index].code, - onTap: () { - languageBloc.add( - ChangeLanguageEvent(languageBloc.languages[index])); - }, - title: Text(context.read().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( + buildWhen: (previous, current) => + previous.selectedLang.code != current.selectedLang.code, + builder: (context, state) { + final LanguageBloc languageBloc = context.read(); + return LanguageWidget( + selected: state.selectedLang.code == + languageBloc.languages[index].code, + onTap: () { + languageBloc.add(ChangeLanguageEvent(languageBloc.languages[index])); + }, + title: context.read().languages[index].title, + ); + } + ), ), ), ), @@ -135,7 +99,7 @@ class LanguagePage extends StatelessWidget { } Widget _btn(BuildContext context) { - return MyButton( + return MyBlueButton( onTap: () => context.read().add(SaveLevelsEvent()), title: context.translate.select, ); diff --git a/lib/features/language/presentation/ui/widgets/language_widget.dart b/lib/features/language/presentation/ui/widgets/language_widget.dart new file mode 100644 index 0000000..1725b68 --- /dev/null +++ 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, + ); + } +}