From 4e15e0b87e4d8d69eb16e3dae57c31495ca2da3e Mon Sep 17 00:00:00 2001 From: Kalonkarthik Date: Thu, 19 Dec 2024 14:31:38 +0530 Subject: [PATCH] User Guide updated --- .run/main.dart.run.xml | 2 +- android/gradle.properties | 1 + lib/config/my_router.dart | 13 + .../routes/auth_routes/login_route.dart | 402 +++++++++--------- .../Drawer Items/user_guide/features.dart | 291 +++++++++++++ .../Drawer Items/user_guide/textRich.dart | 110 +++++ .../Drawer Items/user_guide/user_guide.dart | 168 ++++++++ .../drawer_routes/custom_drawer_routes.dart | 26 +- 8 files changed, 803 insertions(+), 210 deletions(-) create mode 100644 lib/presentation/routes/drawer_routes/Drawer Items/user_guide/features.dart create mode 100644 lib/presentation/routes/drawer_routes/Drawer Items/user_guide/textRich.dart create mode 100644 lib/presentation/routes/drawer_routes/Drawer Items/user_guide/user_guide.dart diff --git a/.run/main.dart.run.xml b/.run/main.dart.run.xml index 4a58a7c9..4767aff8 100644 --- a/.run/main.dart.run.xml +++ b/.run/main.dart.run.xml @@ -1,6 +1,6 @@ - \ No newline at end of file diff --git a/android/gradle.properties b/android/gradle.properties index 3b5b324f..7f5b17ec 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -1,3 +1,4 @@ org.gradle.jvmargs=-Xmx4G -XX:+HeapDumpOnOutOfMemoryError android.useAndroidX=true android.enableJetifier=true +org.gradle.java.home=C:\\Program Files\\Eclipse Adoptium\\jdk-17.0.13.11-hotspot diff --git a/lib/config/my_router.dart b/lib/config/my_router.dart index cdfe3b13..4402c031 100644 --- a/lib/config/my_router.dart +++ b/lib/config/my_router.dart @@ -305,6 +305,8 @@ import '../presentation/Screens/profilepage.dart'; import '../presentation/routes/auth_routes/login_route.dart'; import '../presentation/routes/bottom_bar_routes/tab_routes/home_route.dart'; import '../presentation/routes/drawer_routes/Drawer Items/feedback.dart'; +import '../presentation/routes/drawer_routes/Drawer Items/user_guide/features.dart'; +import '../presentation/routes/drawer_routes/Drawer Items/user_guide/user_guide.dart'; import '../presentation/routes/drawer_routes/Drawer Items/manage_users.dart'; final GoRouter router = GoRouter( @@ -355,12 +357,23 @@ final GoRouter router = GoRouter( path: '/feedback', builder: (context, state) => FeedbackForm(), ), + //Sub route GoRoute( path: '/profile', builder: (context, state) => ProfileScreen( userId: '', ), ), + GoRoute( + path: '/user-guide', + builder: (context, state) => UserGuide(), + routes: [ + GoRoute(path: '/features', + name: 'features', + builder: (context, state) => AboutFCSC(), + ), + ], + ), // GoRoute( // path: '/manageuser', // builder: (context, state) { diff --git a/lib/presentation/routes/auth_routes/login_route.dart b/lib/presentation/routes/auth_routes/login_route.dart index cbf28f0a..b67e1dc1 100644 --- a/lib/presentation/routes/auth_routes/login_route.dart +++ b/lib/presentation/routes/auth_routes/login_route.dart @@ -740,206 +740,206 @@ class _LoginRouteState extends State { ), ), ); -<<<<<<< HEAD -======= - final form = Form( - key: formKey, - child: Column( - children: [ - ThemedFormField( - hintText: context.translate( - 'Email', - 'بريد إلكتروني', - ), - validator: FieldValidator.email(), - imgPath: MiscIconAssetPath.person, - controller: emailCtl, - ), - 15.verticalSpace, - ThemedFormField( - validator: (text) { - if (text!.length < 8) { - return 'The password must be at least 8 characters'; - } - return FieldValidator.password(minLength: 8)(text); - }, - hintText: context.translate( - 'Password', - 'كلمة المرور', - ), - imgPath: MiscIconAssetPath.lock, - controller: pwCtl, - isObscurable: true, - ), - // 6.verticalSpace, - Align( - alignment: AlignmentDirectional.topEnd, - child: forgotPwBtn, - ), - 10.verticalSpace, - loginBtn, - ], - ), - ); - final helloAndPleaseLoginTexts = Column( - children: [ - Text( - context.translate( - 'Hello Again!', - 'مرحبا مجددا!', - ), - style: TextStyle( - fontFamily: context.translate( - 'Roboto', - 'NotoKufi', - ), - fontSize: 40, - fontWeight: FontWeight.w300, - ), - ), - 10.verticalSpace, - Text( - context.translate( - 'Please login to access UAE’s key official statistics', - 'يرجى تسجيل الدخول للوصول إلى الإحصاءات الرسمية الرئيسية لدولة الإمارات العربية المتحدة', - ), - textAlign: TextAlign.center, - style: TextStyle( - fontFamily: context.translate( - 'Roboto', - 'NotoKufi', - ), - fontSize: 18, - color: const Color(0xff898C81), - fontWeight: FontWeight.w700, - ), - ), - ], - ); - final dontHaveAnAccountRegisterBtn = TextButton( - onPressed: () => { - Navigator.push( - context, - MaterialPageRoute(builder: (context) => RegisterScreen()), - ), - }, - child: Text.rich( - textAlign: TextAlign.center, - TextSpan( - style: TextStyle( - fontFamily: context.translate( - 'Roboto', - 'NotoKufi', - ), - fontSize: 18, - fontWeight: FontWeight.bold, - ), - children: [ - TextSpan( - text: context.translate( - 'Don\'t have an account? ', - 'ليس لديك حساب؟', - ), - style: const TextStyle( - color: Color(0xff898C81), - ), - ), - const TextSpan( - text: ' ', - ), - TextSpan( - text: context.translate( - 'Register Now', - 'سجل الان', - ), - style: TextStyle( - color: MyTheme.topicColor(IndicatorTopic.economy).shade600, - ), - ), - ], - ), - ), - ); - final continueAsGuestBtn = SizedBox( - width: double.infinity, - child: ElevatedButton( - onPressed: () => context - .go('/${context.language}/${BottomNavBarItem.home.routePath}'), - style: ButtonStyle( - shape: WidgetStatePropertyAll( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), - ), - ), - padding: const WidgetStatePropertyAll( - EdgeInsets.symmetric(vertical: 10.5), - ), - textStyle: WidgetStatePropertyAll( - TextStyle( - fontFamily: context.translate( - 'Roboto', - 'NotoKufi', - ), - fontSize: 16, - fontWeight: FontWeight.w600, - ), - ), - backgroundColor: WidgetStatePropertyAll( - MyTheme.topicColor(IndicatorTopic.environment), - ), - foregroundColor: const WidgetStatePropertyAll( - Colors.white, - ), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - context.translate( - 'Continue as Guest', - 'استمر كضيف', - ), - ), - 6.horizontalSpace, - const Icon(Icons.chevron_right_outlined), - ], - ), - ), - ); - final fcscBanner = Image.asset( - BannerAssetPath.fcsc, - height: 56, - ); - final screenWidth = MediaQuery.of(context).size.width; - final listViewHorizontalPadding = - screenWidth < 700 ? 30 : 30 + (screenWidth - 700) / 2; - final scaffoldBody = ListView( - padding: EdgeInsets.symmetric( - horizontal: listViewHorizontalPadding.toDouble(), - ), - children: [ - 36.verticalSpace, - const Align( - alignment: AlignmentDirectional.topEnd, - child: LangToggle(), - ), - 16.verticalSpace, - helloAndPleaseLoginTexts, - 42.verticalSpace, - form, - 20.verticalSpace, - dontHaveAnAccountRegisterBtn, - 36.verticalSpace, - continueAsGuestBtn, - 72.verticalSpace, - fcscBanner, - ], - ); - final bgScaffold = Scaffold( - backgroundColor: Colors.white, - body: SafeArea(child: scaffoldBody), - ); - return bgScaffold; ->>>>>>> b0c5ebce3deb7da2aa24b0ea5ffe684df7dfb7bf +// <<<<<<< HEAD +// ======= +// final form = Form( +// key: formKey, +// child: Column( +// children: [ +// ThemedFormField( +// hintText: context.translate( +// 'Email', +// 'بريد إلكتروني', +// ), +// validator: FieldValidator.email(), +// imgPath: MiscIconAssetPath.person, +// controller: emailCtl, +// ), +// 15.verticalSpace, +// ThemedFormField( +// validator: (text) { +// if (text!.length < 8) { +// return 'The password must be at least 8 characters'; +// } +// return FieldValidator.password(minLength: 8)(text); +// }, +// hintText: context.translate( +// 'Password', +// 'كلمة المرور', +// ), +// imgPath: MiscIconAssetPath.lock, +// controller: pwCtl, +// isObscurable: true, +// ), +// // 6.verticalSpace, +// Align( +// alignment: AlignmentDirectional.topEnd, +// child: forgotPwBtn, +// ), +// 10.verticalSpace, +// loginBtn, +// ], +// ), +// ); +// final helloAndPleaseLoginTexts = Column( +// children: [ +// Text( +// context.translate( +// 'Hello Again!', +// 'مرحبا مجددا!', +// ), +// style: TextStyle( +// fontFamily: context.translate( +// 'Roboto', +// 'NotoKufi', +// ), +// fontSize: 40, +// fontWeight: FontWeight.w300, +// ), +// ), +// 10.verticalSpace, +// Text( +// context.translate( +// 'Please login to access UAE’s key official statistics', +// 'يرجى تسجيل الدخول للوصول إلى الإحصاءات الرسمية الرئيسية لدولة الإمارات العربية المتحدة', +// ), +// textAlign: TextAlign.center, +// style: TextStyle( +// fontFamily: context.translate( +// 'Roboto', +// 'NotoKufi', +// ), +// fontSize: 18, +// color: const Color(0xff898C81), +// fontWeight: FontWeight.w700, +// ), +// ), +// ], +// ); +// final dontHaveAnAccountRegisterBtn = TextButton( +// onPressed: () => { +// Navigator.push( +// context, +// MaterialPageRoute(builder: (context) => RegisterScreen()), +// ), +// }, +// child: Text.rich( +// textAlign: TextAlign.center, +// TextSpan( +// style: TextStyle( +// fontFamily: context.translate( +// 'Roboto', +// 'NotoKufi', +// ), +// fontSize: 18, +// fontWeight: FontWeight.bold, +// ), +// children: [ +// TextSpan( +// text: context.translate( +// 'Don\'t have an account? ', +// 'ليس لديك حساب؟', +// ), +// style: const TextStyle( +// color: Color(0xff898C81), +// ), +// ), +// const TextSpan( +// text: ' ', +// ), +// TextSpan( +// text: context.translate( +// 'Register Now', +// 'سجل الان', +// ), +// style: TextStyle( +// color: MyTheme.topicColor(IndicatorTopic.economy).shade600, +// ), +// ), +// ], +// ), +// ), +// ); +// final continueAsGuestBtn = SizedBox( +// width: double.infinity, +// child: ElevatedButton( +// onPressed: () => context +// .go('/${context.language}/${BottomNavBarItem.home.routePath}'), +// style: ButtonStyle( +// shape: WidgetStatePropertyAll( +// RoundedRectangleBorder( +// borderRadius: BorderRadius.circular(10), +// ), +// ), +// padding: const WidgetStatePropertyAll( +// EdgeInsets.symmetric(vertical: 10.5), +// ), +// textStyle: WidgetStatePropertyAll( +// TextStyle( +// fontFamily: context.translate( +// 'Roboto', +// 'NotoKufi', +// ), +// fontSize: 16, +// fontWeight: FontWeight.w600, +// ), +// ), +// backgroundColor: WidgetStatePropertyAll( +// MyTheme.topicColor(IndicatorTopic.environment), +// ), +// foregroundColor: const WidgetStatePropertyAll( +// Colors.white, +// ), +// ), +// child: Row( +// mainAxisAlignment: MainAxisAlignment.center, +// children: [ +// Text( +// context.translate( +// 'Continue as Guest', +// 'استمر كضيف', +// ), +// ), +// 6.horizontalSpace, +// const Icon(Icons.chevron_right_outlined), +// ], +// ), +// ), +// ); +// final fcscBanner = Image.asset( +// BannerAssetPath.fcsc, +// height: 56, +// ); +// final screenWidth = MediaQuery.of(context).size.width; +// final listViewHorizontalPadding = +// screenWidth < 700 ? 30 : 30 + (screenWidth - 700) / 2; +// final scaffoldBody = ListView( +// padding: EdgeInsets.symmetric( +// horizontal: listViewHorizontalPadding.toDouble(), +// ), +// children: [ +// 36.verticalSpace, +// const Align( +// alignment: AlignmentDirectional.topEnd, +// child: LangToggle(), +// ), +// 16.verticalSpace, +// helloAndPleaseLoginTexts, +// 42.verticalSpace, +// form, +// 20.verticalSpace, +// dontHaveAnAccountRegisterBtn, +// 36.verticalSpace, +// continueAsGuestBtn, +// 72.verticalSpace, +// fcscBanner, +// ], +// ); +// final bgScaffold = Scaffold( +// backgroundColor: Colors.white, +// body: SafeArea(child: scaffoldBody), +// ); +// return bgScaffold; +// >>>>>>> b0c5ebce3deb7da2aa24b0ea5ffe684df7dfb7bf } } diff --git a/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/features.dart b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/features.dart new file mode 100644 index 00000000..a77bd894 --- /dev/null +++ b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/features.dart @@ -0,0 +1,291 @@ +import 'package:flutter/material.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:uae_stat/presentation/routes/drawer_routes/Drawer Items/user_guide/textRich.dart'; +import 'package:uae_stat/presentation/components/space.dart'; +import 'package:uae_stat/infrastructure/services/img_asset_paths/banner_asset_path.dart'; +import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.dart'; + +class AboutFCSC extends HookConsumerWidget { + const AboutFCSC({super.key}); + + @override + Widget build(BuildContext context, WidgetRef ref) { + final Color tColor=const Color(0xFF265E84); + final fcscBanner = Image.asset( + BannerAssetPath.fcsc, + height: 56, + alignment:Alignment.center, + ); + return BaseScaffold( + title: const Text('Features'), + + body: Scrollbar( + thumbVisibility: true, + thickness: 8, + radius: Radius.circular(10), + interactive: true, + child: SingleChildScrollView( + child: Container( + padding: const EdgeInsets.only(left: 14.0,right: 16.0, bottom: 16.0), + color: const Color(0xFFD9D9D9), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + buildRichText([ + createTextSpan( + 'Using Features\n', + fontSize: 20, + color: tColor, + fontWeight: FontWeight.w600, + height: 2, + ), + createTextSpan( + 'When a user clicks on a category, expand or open a new page it to show a list of sub-categories or articles under that section. e.g., under "Using Features", we should see articles like:\n\n', + fontWeight: FontWeight.w400, + ), + createTextSpan( + '1.How to use the Dashboard.\n2.Managing Notifications.\n3.Customizing Preferences.', + height: 1.7, + ), + + createTextSpan( + '\n\nGetting Started with FCSC App', + fontSize: 17, + color:tColor, + fontWeight: FontWeight.w500, + ), + ]), + QuestionAnswerScrollView(), + + ExpandableRichText( + maxLines: 5, + textSpans: [ + createTextSpan( + 'What to Do if Your Register is Pending Approval?\n', + fontSize: 20, + fontWeight: FontWeight.w500, + color: tColor, + ), + createTextSpan( + fontWeight: FontWeight.w400, + 'When you register for the FCSC App, your account may require approval from an administrator before you can start using the app. Follow this guide to understand the process and how to check your registration status.\n', + ), + createTextSpan( + 'Step 1\n', + fontSize: 17, + fontWeight: FontWeight.w600, + color: tColor, + height: 2, + ), + createTextSpan( + 'Complete Your Registration', + fontWeight: FontWeight.w500, + color:tColor, + spacingBottom: 2, + height: 0.8 + ), + createTextSpan( + + fontWeight: FontWeight.w400, + height: 1.4, + spacingBottom: 2, + '1.After entering your details during the registration process, you will receive a confirmation message indicating that your registration has been submitted.\n' + '2.Your registration will be in a "Pending Approval" state until an administrator reviews and approves your request.', + ), + createTextSpan( + 'Step 2\n', + fontSize: 16, + fontWeight: FontWeight.w600, + color:tColor, + height: 2, + ), + createTextSpan( + 'What Happens During Admin Approval?', + spacingBottom: 2, + height: 0.8, + color: tColor, + ), + createTextSpan('1.The administrator will review your details to ensure they meet the necessary criteria\n2.This process typically takes [X amount of time]. You will be notified via email once your registration is approved.\n3.You may receive an email asking for additional information or clarifications if needed.\n\n', + fontWeight: FontWeight.w400, + ), + createTextSpan( + 'Step 3\n', + fontSize: 17, + fontWeight: FontWeight.w600, + color: tColor, + height: 2, + ), + + createTextSpan( + 'How to Check Your Registration Status?', + spacingBottom: 2, + height: 0.8, + color: tColor, + ), + + createTextSpan('1. While waiting for approval, you can check the status of your registration by following these steps:\n', + fontWeight: FontWeight.w400, + ), + + createTextSpan( + ' • Login to the FCSC App: ', + spacingTop: 1, + height: 0.7, + color: tColor, + ), + createTextSpan( + 'Even while your registration is pending, you can still log in using your email and password.', + fontWeight: FontWeight.w400, + ), + createTextSpan( + ' • View Your Dashboard: ', + spacingTop: 2, + height: 0.5, + color: tColor, + ), createTextSpan( + 'Once logged in, you will see a message on your dashboard indicating that your account is still under review. This message will look like: Your registration is pending admin approval. You will be notified once your account is approved', + fontWeight: FontWeight.w400, + ), createTextSpan( + ' • Notifications: ', + spacingTop: 2, + height: 0.5, + color: tColor, + ), createTextSpan( + 'Keep an eye on your email inbox. You will receive a notification when your account is approved and ready for use.\n\n', + fontWeight: FontWeight.w400, + ), + + createTextSpan( + 'Step 4\n', + fontSize: 16, + fontWeight: FontWeight.w600, + color:tColor, + height: 2, + ), + + createTextSpan( + 'What Happens After Approval?', + spacingBottom: 2, + height: 0.8, + color: tColor, + ), + createTextSpan('1.Once your registration is approved, you will receive an email notification confirming your account activation.\n2. You can then log in and access all the features of the FCSC App without any restrictions.\n\n', + fontWeight: FontWeight.w400, + ), + createTextSpan( + 'Step 5\n', + fontSize: 16, + fontWeight: FontWeight.w600, + color:tColor, + height: 2, + ), + + createTextSpan( + "Still Haven't Heard Back?", + spacingBottom: 2, + height: 0.8, + color: tColor, + ), + + + createTextSpan( + '1.If you haven’t received approval after the expected time, you can contact FCSC Support by clicking [Support Link] or sending an email to [support@fcsc.gov.ae].\n2. Provide your registration details and ask for an update on your approval status.\n', + fontWeight: FontWeight.w400, + ), + + ], + ), + buildRichText([ + createTextSpan( + 'For more information please visit ', + color:tColor, + fontSize: 16, + ), + createTextSpan( + 'www.fcsc.gov.ae ', + color: const Color(0xFF568898), + fontSize: 16, + textDecoration: TextDecoration.underline, + ), + ]), + 10.verticalSpace, + Center( child: fcscBanner,), + 50.verticalSpace, + ], + ), + ), + ), + + ), + ); + } +} + +//Question and Answer +class QuestionAnswerScrollView extends StatelessWidget { + QuestionAnswerScrollView({super.key}); + + final List> questionsAndAnswers = [ + {'question': '1. How to Create an Account', 'answer': 'Learn how to register for an account on the FCSC App in a few simple steps.'}, + {'question': '2. Exploring the FCSC Dashboard', 'answer': 'Get a detailed guide on the main sections of the home page, including dashboard features.'}, + {'question': '3. What to Do If Your Registration is Pending Approval', 'answer': 'Understand the approval process and how to check if your registration has been approved by the admin.'}, + {'question':'4. Overview of Key Features in FCSC','answer':'Discover the essential features you can use within the FCSC App to enhance your experience.'} + ]; + + @override + Widget build(BuildContext context) { + return SingleChildScrollView( + child: Column( + children: questionsAndAnswers.map((qa) => QuestionAnswerCard(qa: qa)).toList(), + ), + ); + } +} + +class QuestionAnswerCard extends StatefulWidget { + final Map qa; + const QuestionAnswerCard({required this.qa}); + + @override + _QuestionAnswerCardState createState() => _QuestionAnswerCardState(); +} + +class _QuestionAnswerCardState extends State { + bool isExpanded = false; + + @override + Widget build(BuildContext context) { + return Card( + color: Colors.transparent, + elevation: 0, + margin: EdgeInsets.zero, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + ListTile( + dense: true, + textColor: Color(0xFF265E84), + title: Text( + widget.qa['question']!, + style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15), + ), + trailing: Icon(isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down), + onTap: () { + setState(() { + isExpanded = !isExpanded; + }); + }, + ), + if (isExpanded) + Padding( + padding: EdgeInsets.only(bottom: 2), + child: Text( + widget.qa['answer']!, + style: TextStyle(color: Colors.black54), + ), + ), + ], + ), + ); + } +} \ No newline at end of file diff --git a/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/textRich.dart b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/textRich.dart new file mode 100644 index 00000000..aefcc5d2 --- /dev/null +++ b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/textRich.dart @@ -0,0 +1,110 @@ +import 'package:flutter/material.dart'; + +class ExpandableRichText extends StatefulWidget { + final List textSpans; + final int maxLines; + final TextStyle? defaultStyle; + + ExpandableRichText({ + required this.textSpans, + this.maxLines = 0, + this.defaultStyle, + }); + + @override + _ExpandableRichTextState createState() => _ExpandableRichTextState(); +} + +class _ExpandableRichTextState extends State { + bool isExpanded = false; + + @override + Widget build(BuildContext context) { + return LayoutBuilder( + builder: (context, constraints) { + final span = TextSpan( + children: widget.textSpans, + style: widget.defaultStyle, + ); + + final textPainter = TextPainter( + text: span, + maxLines: widget.maxLines, + textDirection: TextDirection.ltr, + ); + + textPainter.layout(maxWidth: constraints.maxWidth); + + final isOverflowing = textPainter.didExceedMaxLines; + + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text.rich( + span, + maxLines: isExpanded ? null : widget.maxLines, + overflow: isExpanded ? null : TextOverflow.ellipsis, + ), + if (isOverflowing) + GestureDetector( + onTap: () { + setState(() { + isExpanded = !isExpanded; + }); + }, + child: Text( + isExpanded ? 'View less' : 'View more', + style: TextStyle( + + color: Color(0xFF265E84), + decoration: TextDecoration.underline, + decorationColor: Color(0xFF265E84), + + ), + ), + ), + ], + ); + }, + ); + } +} + +/// Helper method to build `Text.rich` +Widget buildRichText(List textSpans) { + return Text.rich( + TextSpan(children: textSpans), + textAlign: TextAlign.left, + ); +} + +/// Helper method to create custom `TextSpan` +TextSpan createTextSpan( + String text, { + double? fontSize, + Color color = const Color(0xFF898C81), + FontWeight fontWeight = FontWeight.w500, + double? height, + double defaultFontSize = 14, + TextDecoration textDecoration = TextDecoration.none, + Color? decorationColor, + double spacingTop = 0.0, // Custom top spacing + double spacingBottom = 0.0, + }) { + String spacedText = '${'\n' * spacingTop.toInt()}$text${'\n' * spacingBottom.toInt()}'; + + return TextSpan( + text: spacedText, + style: TextStyle( + fontSize: fontSize ?? defaultFontSize, + color: color, + fontWeight: fontWeight, + height: height, + decoration: textDecoration, + decorationColor: decorationColor ?? color, + ), + ); + +} + + diff --git a/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/user_guide.dart b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/user_guide.dart new file mode 100644 index 00000000..cd9ed57a --- /dev/null +++ b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/user_guide.dart @@ -0,0 +1,168 @@ +import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; +import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.dart'; +class UserGuide extends StatefulWidget { + const UserGuide({super.key}); + + @override + State createState() => _UserGuideState(); +} + +class _UserGuideState extends State { + @override + Widget build(BuildContext context) { + + List createRows(List>> items) { + return items.map((pair) { + return Padding( + padding: const EdgeInsets.only(bottom: 20), // Add space between rows + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: pair.map((item) { + return userGuides( + color: item['color'] as Color, + text: item['text'] as String, + dynamicIcon: item['icon'], + no: item['index'] as String, + routePath:item['routePath']as String, + ); + }).toList(), + ), + ); + }).toList(); + } + + return BaseScaffold( + title: Text('User Guide'), + body: SingleChildScrollView( + child: Container( + color: Colors.grey[300], // Grey background for content + padding: const EdgeInsets.all(16.0), // Padding around content + child: Column( + children: createRows([ + // Each pair defines a row of (Color, Text) pairs + [ + {'routePath':'features','color': Color(0xFF90B0D5), 'text': 'Getting Started', 'icon': 'START', 'index': '1'}, + {'routePath':'features','color': Color(0xFF497B8C), 'text': 'Account & Profile', 'icon': Icons.person_outline_rounded, 'index': '2'}, + ], + [ + {'routePath':'features','color': Color(0xFFAA8E83), 'text': 'Using Features', 'icon': Icons.stars_outlined, 'index': '3'}, + {'routePath':'features','color': Color(0xFF265E84), 'text': 'Troubleshooting', 'icon': Icons.troubleshoot_outlined, 'index': '4'}, + ], + [ + {'routePath':'features','color': Color(0xFF7296BE), 'text': 'FAQs', 'icon': Icons.question_answer_sharp, 'index': '5'}, + {'routePath':'features','color': Color(0xFF7DAFBC), 'text': 'Advanced Settings', 'icon': Icons.settings_outlined, 'index': '6'}, + ], + ]), + ), + ), + ), ); + } +} + +class userGuides extends StatelessWidget { + + const userGuides({super.key, required this.routePath ,required this.color, required this.text,required this.dynamicIcon,required this.no}); + final Color color; + final String text; + final dynamic dynamicIcon; + final String no; + final String routePath; + + + Widget buildDynamicWidget(dynamic icons) { + if (dynamicIcon is IconData) { + + return Icon( + icons, + size: 38, + color: Colors.white, + ); + } else if (dynamicIcon is String) { + // Create a Text widget if variable is a String + return Text( + icons, + style: TextStyle( + fontWeight: FontWeight.w600, + fontSize: 20, + color: Colors.white, + ), + ); + } else { + // Handle unsupported types + return Text( + 'Unsupported type', + style: TextStyle(color: Colors.red), + ); + } + } + + + @override + Widget build(BuildContext context) { + return InkWell( + onTap: (){ + context.push('/user-guide/$routePath'); + }, + child: Container( + padding: EdgeInsets.symmetric(horizontal: 4), + height: 115, + width: 148, + margin: EdgeInsets.all(1), + decoration: BoxDecoration( + color: color, + borderRadius: BorderRadius.circular(10), + ), + alignment: Alignment.center, + child: Stack( + children: [Column( + mainAxisAlignment: MainAxisAlignment.center, // Align icon and text in the center + children: [ + // Icon( + // size:38, + // icons, // Home icon + // color: Colors.white, + // ), + buildDynamicWidget(dynamicIcon), + + SizedBox(width: 10,height: 15,), // Space between icon and text + Container( + width: double.infinity, + padding: EdgeInsets.symmetric(horizontal: 4, vertical: 4), // Padding inside the text background + decoration: BoxDecoration( + color: Colors.white, // Background color for text + borderRadius: BorderRadius.circular(5), // Rounded corners for text background + ), + child: Text( + text, + style: TextStyle( + color: color, // Text color + fontWeight: FontWeight.bold, + ), + textAlign: TextAlign.center, + ), + ), + ], + ), + 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, + ), + ), + ), + ),], + ) + ), + ); + } +} + diff --git a/lib/presentation/routes/drawer_routes/custom_drawer_routes.dart b/lib/presentation/routes/drawer_routes/custom_drawer_routes.dart index ba1d5bd7..1e220431 100644 --- a/lib/presentation/routes/drawer_routes/custom_drawer_routes.dart +++ b/lib/presentation/routes/drawer_routes/custom_drawer_routes.dart @@ -25,7 +25,7 @@ class BaseScaffold extends StatelessWidget { return Scaffold( appBar: AppBar(title: title, actions: [ IconButton(onPressed: () {}, icon: Icon(Icons.toggle_off_outlined)), - ]), + ],), drawer: Drawer( child: ListView( children: [ @@ -39,19 +39,19 @@ class BaseScaffold extends StatelessWidget { SizedBox( width: mywidth / 8, child: Image( - image: AssetImage('assets/logos/fcsc.png'))), + image: AssetImage('assets/logos/fcsc.png'),),), ], ), Divider(), InkWell( - onTap: () => context.go('/editProfile'), + onTap: () => context.go('/profile'), child: Row( children: [ SizedBox( width: mywidth / 8, child: Image( image: AssetImage( - 'assets/edit_profile/profile.png'))), + 'assets/edit_profile/profile.png',),),), SizedBox( width: mywidth / 20, ), @@ -59,12 +59,12 @@ class BaseScaffold extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ Text('Mohammad'), - Text('Mohammad@fcsc.com') + Text('Mohammad@fcsc.com'), ], - ) + ), ], ), - ) + ), ], ), ), @@ -73,10 +73,20 @@ class BaseScaffold extends StatelessWidget { height: myheight / 15, width: mywidth / 15, child: Image( - image: AssetImage('assets/icons/drawer/message.png'))), + image: AssetImage('assets/icons/drawer/message.png'),),), title: Text('Feedback'), onTap: () => context.go('/feedback'), ), + //user Guide + ListTile( + leading: SizedBox( + height: myheight / 15, + width: mywidth / 15, + child: Image( + image: AssetImage('assets/icons/drawer/book.png'),),), + title: Text('User Guide'), + onTap: () => context.go('/user-guide'), + ), ListTile( leading: SizedBox( height: myheight / 15,