SS-FCSC/uaestats_fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

userguide and app tour update

Browse Source
This commit is contained in:
Kalonkarthik 2025-02-04 10:25:00 +05:30
parent f5bfb22d21
commit 1c76f19771
7 changed files with 861 additions and 560 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
lib/presentation/Screens/charts/screens/chart_screen.dart
View File

@ -155,6 +155,7 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
identify: 'cardKey', identify: 'cardKey',
keyTarget: cardKey, keyTarget: cardKey,
shape: ShapeLightFocus.RRect, shape: ShapeLightFocus.RRect,
radius: 8,
paddingFocus: 0, paddingFocus: 0,
contents: [ contents: [
createTargetContent( createTargetContent(
@ -171,10 +172,26 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
child: Stack( child: Stack(
children: [ children: [
Positioned( Positioned(
bottom: 35, bottom: 55,
left: 16, left: 16,
right: 16, right: 16,
child: Row( child: Column(
children: [
Align(
alignment: Alignment.bottomRight,
child:Padding(
padding: EdgeInsets.only(right:10),
child:Text(
'3/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
) ,
),
),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
@ -195,16 +212,6 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
), ),
), ),
), ),
Column(
children: [
Text(
'3/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
children: [ children: [
Container( Container(
@ -272,11 +279,113 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
), ),
], ],
), ),
// TargetFocus(
// identify: 'chartKey',
// keyTarget: chartKey,
// shape: ShapeLightFocus.RRect,
// paddingFocus: 0,
// contents: [
// createTargetContent(
// text: AppLocalizations.of(context)!.kpiCards,
// alignment: ContentAlign.top,
// gap:0,
// space: 0,
// ),
// TargetContent(
// align: ContentAlign.bottom,
// child: SizedBox(
// width: double.infinity,
// height: MediaQuery.of(context).size.height *
// 0.30, // Set an appropriate height for the Stack
// child: Stack(
// children: [
// Positioned(
// bottom: 25,
// 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(
// '5/7',
// style: const 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: () {
// scrollToTargetThenShowTutorial(bookMarkKey);
// 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(
// icon: const Icon(Icons.arrow_forward,
// color: Colors.white),
// onPressed: () {
// tutorialCoachMark.next();
// },
// ),
// ),
// ],
// ),
// ],
// ),
// ],
// ),
// ),
// ],
// ),
// ),
// ),
// ],
// ),
TargetFocus( TargetFocus(
identify: 'BookMarkKey', identify: 'BookMarkKey',
keyTarget: bookMarkKey, keyTarget: bookMarkKey,
shape: ShapeLightFocus.RRect, shape: ShapeLightFocus.RRect,
paddingFocus: 1, radius: 8,
paddingFocus: 12,
contents: [ contents: [
createTargetContent( createTargetContent(
text: AppLocalizations.of(context)!.bookMark, text: AppLocalizations.of(context)!.bookMark,
@ -292,10 +401,25 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
child: Stack( child: Stack(
children: [ children: [
Positioned( Positioned(
bottom: 35, bottom: 55,
left: 16, left: 16,
right: 16, right: 16,
child: Row( child: Column(
children: [
Align(
alignment: Alignment.bottomRight,
child: Padding(padding: EdgeInsets.only(right: 10),
child: Text(
'4/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
@ -316,16 +440,6 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
), ),
), ),
), ),
Column(
children: [
Text(
'4/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
children: [ children: [
Container( Container(
@ -402,6 +516,7 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
]; ];
} }
void _initpreviousTargets(){ void _initpreviousTargets(){
final double screenWidth= MediaQuery.of(context).size.width; final double screenWidth= MediaQuery.of(context).size.width;
final double screenHeight= MediaQuery.of(context).size.height; final double screenHeight= MediaQuery.of(context).size.height;
@ -410,6 +525,8 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
identify: 'BookMarkKey', identify: 'BookMarkKey',
keyTarget: bookMarkKey, keyTarget: bookMarkKey,
shape: ShapeLightFocus.RRect, shape: ShapeLightFocus.RRect,
radius: 8,
paddingFocus: 12,
contents: [ contents: [
createTargetContent( createTargetContent(
text: AppLocalizations.of(context)!.bookMark, text: AppLocalizations.of(context)!.bookMark,
@ -428,7 +545,23 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
bottom: 35, bottom: 35,
left: 16, left: 16,
right: 16, right: 16,
child: Row( child: Column(
children: [
Align(
alignment: Alignment.bottomRight,
child:Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Text(
'4/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
@ -449,16 +582,6 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
), ),
), ),
), ),
Column(
children: [
Text(
'4/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
children: [ children: [
Container( Container(
@ -536,6 +659,8 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
identify: 'cardKey', identify: 'cardKey',
keyTarget: cardKey, keyTarget: cardKey,
shape: ShapeLightFocus.RRect, shape: ShapeLightFocus.RRect,
radius: 8,
paddingFocus: 0,
contents: [ contents: [
createTargetContent( createTargetContent(
text: AppLocalizations.of(context)!.kpiCards, text: AppLocalizations.of(context)!.kpiCards,
@ -551,10 +676,24 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
child: Stack( child: Stack(
children: [ children: [
Positioned( Positioned(
bottom: 35, bottom: 55,
left: 16, left: 16,
right: 16, right: 16,
child: Row( child: Column(
children: [
Align(alignment: Alignment.bottomRight,
child:Padding(
padding: const EdgeInsets.only(right:10.0),
child: Text(
'3/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
@ -575,16 +714,6 @@ class _ChartScreen1State extends ConsumerState<ChartScreen1> {
), ),
), ),
), ),
Column(
children: [
Text(
'3/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
children: [ children: [
Container( Container(

180
lib/presentation/routes/bottom_bar_routes/tab_routes/home_route.dart
View File

@ -298,12 +298,14 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
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: 0, gap: 0,
space: 44, space: 43,
), ),
TargetContent( TargetContent(
align: ContentAlign.bottom, align: ContentAlign.bottom,
@ -316,7 +318,23 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
bottom: 35, bottom: 35,
left: 16, left: 16,
right: 16, right: 16,
child: Row( 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,
),
),
),
),
SizedBox(height: 5,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
@ -337,17 +355,8 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
), ),
), ),
), ),
Column(
children: [
Text(
'1/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [ children: [
const SizedBox(width: 10), const SizedBox(width: 10),
Container( Container(
@ -370,7 +379,7 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
], ],
), ),
], ],
), )
), ),
], ],
), ),
@ -392,19 +401,42 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
), ),
), ),
), ),
// 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.4,
// top: _imageCardPosition.dy-29,
// child: Image.asset(
// 'assets/app_tour/down_right.png',
// width: 40,
// height: 90,
// ),
// ),
// ]
// ),
//
// ),
// ),
], ],
), ),
TargetFocus( TargetFocus(
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: 44,), space: 43,),
TargetContent( TargetContent(
align: ContentAlign.bottom, align: ContentAlign.bottom,
child: child:
@ -417,7 +449,23 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
bottom: 25, bottom: 25,
left: 16, left: 16,
right: 16, right: 16,
child: Row( child: Column(
children: [
Align(
alignment: Alignment.bottomRight,
child:Padding(padding: EdgeInsets.only(right: 10),
child:
Text(
'2/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
)
),
const SizedBox(height: 3),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
@ -438,16 +486,6 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
), ),
), ),
), ),
Column(
children: [
Text(
'2/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
children: [ children: [
Container( Container(
@ -505,6 +543,27 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
), ),
), ),
), ),
// 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,
// ),
// ),
// ]
// ),
//
// ),
// ),
], ],
), ),
]; ];
@ -517,12 +576,14 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
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: 44,), space: 43,),
TargetContent( TargetContent(
align: ContentAlign.bottom, align: ContentAlign.bottom,
child: child:
@ -535,7 +596,23 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
bottom: 25, bottom: 25,
left: 16, left: 16,
right: 16, right: 16,
child: Row( child: Column(
children: [
Align(
alignment: Alignment.bottomRight,
child:Padding(padding: EdgeInsets.only(right: 10),
child:
Text(
'2/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
)
),
SizedBox(height: 5,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
@ -556,16 +633,9 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
), ),
), ),
), ),
Column( Row(
children: [ children: [
Text(
'2/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
children: [ children: [
Container( Container(
@ -593,6 +663,7 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
onPressed: () { onPressed: () {
ref.read(previousHomeTourProvider.notifier).state=true; ref.read(previousHomeTourProvider.notifier).state=true;
ref.read(chartsTourProvider.notifier).state=false; ref.read(chartsTourProvider.notifier).state=false;
context.go('/chartScreen/hotels?bgColor=0xFF90B0D5&mainTopic=ECONOMY&title=Hotel+Establishments');
tutorialCoachMark.finish(); tutorialCoachMark.finish();
}, },
), ),
@ -603,6 +674,8 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
), ),
], ],
), ),
],
),
), ),
], ],
), ),
@ -630,12 +703,14 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
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: 0, gap: 0,
space: 44, space: 43,
), ),
TargetContent( TargetContent(
align: ContentAlign.bottom, align: ContentAlign.bottom,
@ -648,12 +723,27 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
bottom: 35, bottom: 35,
left: 16, left: 16,
right: 16, right: 16,
child: Row( child: Column(
children: [
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding:EdgeInsets.only(right: 10),
child: Text(
'1/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
onPressed: () { onPressed: () {
handleSkip(); tutorialCoachMark.skip();
debugPrint('Skip clicked'); debugPrint('Skip clicked');
}, },
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
@ -672,16 +762,6 @@ class EconomyStatsState extends ConsumerState<EconomyStatsWidget> {
), ),
), ),
), ),
Column(
children: [
Text(
'1/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
children: [ children: [
const SizedBox(width: 10), const SizedBox(width: 10),

68
lib/presentation/routes/drawer_routes/Drawer Items/user_guide/faq_page.dart
View File

@ -1,7 +1,12 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.dart'; import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.dart';
import '../../../../components/indicators/locale_provider.dart';
import '../../../../components/my_toggle.dart';
class FAQPage extends StatefulWidget { class FAQPage extends StatefulWidget {
const FAQPage({super.key}); const FAQPage({super.key});
@ -12,17 +17,49 @@ class FAQPage extends StatefulWidget {
class _FAQPageState extends State<FAQPage> { class _FAQPageState extends State<FAQPage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BaseScaffold( return Scaffold(
title: Text('FAQs', appBar: AppBar(
style: TextStyle( elevation: 3,
color:Color(0xFF7296BE), shadowColor: Colors.black,
fontWeight: FontWeight.w500, title: Text('Key Features',),
),), leading: IconButton(
showBackButton: true, onPressed: (){
body: SafeArea(child:Column( context.go('/user-guide');
},
color: Colors.black,
icon: const Icon(Icons.arrow_back_ios_new),),
actions: [
Consumer(
builder: (context, ref, _) {
final locale = ref.watch(localeProvider); // Current locale
return MyToggle(
isOn: locale?.languageCode == 'en',
knobTextWhenOn: 'ع',
knobTextWhenOff: 'EN',
pathColorWhenOn: Colors.grey.shade300,
pathColorWhenOff: Colors.grey.shade300,
onTap: () {
ref.read(localeProvider.notifier).toggleLocale();
},
);
},
),
],
),
body: SafeArea(
child: Scrollbar(
thumbVisibility: true,
thickness: 6,
radius: Radius.circular(10),
interactive: true,
child:SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Container( Container
(
color: Colors.white,
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,
child: Text.rich( child: Text.rich(
@ -54,22 +91,17 @@ class _FAQPageState extends State<FAQPage> {
), ),
), ),
), ),
Expanded(child: Scrollbar( Container(
thumbVisibility: true,
thickness: 8,
radius: Radius.circular(10),
interactive: true,
child:SingleChildScrollView(
child:Container(
padding: const EdgeInsets.all(0.0), padding: const EdgeInsets.all(0.0),
color: Colors.grey[50], color: Colors.grey[50],
child: QuestionAnswerScrollView(), child: QuestionAnswerScrollView(),
), ),
),
),),
], ],
), ),
), ),
),
),
); );
} }

63
lib/presentation/routes/drawer_routes/Drawer Items/user_guide/features.dart
View File

@ -1,8 +1,13 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.dart'; import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.dart';
import 'package:uae_stat/presentation/routes/drawer_routes/Drawer%20Items/user_guide/custom_text.dart'; import 'package:uae_stat/presentation/routes/drawer_routes/Drawer%20Items/user_guide/custom_text.dart';
import '../../../../components/indicators/locale_provider.dart';
import '../../../../components/my_toggle.dart';
class UsingFeatures extends StatelessWidget { class UsingFeatures extends StatelessWidget {
@ -517,15 +522,49 @@ class UsingFeatures extends StatelessWidget {
]; ];
return return
BaseScaffold( title: Text('Key Features', Scaffold(
style: TextStyle( appBar: AppBar(
color: Color(0xFFAA8E83), elevation: 3,
),), shadowColor: Colors.black,
showBackButton: true, title: Text('Key Features',),
body:SafeArea(child: Column( leading: IconButton(
onPressed: (){
context.go('/user-guide');
},
color: Colors.black,
icon: const Icon(Icons.arrow_back_ios_new),),
actions: [
Consumer(
builder: (context, ref, _) {
final locale = ref.watch(localeProvider); // Current locale
return MyToggle(
isOn: locale?.languageCode == 'en',
knobTextWhenOn: 'ع',
knobTextWhenOff: 'EN',
pathColorWhenOn: Colors.grey.shade300,
pathColorWhenOff: Colors.grey.shade300,
onTap: () {
ref.read(localeProvider.notifier).toggleLocale();
},
);
},
),
],
),
body:SafeArea(
child: Scrollbar(
thumbVisibility: true,
thickness: 6,
radius: Radius.circular(10),
interactive: true,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Container( Container(
color: Colors.white,
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,
child: Text( child: Text(
@ -537,12 +576,6 @@ class UsingFeatures extends StatelessWidget {
), ),
), ),
), ),
Expanded(child: Scrollbar(
thumbVisibility: true,
thickness: 6,
radius: Radius.circular(10),
interactive: true,
child:
Container( Container(
color: Colors.grey[50], // Set the background color here color: Colors.grey[50], // Set the background color here
// child: SingleChildScrollView( // child: SingleChildScrollView(
@ -552,9 +585,11 @@ class UsingFeatures extends StatelessWidget {
textAlign: TextAlign.start, textAlign: TextAlign.start,
), ),
), ),
),),
], ],
), ), ),
)
),
),
); );
} }
} }

74
lib/presentation/routes/drawer_routes/Drawer Items/user_guide/getting_started.dart
View File

@ -1,5 +1,7 @@
import 'package:flutter/gestures.dart'; import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:uae_stat/presentation/routes/drawer_routes/Drawer%20Items/user_guide/custom_text.dart'; import 'package:uae_stat/presentation/routes/drawer_routes/Drawer%20Items/user_guide/custom_text.dart';
@ -7,6 +9,9 @@ import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.
import 'package:uae_stat/infrastructure/services/img_asset_paths/banner_asset_path.dart'; import 'package:uae_stat/infrastructure/services/img_asset_paths/banner_asset_path.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
import '../../../../components/indicators/locale_provider.dart';
import '../../../../components/my_toggle.dart';
class GettingStarted extends StatelessWidget { class GettingStarted extends StatelessWidget {
GettingStarted({super.key}); GettingStarted({super.key});
@ -66,17 +71,57 @@ class GettingStarted extends StatelessWidget {
]; ];
return BaseScaffold( title: Text('About the App', return Scaffold(
style: TextStyle( appBar: AppBar(
color:Color(0xFF265E84), elevation: 3,
fontWeight: FontWeight.w500, shadowColor: Colors.black,
title: Text('About the App',),
leading: IconButton(
onPressed: (){
context.go('/user-guide');
},
color: Colors.black,
icon: const Icon(Icons.arrow_back_ios_new),),
actions: [
Consumer(
builder: (context, ref, _) {
final locale = ref.watch(localeProvider); // Current locale
return MyToggle(
isOn: locale?.languageCode == 'en',
knobTextWhenOn: 'ع',
knobTextWhenOff: 'EN',
pathColorWhenOn: Colors.grey.shade300,
pathColorWhenOff: Colors.grey.shade300,
onTap: () {
ref.read(localeProvider.notifier).toggleLocale();
},
);
// IconButton(
// icon: Icon(locale?.languageCode == 'en'
// ? Icons.toggle_off_outlined
// : Icons.toggle_on_outlined,),
// onPressed: () {
// ref.read(localeProvider.notifier).toggleLocale();
// },
// );
},
), ),
],
), ),
showBackButton: true, // title: Text('About the App',),
body:SafeArea(child: Column( // showBackButton: true,
body:SafeArea(
child: Scrollbar(
thumbVisibility: true,
thickness: 6,
radius: Radius.circular(10),
interactive: true,
child:SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Container( Container(
color: Colors.white,
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,
child: Text.rich( child: Text.rich(
@ -108,13 +153,8 @@ class GettingStarted extends StatelessWidget {
), ),
), ),
), ),
Expanded(child: Scrollbar(
thumbVisibility: true, Column(
thickness: 6,
radius: Radius.circular(10),
interactive: true,
child: SingleChildScrollView(
child: Column(
children: [ children: [
Container( Container(
color: Colors.grey[50], // Set the background color here color: Colors.grey[50], // Set the background color here
@ -169,11 +209,11 @@ class GettingStarted extends StatelessWidget {
), ),
], ],
), ),
),
),),
], ],
), ), ),
),
),
),
); );
} }
} }

