From 969a2160a960aeb345806adeebfb38038b6b80c8 Mon Sep 17 00:00:00 2001 From: Kalonkarthik Date: Wed, 5 Feb 2025 12:23:16 +0530 Subject: [PATCH] home screen app_tour change --- .../tab_routes/home_route.dart | 520 +++++++++--------- 1 file changed, 273 insertions(+), 247 deletions(-) diff --git a/lib/presentation/routes/bottom_bar_routes/tab_routes/home_route.dart b/lib/presentation/routes/bottom_bar_routes/tab_routes/home_route.dart index d05843ae..d8674d83 100644 --- a/lib/presentation/routes/bottom_bar_routes/tab_routes/home_route.dart +++ b/lib/presentation/routes/bottom_bar_routes/tab_routes/home_route.dart @@ -215,22 +215,7 @@ final _pb = PocketBase('https://pb.venbait.in'); late TutorialCoachMark tutorialCoachMark; late List homeTargets; late List previousHomeTargets; - Offset _imageCardPosition =Offset.zero; - Offset _imageTopicPosition =Offset.zero; - void _calculateCardPosition() { - final RenderBox cardRenderBox = cardsKey.currentContext!.findRenderObject() as RenderBox; - final Offset cardPosition = cardRenderBox.localToGlobal(Offset.zero); - final Size cardSize = cardRenderBox.size; - - // Calculate the position for the image - final double imageX = cardPosition.dx + cardSize.width / 2; - final double imageY = cardPosition.dy + cardSize.height; - - setState(() { - _imageCardPosition = Offset(imageX, imageY); - }); - } void handleSkip() { tutorialCoachMark.skip(); @@ -246,6 +231,7 @@ final _pb = PocketBase('https://pb.venbait.in'); //Method waits app tour to render Targets void _starTourRender() { if (cardTopicKey.currentContext != null) { + print('render finished'); _showHomeTour(); } else { Future.delayed(Duration(milliseconds: 100), _starTourRender); @@ -261,7 +247,6 @@ final _pb = PocketBase('https://pb.venbait.in'); if (!homeTour) { // Show Home Tour _initTarget(); - _calculateCardPosition(); tutorialCoachMark = TutorialCoachMark( paddingFocus: 0, useSafeArea: true, @@ -272,7 +257,7 @@ final _pb = PocketBase('https://pb.venbait.in'); ref.read(homeTourProvider.notifier).state = true; ref.read(chartsTourProvider.notifier).state = false; debugPrint('Home Tutorial Finished'); - context.push('/marriages'); + context.go('/chartScreen/hotels?bgColor=0xFF90B0D5&mainTopic=ECONOMY&title=Hotel+Establishments'); }, )..show(context: context); } else if (!previousHomeTour) { @@ -286,7 +271,7 @@ final _pb = PocketBase('https://pb.venbait.in'); onFinish: () { ref.read(previousHomeTourProvider.notifier).state = true; debugPrint('Previous Home Tutorial Finished'); - context.push('/marriages'); + context.go('/chartScreen/hotels?bgColor=0xFF90B0D5&mainTopic=ECONOMY&title=Hotel+Establishments'); }, )..show(context: context); } @@ -294,108 +279,113 @@ final _pb = PocketBase('https://pb.venbait.in'); } void _initTarget(){ + final double screenWidth = MediaQuery.of(context).size.width; homeTargets=[ TargetFocus( identify: 'cardTopicKey', keyTarget: cardTopicKey, shape: ShapeLightFocus.RRect, + radius: 8, + paddingFocus: 16, contents: [ createTargetContent( text: AppLocalizations.of(context)!.home_topic, alignment: ContentAlign.bottom, - gap: 45, - space: 40, + gap: 0, + space: 43, ), TargetContent( align: ContentAlign.bottom, child: SizedBox( width: double.infinity, - height: MediaQuery.of(context).size.height*0.69, + height: MediaQuery.of(context).size.height*0.70, child: Stack( children: [ Positioned( - bottom: 35, - left: 16, - right: 16, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - ElevatedButton( - onPressed: () => handleSkip(), - style: ElevatedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(12), - ), - side: const BorderSide(color: Colors.white), - backgroundColor: Colors.transparent, - elevation: 0, - ), - child: const Text( - 'Skip', - style: TextStyle( - color: Colors.white, - fontSize: 14, - ), - ), - ), - Column( - children: [ - Text( - '1/7', - style: const TextStyle( - color: Colors.white, - fontSize: 14, + bottom: 20, + left: 16, + right: 16, + child: Column( + children: [ + Align( + alignment: Alignment.bottomRight, + child: Padding( + padding: const EdgeInsets.only(right: 10), // Adjust the value as needed + child: Text( + '1/7', + style: const TextStyle( + color: Colors.white, + fontSize: 14, + ), ), ), - const SizedBox(height: 3), - Row( - children: [ - const SizedBox(width: 10), - Container( - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Color(0xFF7DAFBC), - border: Border.all(color: Color(0xFF7DAFBC), width: 1), + ), + SizedBox(height: 5,), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + ElevatedButton( + onPressed: () => handleSkip(), + style: ElevatedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12), ), - child: IconButton( - padding: EdgeInsets.zero, - iconSize: 20, - icon: const Icon(Icons.arrow_forward, color: Colors.white), - onPressed: () { - tutorialCoachMark.next(); - }, + side: const BorderSide(color: Colors.white), + backgroundColor: Colors.transparent, + elevation: 0, + ), + child: const Text( + 'Skip', + style: TextStyle( + color: Colors.white, + fontSize: 14, ), ), - ], - ), - ], - ), - ], - ), + ), + Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + const SizedBox(width: 10), + Container( + decoration: BoxDecoration( + shape: BoxShape.circle, + color: Color(0xFF7DAFBC), + border: Border.all(color: Color(0xFF7DAFBC), width: 1), + ), + child: IconButton( + padding: EdgeInsets.zero, + iconSize: 20, + icon: const Icon(Icons.arrow_forward, color: Colors.white), + onPressed: () { + tutorialCoachMark.next(); + }, + ), + ), + ], + ), + ], + ), + ], + ) ), ], ), ), ), TargetContent( + padding: EdgeInsets.only(left: screenWidth * 0.4, bottom: 0), align: ContentAlign.bottom, - child: SizedBox( - width: MediaQuery.of(context).size.width, - height:MediaQuery.of(context).size.height*0.69 , + child: Container( + width: 200, + height: 77, child: Stack( - children: [ - Positioned( - left: MediaQuery.of(context).size.width*0.4, - top: _imageCardPosition.dy-29, - child: Image.asset( - 'assets/app_tour/down_right.png', - width: 40, - height: 90, - ), - ), - ] + children: [ + Image.asset( + 'assets/app_tour/right_down.png', + fit: BoxFit.contain, + ), + ], ), - ), ), ], @@ -404,13 +394,15 @@ final _pb = PocketBase('https://pb.venbait.in'); identify: 'cardsKey', keyTarget: cardsKey, shape: ShapeLightFocus.RRect, + radius: 7, + paddingFocus: 6, + // targetPosition:TargetPosition(), contents: [ createTargetContent( text:AppLocalizations.of(context)!.economy, alignment: ContentAlign.bottom, gap: 0, - space: 40,), - + space: 43,), TargetContent( align: ContentAlign.bottom, child: @@ -423,37 +415,43 @@ final _pb = PocketBase('https://pb.venbait.in'); bottom: 25, left: 16, right: 16, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + child: Column( children: [ - ElevatedButton( - onPressed: () =>handleSkip, - style: ElevatedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(12), - ), - side: const BorderSide(color: Colors.white), - backgroundColor: Colors.transparent, - elevation: 0, - ), - child: const Text( - 'Skip', - style: TextStyle( - color: Colors.white, - fontSize: 14, - ), - ), + Align( + alignment: Alignment.bottomRight, + child:Padding(padding: EdgeInsets.only(right: 10), + child: + Text( + '2/7', + style: const TextStyle( + color: Colors.white, + fontSize: 14, + ), + ), + ) ), - Column( + const SizedBox(height: 3), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Text( - '2/7', - style: const TextStyle( - color: Colors.white, - fontSize: 14, + ElevatedButton( + onPressed: () =>handleSkip(), + style: ElevatedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12), + ), + side: const BorderSide(color: Colors.white), + backgroundColor: Colors.transparent, + elevation: 0, + ), + child: const Text( + 'Skip', + style: TextStyle( + color: Colors.white, + fontSize: 14, + ), ), ), - const SizedBox(height: 3), Row( children: [ Container( @@ -496,43 +494,62 @@ final _pb = PocketBase('https://pb.venbait.in'); ), ), TargetContent( + padding: EdgeInsets.only(left: screenWidth * 0.4, bottom: 0), align: ContentAlign.bottom, - child: SizedBox( - width: MediaQuery.of(context).size.width , - height:MediaQuery.of(context).size.height*0.69 , + child: Container( + width: 200, + height: 77, child: Stack( - children: [ - Positioned( - left: MediaQuery.of(context).size.width*0.40, - top: _imageTopicPosition.dy-29, - child: Image.asset( - 'assets/app_tour/down_right.png', - width: 40, - height: 90, - ), - ), - ] + children: [ + Image.asset( + 'assets/app_tour/right_down.png', + fit: BoxFit.contain, + ), + ], ), - ), ), + // TargetContent( + // align: ContentAlign.bottom, + // child: SizedBox( + // width: MediaQuery.of(context).size.width , + // height:MediaQuery.of(context).size.height*0.69 , + // child: Stack( + // children: [ + // Positioned( + // left: MediaQuery.of(context).size.width*0.40, + // top: _imageTopicPosition.dy-29, + // child: Image.asset( + // 'assets/app_tour/right_down.png', + // width: 40, + // height: 90, + // ), + // ), + // ] + // ), + // + // ), + // ), ], ), ]; } void _initPreviousTarget(){ + final double screenWidth = MediaQuery.of(context).size.width; previousHomeTargets=[ TargetFocus( identify: 'cardsKey', keyTarget: cardsKey, shape: ShapeLightFocus.RRect, + radius: 7, + paddingFocus: 6, contents: [ createTargetContent( text:AppLocalizations.of(context)!.economy, alignment: ContentAlign.bottom, gap: 0, - space: 40,), + space: 43,), TargetContent( align: ContentAlign.bottom, child: @@ -545,67 +562,79 @@ final _pb = PocketBase('https://pb.venbait.in'); bottom: 25, left: 16, right: 16, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + child: Column( children: [ - ElevatedButton( - onPressed: () =>handleSkip(), - style: ElevatedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(12), - ), - side: const BorderSide(color: Colors.white), - backgroundColor: Colors.transparent, - elevation: 0, - ), - child: const Text( - 'Skip', - style: TextStyle( - color: Colors.white, - fontSize: 14, - ), - ), + Align( + alignment: Alignment.bottomRight, + child:Padding(padding: EdgeInsets.only(right: 10), + child: + Text( + '2/7', + style: const TextStyle( + color: Colors.white, + fontSize: 14, + ), + ), + ) ), - Column( + SizedBox(height: 5,), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Text( - '2/7', - style: const TextStyle( - color: Colors.white, - fontSize: 14, + ElevatedButton( + onPressed: () =>handleSkip(), + style: ElevatedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12), + ), + side: const BorderSide(color: Colors.white), + backgroundColor: Colors.transparent, + elevation: 0, + ), + child: const Text( + 'Skip', + style: TextStyle( + color: Colors.white, + fontSize: 14, + ), ), ), - const SizedBox(height: 3), Row( + children: [ - Container( - decoration: BoxDecoration( - shape: BoxShape.circle, - border: Border.all(color: Colors.white, width: 2.0), - ), - child: IconButton( - icon: const Icon(Icons.arrow_back, color: Colors.white), - onPressed: () { - tutorialCoachMark.next(); - }, - ), - ), - const SizedBox(width: 10), - Container( - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Color(0xFF7DAFBC), - border: Border.all(color: Color(0xFF7DAFBC), width: 1.5), - ), - child: IconButton( - iconSize: 20, - icon: const Icon(Icons.arrow_forward, color: Colors.white), - onPressed: () { - ref.read(previousHomeTourProvider.notifier).state=true; - ref.read(chartsTourProvider.notifier).state=false; - tutorialCoachMark.finish(); - }, - ), + Row( + children: [ + Container( + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all(color: Colors.white, width: 2.0), + ), + child: IconButton( + icon: const Icon(Icons.arrow_back, color: Colors.white), + onPressed: () { + tutorialCoachMark.next(); + }, + ), + ), + const SizedBox(width: 10), + Container( + decoration: BoxDecoration( + shape: BoxShape.circle, + color: Color(0xFF7DAFBC), + border: Border.all(color: Color(0xFF7DAFBC), width: 1.5), + ), + child: IconButton( + iconSize: 20, + icon: const Icon(Icons.arrow_forward, color: Colors.white), + onPressed: () { + ref.read(previousHomeTourProvider.notifier).state=true; + ref.read(chartsTourProvider.notifier).state=false; + context.go('/chartScreen/hotels?bgColor=0xFF90B0D5&mainTopic=ECONOMY&title=Hotel+Establishments'); + tutorialCoachMark.finish(); + }, + ), + ), + ], ), ], ), @@ -619,24 +648,19 @@ final _pb = PocketBase('https://pb.venbait.in'); ), ), TargetContent( + padding: EdgeInsets.only(left: screenWidth * 0.4, bottom: 0), align: ContentAlign.bottom, - child: SizedBox( - width: MediaQuery.of(context).size.width, - height:MediaQuery.of(context).size.height*0.69 , + child: Container( + width: 200, + height: 77, child: Stack( - children: [ - Positioned( - left: MediaQuery.of(context).size.width*0.40, - top: _imageTopicPosition.dy-29, - child: Image.asset( - 'assets/app_tour/down_right.png', - width: 40, - height: 90, - ), - ), - ] + children: [ + Image.asset( + 'assets/app_tour/right_down.png', + fit: BoxFit.contain, + ), + ], ), - ), ), ], @@ -645,12 +669,14 @@ final _pb = PocketBase('https://pb.venbait.in'); identify: 'cardTopicKey', keyTarget: cardTopicKey, shape: ShapeLightFocus.RRect, + radius: 8, + paddingFocus: 16, contents: [ createTargetContent( text:AppLocalizations.of(context)!.home_topic, alignment: ContentAlign.bottom, - gap: 45, - space: 40, + gap: 0, + space: 43, ), TargetContent( align: ContentAlign.bottom, @@ -660,43 +686,48 @@ final _pb = PocketBase('https://pb.venbait.in'); child: Stack( children: [ Positioned( - bottom: 35, + bottom: 20, left: 16, right: 16, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + child: Column( children: [ - ElevatedButton( - onPressed: () { - tutorialCoachMark.skip(); - debugPrint('Skip clicked'); - }, - style: ElevatedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(12), - ), - side: const BorderSide(color: Colors.white), - backgroundColor: Colors.transparent, - elevation: 0, - ), - child: const Text( - 'Skip', - style: TextStyle( - color: Colors.white, - fontSize: 14, - ), - ), - ), - Column( - children: [ - Text( + Align( + alignment: Alignment.bottomRight, + child: Padding( + padding:EdgeInsets.only(right: 10), + child: Text( '1/7', style: const TextStyle( color: Colors.white, fontSize: 14, ), ), - const SizedBox(height: 3), + ), + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + ElevatedButton( + onPressed: () { + tutorialCoachMark.skip(); + debugPrint('Skip clicked'); + }, + style: ElevatedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12), + ), + side: const BorderSide(color: Colors.white), + backgroundColor: Colors.transparent, + elevation: 0, + ), + child: const Text( + 'Skip', + style: TextStyle( + color: Colors.white, + fontSize: 14, + ), + ), + ), Row( children: [ const SizedBox(width: 10), @@ -726,24 +757,19 @@ final _pb = PocketBase('https://pb.venbait.in'); ), ), TargetContent( + padding: EdgeInsets.only(left: screenWidth * 0.4, bottom: 0), align: ContentAlign.bottom, - child: SizedBox( - width: MediaQuery.of(context).size.width, - height:MediaQuery.of(context).size.height*0.69 , + child: Container( + width: 200, + height: 77, child: Stack( - children: [ - Positioned( - left: MediaQuery.of(context).size.width*0.4, - top: _imageCardPosition.dy-29, - child: Image.asset( - 'assets/app_tour/down_right.png', - width: 40, - height: 90, - ), - ), - ] + children: [ + Image.asset( + 'assets/app_tour/right_down.png', + fit: BoxFit.contain, + ), + ], ), - ), ), ],