diff --git a/assets/images/close_btn.svg b/assets/images/close_btn.svg new file mode 100644 index 0000000..c854f7b --- /dev/null +++ b/assets/images/close_btn.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/dialog.svg b/assets/images/dialog.svg new file mode 100644 index 0000000..0b761e0 --- /dev/null +++ b/assets/images/dialog.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/facebook.svg b/assets/images/facebook.svg new file mode 100644 index 0000000..643a7b8 --- /dev/null +++ b/assets/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/instagram.svg b/assets/images/instagram.svg new file mode 100644 index 0000000..479e5c0 --- /dev/null +++ b/assets/images/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/whatsapp.svg b/assets/images/whatsapp.svg new file mode 100644 index 0000000..2ca91fd --- /dev/null +++ b/assets/images/whatsapp.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/youtube.svg b/assets/images/youtube.svg new file mode 100644 index 0000000..cbacbfd --- /dev/null +++ b/assets/images/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/common_ui/resources/my_assets.dart b/lib/common_ui/resources/my_assets.dart index 4efdc1f..1c8d553 100644 --- a/lib/common_ui/resources/my_assets.dart +++ b/lib/common_ui/resources/my_assets.dart @@ -4,9 +4,15 @@ class MyAssets { factory MyAssets() => _i; static const String backgroundIntro = 'assets/images/background_intro.png'; + static const String closeBtn = 'assets/images/close_btn.svg'; + static const String dialog = 'assets/images/dialog.svg'; static const String hadiHoda = 'assets/images/hadi_hoda.png'; static const String musicOff = 'assets/images/music_off.svg'; static const String musicOn = 'assets/images/music_on.svg'; static const String start = 'assets/images/start.svg'; static const String theme = 'assets/images/theme.svg'; + static const String facebook = 'assets/images/facebook.svg'; + static const String whatsapp = 'assets/images/whatsapp.svg'; + static const String youtube = 'assets/images/youtube.svg'; + static const String instagram = 'assets/images/instagram.svg'; } \ No newline at end of file diff --git a/lib/common_ui/resources/my_colors.dart b/lib/common_ui/resources/my_colors.dart index 10ff5ac..c021dc3 100644 --- a/lib/common_ui/resources/my_colors.dart +++ b/lib/common_ui/resources/my_colors.dart @@ -8,4 +8,5 @@ class MyColors { static const Color white = Colors.white; static const Color black = Colors.black; static const Color transparent = Colors.transparent; + static const Color purple = Color(0XFF0F0041); } diff --git a/lib/common_ui/theme/my_theme.dart b/lib/common_ui/theme/my_theme.dart index 43e6ba9..9df4d3e 100644 --- a/lib/common_ui/theme/my_theme.dart +++ b/lib/common_ui/theme/my_theme.dart @@ -2,7 +2,7 @@ import 'package:hadi_hoda_flutter/core/utils/context_provider.dart'; import 'package:flutter/material.dart'; import 'package:hadi_hoda_flutter/common_ui/resources/my_colors.dart'; -enum ColorsName { primaryColor, noColor } +enum ColorsName { primaryColor, noColor, backgroundDialog } class MyTheme { static const MyTheme _i = MyTheme._internal(); @@ -16,11 +16,13 @@ class MyTheme { static Map get lightColors => { ColorsName.noColor: MyColors.transparent, ColorsName.primaryColor: MyColors.white, + ColorsName.backgroundDialog: MyColors.purple, }; static Map get darkColors => { ColorsName.noColor: MyColors.transparent, ColorsName.primaryColor: MyColors.black, + ColorsName.backgroundDialog: MyColors.purple, }; } @@ -32,4 +34,5 @@ extension ThemeExtension on BuildContext { Color get primaryColor => customColors[ColorsName.primaryColor]!; Color get noColor => customColors[ColorsName.noColor]!; + Color get backgroundDialog => customColors[ColorsName.backgroundDialog]!; } diff --git a/lib/core/utils/my_image.dart b/lib/core/utils/my_image.dart index 9408284..586b81c 100644 --- a/lib/core/utils/my_image.dart +++ b/lib/core/utils/my_image.dart @@ -7,15 +7,13 @@ class MyImage extends StatelessWidget { super.key, required this.image, this.fit, - this.width, - this.height, + this.size, this.color, }); final String image; final BoxFit? fit; - final double? width; - final double? height; + final double? size; final Color? color; @override @@ -24,15 +22,15 @@ class MyImage extends StatelessWidget { return Image( image: AssetImage(image), fit: fit, - width: width, - height: height, + width: size, + height: size, ); } else { return SvgPicture.asset( image, fit: fit ?? BoxFit.contain, - width: width, - height: height, + width: size, + height: size, colorFilter: color != null ? ColorFilter.mode(color ?? context.primaryColor, BlendMode.srcIn) : null, diff --git a/lib/core/widgets/about_us_dialog.dart b/lib/core/widgets/about_us_dialog.dart new file mode 100644 index 0000000..ebdb6dc --- /dev/null +++ b/lib/core/widgets/about_us_dialog.dart @@ -0,0 +1,102 @@ +import 'dart:ui'; + +import 'package:flutter/material.dart'; +import 'package:google_fonts/google_fonts.dart'; +import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart'; +import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart'; +import 'package:hadi_hoda_flutter/common_ui/theme/my_theme.dart'; +import 'package:hadi_hoda_flutter/core/utils/gap.dart'; +import 'package:hadi_hoda_flutter/core/utils/my_image.dart'; +import 'package:hadi_hoda_flutter/core/utils/my_localization.dart'; +import 'package:hadi_hoda_flutter/core/utils/screen_size.dart'; + +Future showAboutUsDialog({required BuildContext context}) async { + await showDialog( + context: context, + builder: (context) => AboutUsDialog(), + barrierColor: context.backgroundDialog.withValues(alpha: 0.82), + useSafeArea: false, + ); +} + +class AboutUsDialog extends StatelessWidget { + const AboutUsDialog({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: context.noColor, + body: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6), + child: Center( + child: SizedBox( + height: context.widthScreen, + width: context.widthScreen - 20, + child: Stack( + alignment: AlignmentDirectional.center, + clipBehavior: Clip.none, + children: [ + MyImage(image: MyAssets.dialog), + Positioned( + top: 10, + right: 30, + child: GestureDetector( + onTap: () { + Navigator.pop(context); + }, + child: MyImage(image: MyAssets.closeBtn, size: 40), + ), + ), + Padding( + padding: EdgeInsets.only( + top: 50, + left: 35, + right: 35, + bottom: 60, + ), + child: Column( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Text( + context.translate.about_us, + style: GoogleFonts.marhey( + color: Color(0XFF322386), + fontSize: 22, + fontWeight: FontWeight.w600, + ), + ), + MySpaces.s14.gapHeight, + Expanded( + child: SingleChildScrollView( + child: Text( + context.translate.about_us_desc, + style: GoogleFonts.marhey( + color: Color(0XFF322386), + fontSize: 15, + fontWeight: FontWeight.w500, + ), + ), + ), + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + spacing: 20, + children: [ + MyImage(image: MyAssets.facebook, size: 40), + MyImage(image: MyAssets.instagram, size: 40), + MyImage(image: MyAssets.whatsapp, size: 40), + MyImage(image: MyAssets.youtube, size: 40), + ], + ), + ], + ), + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/lib/features/intro/presentation/ui/intro_page.dart b/lib/features/intro/presentation/ui/intro_page.dart index 1e1a78f..d2b6954 100644 --- a/lib/features/intro/presentation/ui/intro_page.dart +++ b/lib/features/intro/presentation/ui/intro_page.dart @@ -3,6 +3,7 @@ import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart'; import 'package:hadi_hoda_flutter/common_ui/theme/my_theme.dart'; import 'package:hadi_hoda_flutter/core/utils/my_image.dart'; import 'package:hadi_hoda_flutter/core/utils/screen_size.dart'; +import 'package:hadi_hoda_flutter/core/widgets/about_us_dialog.dart'; class IntroPage extends StatelessWidget { const IntroPage({super.key}); @@ -26,7 +27,7 @@ class IntroPage extends StatelessWidget { alignment: Alignment.center, children: [ _name(), - _bottomBtns(), + _bottomBtns(context), ], ), ), @@ -39,14 +40,13 @@ class IntroPage extends StatelessWidget { top: 130, child: MyImage( image: MyAssets.hadiHoda, - width: 220, - height: 220, + size: 220, fit: BoxFit.cover, ), ); } - Positioned _bottomBtns() { + Positioned _bottomBtns(BuildContext context) { return Positioned( bottom: 20, left: 20, @@ -55,9 +55,13 @@ class IntroPage extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - MyImage(image: MyAssets.musicOn, height: 60, width: 60), - MyImage(image: MyAssets.start, height: 80, width: 80), - MyImage(image: MyAssets.theme, height: 60, width: 60), + MyImage(image: MyAssets.musicOn, size: 60), + InkWell(child: MyImage(image: MyAssets.start, size: 80), + onTap: () { + showAboutUsDialog(context: context); + }, + ), + MyImage(image: MyAssets.theme, size: 60), ], ), ); diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb index a4e20ac..9e22152 100644 --- a/lib/l10n/app_en.arb +++ b/lib/l10n/app_en.arb @@ -1,3 +1,4 @@ { - "helloWorld": "Hello World" + "about_us": "About us", + "about_us_desc" : "Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build award-winning interactive experiences across apps, games, websites, products, and vehicles." } \ No newline at end of file diff --git a/lib/l10n/app_localizations.dart b/lib/l10n/app_localizations.dart index 38ec2aa..76fe3e1 100644 --- a/lib/l10n/app_localizations.dart +++ b/lib/l10n/app_localizations.dart @@ -94,11 +94,17 @@ abstract class AppLocalizations { /// A list of this localizations delegate's supported locales. static const List supportedLocales = [Locale('en')]; - /// No description provided for @helloWorld. + /// No description provided for @about_us. /// /// In en, this message translates to: - /// **'Hello World'** - String get helloWorld; + /// **'About us'** + String get about_us; + + /// No description provided for @about_us_desc. + /// + /// In en, this message translates to: + /// **'Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build award-winning interactive experiences across apps, games, websites, products, and vehicles.'** + String get about_us_desc; } class _AppLocalizationsDelegate diff --git a/lib/l10n/app_localizations_en.dart b/lib/l10n/app_localizations_en.dart index 7d35d65..eee0965 100644 --- a/lib/l10n/app_localizations_en.dart +++ b/lib/l10n/app_localizations_en.dart @@ -9,5 +9,9 @@ class AppLocalizationsEn extends AppLocalizations { AppLocalizationsEn([String locale = 'en']) : super(locale); @override - String get helloWorld => 'Hello World'; + String get about_us => 'About us'; + + @override + String get about_us_desc => + 'Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build award-winning interactive experiences across apps, games, websites, products, and vehicles.'; } diff --git a/pubspec.lock b/pubspec.lock index a53a89a..51806b4 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -57,6 +57,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.19.1" + crypto: + dependency: transitive + description: + name: crypto + sha256: "1e445881f28f22d6140f181e07737b22f1e099a5e1ff94b0af2f9e4a463f4855" + url: "https://pub.dev" + source: hosted + version: "3.0.6" dio: dependency: "direct main" description: @@ -165,6 +173,14 @@ packages: url: "https://pub.dev" source: hosted version: "16.2.4" + google_fonts: + dependency: "direct main" + description: + name: google_fonts + sha256: "517b20870220c48752eafa0ba1a797a092fb22df0d89535fd9991e86ee2cdd9c" + url: "https://pub.dev" + source: hosted + version: "6.3.2" http: dependency: transitive description: @@ -285,6 +301,30 @@ packages: url: "https://pub.dev" source: hosted version: "1.1.0" + path_provider: + dependency: transitive + description: + name: path_provider + sha256: "50c5dd5b6e1aaf6fb3a78b33f6aa3afca52bf903a8a5298f53101fdaee55bbcd" + url: "https://pub.dev" + source: hosted + version: "2.1.5" + path_provider_android: + dependency: transitive + description: + name: path_provider_android + sha256: "993381400e94d18469750e5b9dcb8206f15bc09f9da86b9e44a9b0092a0066db" + url: "https://pub.dev" + source: hosted + version: "2.2.18" + path_provider_foundation: + dependency: transitive + description: + name: path_provider_foundation + sha256: "16eef174aacb07e09c351502740fa6254c165757638eba1e9116b0a781201bbd" + url: "https://pub.dev" + source: hosted + version: "2.4.2" path_provider_linux: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index b38de34..dd2a1d6 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -18,6 +18,7 @@ dependencies: flutter_svg: ^2.2.1 get_it: ^8.2.0 go_router: ^16.1.0 + google_fonts: ^6.3.2 intl: ^0.20.2 pretty_dio_logger: ^1.4.0 shared_preferences: ^2.5.3