66
lib/presentation/routes/drawer_routes/Drawer Items/user_guide/user_guide.dart
View File

@ -15,15 +15,16 @@ class _UserGuideState extends State<UserGuide> {
List<Widget> createRows(List<List<Map<String, dynamic>>> items) { List<Widget> createRows(List<List<Map<String, dynamic>>> items) {
return items.map((pair) { return items.map((pair) {
return Padding( return Padding(
padding: const EdgeInsets.only(bottom: 20), // Add space between rows padding: const EdgeInsets.only(bottom: 20),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: pair.length == 1
? MainAxisAlignment.center
: MainAxisAlignment.spaceEvenly,
children: pair.map((item) { children: pair.map((item) {
return userGuides( return userGuides(
color: item['color'] as Color, color: item['color'] as Color,
text: item['text'] as String, text: item['text'] as String,
dynamicIcon: item['icon'], dynamicIcon: item['icon'],
no: item['index'] as String,
routePath:item['routePath']as String, routePath:item['routePath']as String,
); );
}).toList(), }).toList(),
@ -36,17 +37,16 @@ class _UserGuideState extends State<UserGuide> {
title: Text('User Guide'), title: Text('User Guide'),
body: SingleChildScrollView( body: SingleChildScrollView(
child: Container( child: Container(
color: Colors.grey[300], // Grey background for content
padding: const EdgeInsets.all(16.0), // Padding around content padding: const EdgeInsets.all(16.0), // Padding around content
child: Column( child: Column(
children: createRows([ children: createRows([
// Each pair defines a row of (Color, Text) pairs // Each pair defines a row of (Color, Text) pairs
[ [
{'routePath':'gettingStarted','color': Color(0xFF90B0D5), 'text': 'Getting Started', 'icon': 'START', 'index': '1'}, {'routePath':'gettingStarted','color': Color(0xFF90B0D5), 'text': 'Getting Started', 'icon': 'START',},
{'routePath':'features','color': Color(0xFFAA8E83), 'text': 'Using Features', 'icon': Icons.stars_outlined, 'index': '2'}, {'routePath':'features','color': Color(0xFFAA8E83), 'text': 'Using Features', 'icon': Icons.stars_outlined,},
], ],
[ [
{'routePath':'faq','color': Color(0xFF7296BE), 'text': 'FAQs', 'icon': Icons.question_answer_sharp, 'index': '3'}, {'routePath':'faq','color': Color(0xFF7296BE), 'text': 'FAQs', 'icon': Icons.question_answer_sharp,},
// {'routePath':'features','color': Color(0xFF7DAFBC), 'text': 'Advanced Settings', 'icon': Icons.settings_outlined, 'index': '6'}, // {'routePath':'features','color': Color(0xFF7DAFBC), 'text': 'Advanced Settings', 'icon': Icons.settings_outlined, 'index': '6'},
], ],
]), ]),
@ -58,21 +58,20 @@ class _UserGuideState extends State<UserGuide> {
class userGuides extends StatelessWidget { class userGuides extends StatelessWidget {
const userGuides({super.key, required this.routePath ,required this.color, required this.text,required this.dynamicIcon,required this.no}); const userGuides({super.key, required this.routePath ,required this.color, required this.text,required this.dynamicIcon});
final Color color; final Color color;
final String text; final String text;
final dynamic dynamicIcon; final dynamic dynamicIcon;
final String no;
final String routePath; final String routePath;
Widget buildDynamicWidget(dynamic icons) { Widget buildDynamicWidget(dynamic icons, Color iconColor) {
if (dynamicIcon is IconData) { if (dynamicIcon is IconData) {
return Icon( return Icon(
icons, icons,
size: 38, size: 38,
color: Colors.white, color: iconColor,
); );
} else if (dynamicIcon is String) { } else if (dynamicIcon is String) {
// Create a Text widget if variable is a String // Create a Text widget if variable is a String
@ -81,7 +80,7 @@ class userGuides extends StatelessWidget {
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
fontSize: 20, fontSize: 20,
color: Colors.white, color: iconColor,
), ),
); );
} else { } else {
@ -96,22 +95,24 @@ class userGuides extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final double screenWidth= MediaQuery.of(context).size.width;
final double screenHeight= MediaQuery.of(context).size.height;
return InkWell( return InkWell(
onTap: (){ onTap: (){
context.push('/user-guide/$routePath'); context.push('/user-guide/$routePath');
}, },
child: Container( child: Container(
padding: EdgeInsets.symmetric(horizontal: 4), padding: EdgeInsets.symmetric(horizontal: 4),
height: 115, height: 110,
width: 148, width: screenWidth * 0.40,
margin: EdgeInsets.all(1), margin: EdgeInsets.all(1),
decoration: BoxDecoration( decoration: BoxDecoration(
color: color, color: Colors.white,
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
border: Border.all(color: color,
width: 2.0)
), ),
alignment: Alignment.center, child: Column(
child: Stack(
children: [Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
// Icon( // Icon(
@ -119,20 +120,20 @@ class userGuides extends StatelessWidget {
// icons, // Home icon // icons, // Home icon
// color: Colors.white, // color: Colors.white,
// ), // ),
buildDynamicWidget(dynamicIcon), buildDynamicWidget(dynamicIcon, color),
SizedBox(width: 10,height: 15,), // Space between icon and text SizedBox(width: 10,height: 10,), // Space between icon and text
Container( Container(
width: double.infinity, width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: 4, vertical: 4), // Padding inside the text background padding: EdgeInsets.symmetric(horizontal: 4, vertical: 5), // Padding inside the text background
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, // Background color for text color: color, // Background color for text
borderRadius: BorderRadius.circular(5), // Rounded corners for text background borderRadius: BorderRadius.circular(5),
), ),
child: Text( child: Text(
text, text,
style: TextStyle( style: TextStyle(
color: color, // Text color color: Colors.white, // Text color
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
@ -140,23 +141,6 @@ class userGuides extends StatelessWidget {
), ),
], ],
), ),
Positioned(
top: 6, // Distance from the top of the container
left: 6, // Distance from the left of the container
child: Container(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
color: Colors.transparent, // Background color for the number
child: Text(
no,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),],
)
), ),
); );
} }

107
lib/presentation/routes/drawer_routes/custom_drawer_routes.dart
View File

@ -124,7 +124,7 @@ class _BaseScaffoldState extends ConsumerState<BaseScaffold> {
text: AppLocalizations.of(context)!.tour_navBar, text: AppLocalizations.of(context)!.tour_navBar,
alignment: ContentAlign.top, alignment: ContentAlign.top,
space: 0, space: 0,
gap: 100, gap: 105,
), ),
TargetContent( TargetContent(
align: ContentAlign.top, align: ContentAlign.top,
@ -138,7 +138,23 @@ class _BaseScaffoldState extends ConsumerState<BaseScaffold> {
bottom: 25, bottom: 25,
left: 16, left: 16,
right: 16, right: 16,
child: Row( child: Column(
children: [
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.only(right:10.0),
child: Text(
'5/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
@ -159,16 +175,6 @@ class _BaseScaffoldState extends ConsumerState<BaseScaffold> {
), ),
), ),
), ),
Column(
children: [
Text(
'5/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
children: [ children: [
Container( Container(
@ -220,22 +226,6 @@ class _BaseScaffoldState extends ConsumerState<BaseScaffold> {
), ),
), ),
), ),
TargetContent(
padding: EdgeInsets.only(left: screenWidth * 0.4, bottom: 0),
align: ContentAlign.top,
child: Container(
width: 200,
height: 100,
child: Stack(
children: [
Image.asset(
'assets/app_tour/leftUp.png',
fit: BoxFit.contain,
),
],
),
),
),
], ],
), ),
TargetFocus( TargetFocus(
@ -255,15 +245,30 @@ class _BaseScaffoldState extends ConsumerState<BaseScaffold> {
align: ContentAlign.bottom, align: ContentAlign.bottom,
child: SizedBox( child: SizedBox(
width: double.infinity, width: double.infinity,
height: MediaQuery.of(context).size.height * height: MediaQuery.of(context).size.height * 0.80,
0.80, // Set an appropriate height for the Stack
child: Stack( child: Stack(
children: [ children: [
Positioned( Positioned(
bottom: 25, bottom: 25,
left: 16, left: 16,
right: 16, right: 16,
child: Row( child: Column(
children: [
Align(
alignment: Alignment.bottomRight,
child:Padding(
padding: const EdgeInsets.only(right:10.0),
child: Text(
'6/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
@ -284,16 +289,6 @@ class _BaseScaffoldState extends ConsumerState<BaseScaffold> {
), ),
), ),
), ),
Column(
children: [
Text(
'6/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
children: [ children: [
Container( Container(
@ -339,7 +334,7 @@ class _BaseScaffoldState extends ConsumerState<BaseScaffold> {
), ),
TargetContent( TargetContent(
padding: EdgeInsets.only( padding: EdgeInsets.only(
right: screenWidth * 0.7, top: toggleHeight - 5), right: screenWidth * 0.7, top: 30),
align: ContentAlign.right, align: ContentAlign.right,
child: Container( child: Container(
width: 200, width: 200,
@ -392,7 +387,23 @@ class _BaseScaffoldState extends ConsumerState<BaseScaffold> {
bottom: 25, bottom: 25,
left: 16, left: 16,
right: 16, right: 16,
child: Row( child: Column(
children: [
Align(
alignment: Alignment.bottomRight,
child:Padding(
padding: const EdgeInsets.only(right:10.0),
child: Text(
'7/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
ElevatedButton( ElevatedButton(
@ -413,16 +424,6 @@ class _BaseScaffoldState extends ConsumerState<BaseScaffold> {
), ),
), ),
), ),
Column(
children: [
Text(
'7/7',
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
const SizedBox(height: 3),
Row( Row(
children: [ children: [
Container( Container(