home screen app_tour change

This commit is contained in:
Kalonkarthik 2025-02-05 12:23:16 +05:30
parent ec156e49dc
commit 969a2160a9

View File

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