From 1c76f19771e6b3f1999a16d989e2692ac880c968 Mon Sep 17 00:00:00 2001 From: Kalonkarthik Date: Tue, 4 Feb 2025 10:25:00 +0530 Subject: [PATCH] userguide and app tour update --- .../Screens/charts/screens/chart_screen.dart | 329 +++++++++----- .../tab_routes/home_route.dart | 412 +++++++++++------- .../Drawer Items/user_guide/faq_page.dart | 140 +++--- .../Drawer Items/user_guide/features.dart | 99 +++-- .../user_guide/getting_started.dart | 134 ++++-- .../Drawer Items/user_guide/user_guide.dart | 112 ++--- .../drawer_routes/custom_drawer_routes.dart | 195 ++++----- 7 files changed, 861 insertions(+), 560 deletions(-) diff --git a/lib/presentation/Screens/charts/screens/chart_screen.dart b/lib/presentation/Screens/charts/screens/chart_screen.dart index 5068cb62..6ed756d6 100644 --- a/lib/presentation/Screens/charts/screens/chart_screen.dart +++ b/lib/presentation/Screens/charts/screens/chart_screen.dart @@ -155,6 +155,7 @@ class _ChartScreen1State extends ConsumerState { identify: 'cardKey', keyTarget: cardKey, shape: ShapeLightFocus.RRect, + radius: 8, paddingFocus: 0, contents: [ createTargetContent( @@ -171,40 +172,46 @@ class _ChartScreen1State extends ConsumerState { child: Stack( children: [ Positioned( - bottom: 35, + bottom: 55, 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, - ), - ), - ), - Column( - children: [ - Text( + 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, + 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, + ), + ), ), - const SizedBox(height: 3), Row( children: [ Container( @@ -272,11 +279,113 @@ class _ChartScreen1State extends ConsumerState { ), ], ), + // 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( identify: 'BookMarkKey', keyTarget: bookMarkKey, shape: ShapeLightFocus.RRect, - paddingFocus: 1, + radius: 8, + paddingFocus: 12, contents: [ createTargetContent( text: AppLocalizations.of(context)!.bookMark, @@ -292,40 +401,45 @@ class _ChartScreen1State extends ConsumerState { child: Stack( children: [ Positioned( - bottom: 35, + bottom: 55, 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, - ), - ), - ), - Column( - children: [ - Text( + 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: 3), + ), + ), + const SizedBox(height: 5), + 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, + ), + ), + ), Row( children: [ Container( @@ -402,6 +516,7 @@ class _ChartScreen1State extends ConsumerState { ]; } + void _initpreviousTargets(){ final double screenWidth= MediaQuery.of(context).size.width; final double screenHeight= MediaQuery.of(context).size.height; @@ -410,6 +525,8 @@ class _ChartScreen1State extends ConsumerState { identify: 'BookMarkKey', keyTarget: bookMarkKey, shape: ShapeLightFocus.RRect, + radius: 8, + paddingFocus: 12, contents: [ createTargetContent( text: AppLocalizations.of(context)!.bookMark, @@ -428,37 +545,43 @@ class _ChartScreen1State extends ConsumerState { bottom: 35, 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, - ), - ), - ), - Column( - children: [ - Text( + 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: 3), + ), + ), + const SizedBox(height: 5), + 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, + ), + ), + ), Row( children: [ Container( @@ -536,6 +659,8 @@ class _ChartScreen1State extends ConsumerState { identify: 'cardKey', keyTarget: cardKey, shape: ShapeLightFocus.RRect, + radius: 8, + paddingFocus: 0, contents: [ createTargetContent( text: AppLocalizations.of(context)!.kpiCards, @@ -551,40 +676,44 @@ class _ChartScreen1State extends ConsumerState { child: Stack( children: [ Positioned( - bottom: 35, + bottom: 55, 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, - ), - ), - ), - Column( - children: [ - Text( + 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: 3), + ),), + const SizedBox(height: 5), + 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, + ), + ), + ), Row( children: [ Container( 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 e308e7e3..908ed504 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 @@ -298,12 +298,14 @@ class EconomyStatsState extends ConsumerState { identify: 'cardTopicKey', keyTarget: cardTopicKey, shape: ShapeLightFocus.RRect, + radius: 8, + paddingFocus: 16, contents: [ createTargetContent( text: AppLocalizations.of(context)!.home_topic, alignment: ContentAlign.bottom, - gap:0, - space: 44, + gap: 0, + space: 43, ), TargetContent( align: ContentAlign.bottom, @@ -313,64 +315,71 @@ class EconomyStatsState extends ConsumerState { 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: 35, + 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(); + }, + ), + ), + ], + ), + ], + ), + ], + ) ), ], ), @@ -392,19 +401,42 @@ class EconomyStatsState extends ConsumerState { ), ), ), + // 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( 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: 44,), - + space: 43,), TargetContent( align: ContentAlign.bottom, child: @@ -417,37 +449,43 @@ class EconomyStatsState extends ConsumerState { 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( @@ -505,6 +543,27 @@ class EconomyStatsState extends ConsumerState { ), ), ), + // 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 { identify: 'cardsKey', keyTarget: cardsKey, shape: ShapeLightFocus.RRect, + radius: 7, + paddingFocus: 6, contents: [ createTargetContent( text:AppLocalizations.of(context)!.economy, alignment: ContentAlign.bottom, gap: 0, - space: 44,), + space: 43,), TargetContent( align: ContentAlign.bottom, child: @@ -535,67 +596,79 @@ class EconomyStatsState extends ConsumerState { 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(); + }, + ), + ), + ], ), ], ), @@ -630,12 +703,14 @@ class EconomyStatsState extends ConsumerState { identify: 'cardTopicKey', keyTarget: cardTopicKey, shape: ShapeLightFocus.RRect, + radius: 8, + paddingFocus: 16, contents: [ createTargetContent( text:AppLocalizations.of(context)!.home_topic, alignment: ContentAlign.bottom, gap: 0, - space: 44, + space: 43, ), TargetContent( align: ContentAlign.bottom, @@ -648,40 +723,45 @@ class EconomyStatsState extends ConsumerState { bottom: 35, left: 16, right: 16, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + child: Column( children: [ - ElevatedButton( - onPressed: () { - handleSkip(); - 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), diff --git a/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/faq_page.dart b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/faq_page.dart index 880584e7..f9aceff7 100644 --- a/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/faq_page.dart +++ b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/faq_page.dart @@ -1,7 +1,12 @@ 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 '../../../../components/indicators/locale_provider.dart'; +import '../../../../components/my_toggle.dart'; + class FAQPage extends StatefulWidget { const FAQPage({super.key}); @@ -12,63 +17,90 @@ class FAQPage extends StatefulWidget { class _FAQPageState extends State { @override Widget build(BuildContext context) { - return BaseScaffold( - title: Text('FAQs', - style: TextStyle( - color:Color(0xFF7296BE), - fontWeight: FontWeight.w500, - ),), - showBackButton: true, - body: SafeArea(child:Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - padding: const EdgeInsets.all(16.0), - width: MediaQuery.of(context).size.width, - child: Text.rich( - TextSpan( - text: 'Here are some common questions about the ', - style: TextStyle( - fontSize: 19, - fontWeight: FontWeight.w600, - color: Colors.grey, + return Scaffold( + appBar: AppBar( + elevation: 3, + shadowColor: Colors.black, + title: Text('Key Features',), + 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, + children: [ + Container + ( + color: Colors.white, + padding: const EdgeInsets.all(16.0), + width: MediaQuery.of(context).size.width, + child: Text.rich( + TextSpan( + text: 'Here are some common questions about the ', + style: TextStyle( + fontSize: 19, + fontWeight: FontWeight.w600, + color: Colors.grey, + ), + children: [ + TextSpan( + text:' Federal Competitiveness and Statistics Centre (FCSC),', + style: TextStyle( + fontSize: 19, + fontWeight: FontWeight.w600, + color: Colors.black87, + ), + ), + TextSpan( + text: 'mobile application:', + style: TextStyle( + fontSize: 19, + fontWeight: FontWeight.w600, + color: Colors.grey, + ), + ), + ], + ), + ), ), - children: [ - TextSpan( - text:' Federal Competitiveness and Statistics Centre (FCSC),', - style: TextStyle( - fontSize: 19, - fontWeight: FontWeight.w600, - color: Colors.black87, - ), - ), - TextSpan( - text: 'mobile application:', - style: TextStyle( - fontSize: 19, - fontWeight: FontWeight.w600, - color: Colors.grey, - ), - ), - ], - ), + Container( + padding: const EdgeInsets.all(0.0), + color: Colors.grey[50], + child: QuestionAnswerScrollView(), + ), + ], ), ), - Expanded(child: Scrollbar( - thumbVisibility: true, - thickness: 8, - radius: Radius.circular(10), - interactive: true, - child:SingleChildScrollView( - child:Container( - padding: const EdgeInsets.all(0.0), - color: Colors.grey[50], - child: QuestionAnswerScrollView(), - ), - ), - ),), - ], - ), + ), + ), ); } 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 index fa8bb66a..0f54ed28 100644 --- a/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/features.dart +++ b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/features.dart @@ -1,8 +1,13 @@ 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/Drawer%20Items/user_guide/custom_text.dart'; +import '../../../../components/indicators/locale_provider.dart'; +import '../../../../components/my_toggle.dart'; + class UsingFeatures extends StatelessWidget { @@ -517,44 +522,74 @@ class UsingFeatures extends StatelessWidget { ]; return - BaseScaffold( title: Text('Key Features', - style: TextStyle( - color: Color(0xFFAA8E83), - ),), - showBackButton: true, - body:SafeArea(child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - padding: const EdgeInsets.all(16.0), - width: MediaQuery.of(context).size.width, - child: Text( - 'FEATURES', - style: TextStyle( - color: Colors.black,// Text color - fontSize: 18, - fontWeight: FontWeight.w500, - ), - ), + Scaffold( + appBar: AppBar( + elevation: 3, + shadowColor: Colors.black, + title: Text('Key Features',), + 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(); + }, + ); + }, ), - Expanded(child: Scrollbar( + ], + + ), + body:SafeArea( + + child: Scrollbar( thumbVisibility: true, thickness: 6, radius: Radius.circular(10), interactive: true, - child: - Container( - color: Colors.grey[50], // Set the background color here - // child: SingleChildScrollView( - child: CustomTextRich( - textSpans: textSpans, - padding: const EdgeInsets.all(16.0), - textAlign: TextAlign.start, + child: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + color: Colors.white, + padding: const EdgeInsets.all(16.0), + width: MediaQuery.of(context).size.width, + child: Text( + 'FEATURES', + style: TextStyle( + color: Colors.black,// Text color + fontSize: 18, + fontWeight: FontWeight.w500, + ), + ), + ), + Container( + color: Colors.grey[50], // Set the background color here + // child: SingleChildScrollView( + child: CustomTextRich( + textSpans: textSpans, + padding: const EdgeInsets.all(16.0), + textAlign: TextAlign.start, + ), + ), + ], ), - ), - ),), - ], - ), ), + ) + ), + ), ); } } diff --git a/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/getting_started.dart b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/getting_started.dart index c4dafe91..a0e575a9 100644 --- a/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/getting_started.dart +++ b/lib/presentation/routes/drawer_routes/Drawer Items/user_guide/getting_started.dart @@ -1,5 +1,7 @@ import 'package:flutter/gestures.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'; @@ -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:url_launcher/url_launcher.dart'; + +import '../../../../components/indicators/locale_provider.dart'; +import '../../../../components/my_toggle.dart'; class GettingStarted extends StatelessWidget { GettingStarted({super.key}); @@ -66,55 +71,90 @@ class GettingStarted extends StatelessWidget { ]; - return BaseScaffold( title: Text('About the App', - style: TextStyle( - color:Color(0xFF265E84), - fontWeight: FontWeight.w500, + return Scaffold( + appBar: AppBar( + elevation: 3, + 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, - body:SafeArea(child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - padding: const EdgeInsets.all(16.0), - width: MediaQuery.of(context).size.width, - child: Text.rich( - TextSpan( - text: 'The', - style: TextStyle( - fontSize: 19, - fontWeight: FontWeight.w600, - color: Colors.grey, - ), - children: [ - TextSpan( - text:' Federal Competitiveness and Statistics Centre (FCSC),', + // title: Text('About the App',), + // showBackButton: true, + body:SafeArea( + child: Scrollbar( + thumbVisibility: true, + thickness: 6, + radius: Radius.circular(10), + interactive: true, + child:SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + color: Colors.white, + padding: const EdgeInsets.all(16.0), + width: MediaQuery.of(context).size.width, + child: Text.rich( + TextSpan( + text: 'The', style: TextStyle( fontSize: 19, fontWeight: FontWeight.w600, - color: Colors.black87, + color: Colors.grey, ), - ), - TextSpan( - text:' in your App is designed to provide registered and approved users with access to accurate and comprehensive statistics about the UAE. The app serves as a centralized platform for exploring key datasets, trends, and insights across various sectors.', - style: TextStyle( - fontSize: 19, - fontWeight: FontWeight.w600, - color: Colors.grey, + children: [ + TextSpan( + text:' Federal Competitiveness and Statistics Centre (FCSC),', + style: TextStyle( + fontSize: 19, + fontWeight: FontWeight.w600, + color: Colors.black87, + ), + ), + TextSpan( + text:' in your App is designed to provide registered and approved users with access to accurate and comprehensive statistics about the UAE. The app serves as a centralized platform for exploring key datasets, trends, and insights across various sectors.', + style: TextStyle( + fontSize: 19, + fontWeight: FontWeight.w600, + color: Colors.grey, + ), + ), + ], ), ), - ], - ), - ), - ), - Expanded(child: Scrollbar( - thumbVisibility: true, - thickness: 6, - radius: Radius.circular(10), - interactive: true, - child: SingleChildScrollView( - child: Column( + ), + + Column( children: [ Container( color: Colors.grey[50], // Set the background color here @@ -169,11 +209,11 @@ class GettingStarted extends StatelessWidget { ), ], ), - ), - - ),), - ], - ), ), + ], + ), + ), + ), + ), ); } } 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 index c4086555..2455932a 100644 --- 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 @@ -15,15 +15,16 @@ class _UserGuideState extends State { List createRows(List>> items) { return items.map((pair) { return Padding( - padding: const EdgeInsets.only(bottom: 20), // Add space between rows + padding: const EdgeInsets.only(bottom: 20), child: Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, + mainAxisAlignment: pair.length == 1 + ? MainAxisAlignment.center + : 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(), @@ -36,17 +37,16 @@ class _UserGuideState extends State { 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':'gettingStarted','color': Color(0xFF90B0D5), 'text': 'Getting Started', 'icon': 'START', 'index': '1'}, - {'routePath':'features','color': Color(0xFFAA8E83), 'text': 'Using Features', 'icon': Icons.stars_outlined, 'index': '2'}, + {'routePath':'gettingStarted','color': Color(0xFF90B0D5), 'text': 'Getting Started', 'icon': 'START',}, + {'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'}, ], ]), @@ -58,21 +58,20 @@ class _UserGuideState extends State { 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 String text; final dynamic dynamicIcon; - final String no; final String routePath; - Widget buildDynamicWidget(dynamic icons) { + Widget buildDynamicWidget(dynamic icons, Color iconColor) { if (dynamicIcon is IconData) { return Icon( icons, size: 38, - color: Colors.white, + color: iconColor, ); } else if (dynamicIcon is String) { // Create a Text widget if variable is a String @@ -81,7 +80,7 @@ class userGuides extends StatelessWidget { style: TextStyle( fontWeight: FontWeight.w600, fontSize: 20, - color: Colors.white, + color: iconColor, ), ); } else { @@ -96,67 +95,52 @@ class userGuides extends StatelessWidget { @override Widget build(BuildContext context) { + final double screenWidth= MediaQuery.of(context).size.width; + final double screenHeight= MediaQuery.of(context).size.height; 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, + padding: EdgeInsets.symmetric(horizontal: 4), + height: 110, + width: screenWidth * 0.40, + margin: EdgeInsets.all(1), + decoration: BoxDecoration( + color: Colors.white, borderRadius: BorderRadius.circular(10), - ), - alignment: Alignment.center, - child: Stack( - children: [Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - // Icon( - // size:38, - // icons, // Home icon - // color: Colors.white, - // ), - buildDynamicWidget(dynamicIcon), + border: Border.all(color: color, + width: 2.0) + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + // Icon( + // size:38, + // icons, // Home icon + // color: Colors.white, + // ), + buildDynamicWidget(dynamicIcon, color), - 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, - ), + SizedBox(width: 10,height: 10,), // Space between icon and text + Container( + width: double.infinity, + padding: EdgeInsets.symmetric(horizontal: 4, vertical: 5), // Padding inside the text background + decoration: BoxDecoration( + color: color, // Background color for text + borderRadius: BorderRadius.circular(5), + ), + child: Text( + text, + style: TextStyle( + color: Colors.white, // 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 14cd5831..9e3702ea 100644 --- a/lib/presentation/routes/drawer_routes/custom_drawer_routes.dart +++ b/lib/presentation/routes/drawer_routes/custom_drawer_routes.dart @@ -124,7 +124,7 @@ class _BaseScaffoldState extends ConsumerState { text: AppLocalizations.of(context)!.tour_navBar, alignment: ContentAlign.top, space: 0, - gap: 100, + gap: 105, ), TargetContent( align: ContentAlign.top, @@ -138,37 +138,43 @@ class _BaseScaffoldState extends ConsumerState { 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, - ), - ), - ), - Column( - children: [ - Text( + 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: 3), + ), + ), + const SizedBox(height: 5), + 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, + ), + ), + ), Row( children: [ Container( @@ -187,7 +193,7 @@ class _BaseScaffoldState extends ConsumerState { .state = true; ref .read(previousChartsTourProvider - .notifier) + .notifier) .state = false; context.go('/chartScreen/hotels?bgColor=0xFF90B0D5&mainTopic=ECONOMY&title=Hotel+Establishments'); }, @@ -220,22 +226,6 @@ class _BaseScaffoldState extends ConsumerState { ), ), ), - 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( @@ -255,45 +245,50 @@ class _BaseScaffoldState extends ConsumerState { align: ContentAlign.bottom, child: SizedBox( width: double.infinity, - height: MediaQuery.of(context).size.height * - 0.80, // Set an appropriate height for the Stack + height: MediaQuery.of(context).size.height * 0.80, child: Stack( children: [ Positioned( 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, - ), - ), - ), - Column( - children: [ - Text( + 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: 3), + ), + ), + const SizedBox(height: 5), + 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, + ), + ), + ), Row( children: [ Container( @@ -339,7 +334,7 @@ class _BaseScaffoldState extends ConsumerState { ), TargetContent( padding: EdgeInsets.only( - right: screenWidth * 0.7, top: toggleHeight - 5), + right: screenWidth * 0.7, top: 30), align: ContentAlign.right, child: Container( width: 200, @@ -392,37 +387,43 @@ class _BaseScaffoldState extends ConsumerState { 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, - ), - ), - ), - Column( - children: [ - Text( + 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: 3), + ), + ), + const SizedBox(height: 5), + 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, + ), + ), + ), Row( children: [ Container( @@ -448,10 +449,10 @@ class _BaseScaffoldState extends ConsumerState { .state = true; ref .read( - previousChartsTourProvider.notifier) + previousChartsTourProvider.notifier) .state = true; ref.read(homeTourProvider.notifier).state = - true; + true; ref .read(previousHomeTourProvider.notifier) .state = true; @@ -460,7 +461,7 @@ class _BaseScaffoldState extends ConsumerState { .state = true; ref .read(previousScaffoldTourProvider - .notifier) + .notifier) .state = true; tutorialCoachMark.finish(); }, @@ -493,7 +494,7 @@ class _BaseScaffoldState extends ConsumerState { ), TargetContent( padding: - EdgeInsets.only(left: screenWidth * 0.7, top: toggleHeight), + EdgeInsets.only(left: screenWidth * 0.7, top: toggleHeight), align: ContentAlign.left, child: Container( width: 200,