diff --git a/assets/images/onboarding1.svg b/assets/images/onboarding1.svg new file mode 100644 index 0000000..fbd4103 --- /dev/null +++ b/assets/images/onboarding1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/onboarding2.svg b/assets/images/onboarding2.svg new file mode 100644 index 0000000..be87757 --- /dev/null +++ b/assets/images/onboarding2.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/onboarding3.svg b/assets/images/onboarding3.svg new file mode 100644 index 0000000..35912fe --- /dev/null +++ b/assets/images/onboarding3.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/onboarding4.svg b/assets/images/onboarding4.svg new file mode 100644 index 0000000..093b954 --- /dev/null +++ b/assets/images/onboarding4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/onboarding5.svg b/assets/images/onboarding5.svg new file mode 100644 index 0000000..c34c2ff --- /dev/null +++ b/assets/images/onboarding5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lib/presentation/pages/onboarding/onboarding_controller.dart b/lib/presentation/pages/onboarding/onboarding_controller.dart index 271b70c..994ac58 100644 --- a/lib/presentation/pages/onboarding/onboarding_controller.dart +++ b/lib/presentation/pages/onboarding/onboarding_controller.dart @@ -1,4 +1,5 @@ import 'package:get/get.dart'; +import 'package:manzon/presentation/utils/constants/assets_manager.dart'; class OnboardingController extends GetxController { var currentPage = 0.obs; @@ -7,17 +8,17 @@ class OnboardingController extends GetxController { { "title": "Notifications Automatiques", "description": "Recevez des notifications instantanées pour les contributions, les prêts et les événements importants.", - "image": "https://via.placeholder.com/390x616" + "image": ImageAssets.onboarding1 }, { "title": "Suivi et Transparence", "description": "Suivez les contributions et les prêts en temps réel avec une transparence totale.", - "image": "https://via.placeholder.com/390x616" + "image": ImageAssets.onboarding2 }, { "title": "Gestion des Prêts", "description": "Aidez votre tontine à gérer efficacement les prêts et les remboursements.", - "image": "https://via.placeholder.com/390x616" + "image": ImageAssets.onboarding3 } ]; @@ -32,4 +33,11 @@ class OnboardingController extends GetxController { currentPage--; } } + + @override + void onInit() { + super.onInit(); + // Print the image path to debug + // ever(currentPage, (_) => print(onboardingPages[currentPage.value]["image"])); + } } diff --git a/lib/presentation/pages/onboarding/onboarding_view.dart b/lib/presentation/pages/onboarding/onboarding_view.dart index 8a4ddf7..0dafe6f 100644 --- a/lib/presentation/pages/onboarding/onboarding_view.dart +++ b/lib/presentation/pages/onboarding/onboarding_view.dart @@ -1,15 +1,19 @@ import 'package:get/get.dart'; +import 'package:flutter_svg/svg.dart'; import 'package:flutter/material.dart'; import 'package:manzon/presentation/utils/screen_util.dart'; +import 'package:manzon/presentation/utils/theme/app_theme.dart'; +import 'package:manzon/presentation/utils/theme/app_colors.dart'; +import 'package:manzon/presentation/utils/theme/font_manager.dart'; +import 'package:manzon/presentation/utils/theme/style_manager.dart'; import 'package:manzon/presentation/pages/onboarding/onboarding_controller.dart'; class OnboardingView extends StatelessWidget { @override Widget build(BuildContext context) { final OnboardingController controller = Get.put(OnboardingController()); -final double horizontalPadding = ScreenSize.screenWidth * 0.04; + final double horizontalPadding = ScreenSize.screenWidth * 0.04; final double verticalPadding = ScreenSize.screenHeight * 0.02; - return Scaffold( body: Obx(() { @@ -17,167 +21,164 @@ final double horizontalPadding = ScreenSize.screenWidth * 0.04; fit: StackFit.expand, children: [ Positioned( - left: 0, top: 0, - child: Container( + child: SizedBox( width: ScreenSize.screenWidth, - height: ScreenSize.blockSizeVertical * 50, - decoration: BoxDecoration( - image: DecorationImage( - image: NetworkImage(controller.onboardingPages[controller.currentPage.value]["image"]!), - fit: BoxFit.cover, - ), + height: ScreenSize.blockSizeVertical * 60, + child: SvgPicture.asset( + height: ScreenSize.blockSizeVertical * 50, + width: ScreenSize.screenWidth, + controller.onboardingPages[controller.currentPage.value] + ["image"]!, + fit: BoxFit.cover, ), ), ), - Positioned( + Positioned.fill( left: 0, - top: ScreenSize.blockSizeVertical * 45, - child: Container( - height: ScreenSize.blockSizeVertical * 45, - padding: EdgeInsets.only(top: verticalPadding * 4, bottom: verticalPadding), - decoration: BoxDecoration( - gradient: LinearGradient( - begin: Alignment(0.00, -1.00), - end: Alignment(0, 1), - colors: [Colors.white.withOpacity(0), Color(0xFFFBFBFD)], + top: ScreenSize.blockSizeVertical * 60, + child: Center( + child: Container( + height: ScreenSize.blockSizeVertical * 40, + padding: EdgeInsets.only( + top: verticalPadding * 4, bottom: verticalPadding), + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment(0.00, -1.00), + end: Alignment(0, 1), + colors: [Colors.white.withOpacity(0), Color(0xFFFBFBFD)], + ), ), - ), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Container( - width: ScreenSize.blockSizeHorizontal * 100, - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Container( - padding: EdgeInsets.symmetric(horizontal: horizontalPadding), - child: Column( + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + padding: + EdgeInsets.symmetric(horizontal: horizontalPadding), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + + // indicator + Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( - width: double.infinity, - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - - SizedBox(height: verticalPadding), - Container( - width: double.infinity, - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox( - width: double.infinity, - child: Text( - controller.onboardingPages[controller.currentPage.value]["title"]!, - style: TextStyle( - color: Color(0xFF2E2E2E), - fontSize: ScreenSize.screenWidth * 0.077, - fontFamily: 'Rubik', - fontWeight: FontWeight.w700, - height: 1.2, - letterSpacing: -0.6, - ), - ), - ), - SizedBox(height: verticalPadding), - SizedBox( - width: double.infinity, - child: Text( - controller.onboardingPages[controller.currentPage.value]["description"]!, - style: TextStyle( - color: Color(0xFF606060), - fontSize: ScreenSize.screenWidth * 0.041, - fontFamily: 'Rubik', - fontWeight: FontWeight.w500, - height: 1.5, - ), - ), - ), - ], - ), - ), - ], + width: 28, + height: 4, + decoration: ShapeDecoration( + color: Color(0xFFC38029), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(100), + ), + ), + ), + const SizedBox(width: 4), + Container( + width: 28, + height: 4, + decoration: ShapeDecoration( + color: Color(0xFFEBEBEB), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(100), + ), + ), + ), + const SizedBox(width: 4), + Container( + width: 28, + height: 4, + decoration: ShapeDecoration( + color: Color(0xFFEBEBEB), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(100), + ), ), ), ], ), - ), - SizedBox(height: verticalPadding), - Container( - width: ScreenSize.screenWidth, - padding: EdgeInsets.symmetric(horizontal: horizontalPadding), - child: Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - GestureDetector( - onTap: () => controller.previousPage(), + SizedBox( + width: double.infinity, + child: Text( + controller.onboardingPages[ + controller.currentPage.value]["title"]!, + style: + getBoldStyle(color: AppColors.blackNormal), + ), + ), + SizedBox(height: verticalPadding), + SizedBox( + width: double.infinity, + child: Text( + controller.onboardingPages[controller + .currentPage.value]["description"]!, + style: getSemiBoldStyle( + fontSize: FontSize.s16, + color: AppColors.fontLightSecondary), + ), + ), + ], + ), + ), + SizedBox(height: verticalPadding), + Center( + child: Container( + width: ScreenSize.screenWidth, + height: ScreenSize.blockSizeVertical * 10, + padding: EdgeInsets.symmetric( + horizontal: horizontalPadding), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GestureDetector( + onTap: () => controller.previousPage(), + child: Center( child: Container( - width: ScreenSize.screenWidth * 0.12, - height: ScreenSize.blockSizeVertical * 0.06, - padding: EdgeInsets.symmetric(horizontal: horizontalPadding, vertical: verticalPadding), + padding: EdgeInsets.all(16), decoration: ShapeDecoration( shape: RoundedRectangleBorder( - side: BorderSide(width: 1.5, color: Color(0xFFC27F33)), - borderRadius: BorderRadius.circular(100), + side: BorderSide( + width: 1.5, + color: Color(0xFFC27F33)), + borderRadius: + BorderRadius.circular(100), ), ), - child: Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Transform( - transform: Matrix4.identity()..translate(0.0, 0.0)..rotateZ(3.14), - child: Icon(Icons.arrow_forward, color: Color(0xFFC27F33)), - ), - ], - ), + child: Icon(Icons.arrow_back, + color: Color(0xFFC27F33)), ), ), - GestureDetector( - onTap: () => controller.nextPage(), + ), + Spacer(), + GestureDetector( + onTap: () => controller.nextPage(), + child: Center( child: Container( - width: ScreenSize.screenWidth * 0.12, - height: ScreenSize.blockSizeVertical * 0.06, - padding: EdgeInsets.symmetric(horizontal: horizontalPadding, vertical: verticalPadding), + padding: EdgeInsets.all(16), decoration: ShapeDecoration( color: Color(0xFFC38029), shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(100), + borderRadius: + BorderRadius.circular(100), ), ), - child: Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Icon(Icons.arrow_forward, color: Colors.white), - ], - ), + child: Icon(Icons.arrow_forward, + color: Colors.white), ), ), - ], - ), + ) + ], ), - ], - ), - ), - ], + ), + ) + ], + ), ), ), ), diff --git a/lib/presentation/utils/constants/assets_manager.dart b/lib/presentation/utils/constants/assets_manager.dart index acc89c9..9110fb1 100644 --- a/lib/presentation/utils/constants/assets_manager.dart +++ b/lib/presentation/utils/constants/assets_manager.dart @@ -2,7 +2,11 @@ const String IMAGE_PATH = "assets/images"; const String LOGO_PATH = "assets/logos"; class ImageAssets { - // static const String appLogo = "$LOGO_PATH/logo.svg"; + static const String onboarding1 = "$IMAGE_PATH/onboarding1.svg"; + static const String onboarding2 = "$IMAGE_PATH/onboarding2.svg"; + static const String onboarding3 = "$IMAGE_PATH/onboarding3.svg"; + static const String onboarding4 = "$IMAGE_PATH/onboarding4.svg"; + static const String onboarding5 = "$IMAGE_PATH/onboarding5.svg"; } class LogoAssets { diff --git a/lib/presentation/utils/theme/font_manager.dart b/lib/presentation/utils/theme/font_manager.dart index 2d0ce92..5e14887 100644 --- a/lib/presentation/utils/theme/font_manager.dart +++ b/lib/presentation/utils/theme/font_manager.dart @@ -23,6 +23,7 @@ class FontSize { static const double s20 = 20.0; static const double s24 = 24.0; static const double s28 = 28.0; + static const double s30 = 30.0; static const double s32 = 32.0; static const double s36 = 36.0; } diff --git a/lib/presentation/utils/theme/style_manager.dart b/lib/presentation/utils/theme/style_manager.dart index 8514b07..6cef63a 100644 --- a/lib/presentation/utils/theme/style_manager.dart +++ b/lib/presentation/utils/theme/style_manager.dart @@ -24,7 +24,7 @@ TextStyle getLightStyle( } TextStyle getBoldStyle( - {double fontSize = FontSize.s12, required Color color}) { + {double fontSize = FontSize.s30, required Color color}) { return _getTextStyle( fontSize, FontConstants.fontFamily, FontWeightManager.bold, color); } diff --git a/pubspec.yaml b/pubspec.yaml index 327f303..77a1a2a 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -65,6 +65,10 @@ flutter: - lib/presentation/utils/lang/en.json - lib/presentation/utils/lang/fr.json - assets/logos/logo.svg + - assets/images/onboarding1.svg + - assets/images/onboarding2.svg + - assets/images/onboarding3.svg + - assets/images/onboarding4.svg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware