diff --git a/android/gradle.properties b/android/gradle.properties index 598d13f..ffc5c2e 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -1,3 +1,4 @@ org.gradle.jvmargs=-Xmx4G android.useAndroidX=true android.enableJetifier=true +extra-gen-snapshot-options=--obfuscate \ No newline at end of file diff --git a/assets/images/settings_screen/svg/contact_icon.svg b/assets/images/settings_screen/svg/contact_icon.svg new file mode 100644 index 0000000..383fe1a --- /dev/null +++ b/assets/images/settings_screen/svg/contact_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/settings_screen/svg/faq_icon.svg b/assets/images/settings_screen/svg/faq_icon.svg new file mode 100644 index 0000000..8045600 --- /dev/null +++ b/assets/images/settings_screen/svg/faq_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/settings_screen/svg/language_icon.svg b/assets/images/settings_screen/svg/language_icon.svg new file mode 100644 index 0000000..f0ade74 --- /dev/null +++ b/assets/images/settings_screen/svg/language_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/settings_screen/svg/privacy_icon.svg b/assets/images/settings_screen/svg/privacy_icon.svg new file mode 100644 index 0000000..490d02c --- /dev/null +++ b/assets/images/settings_screen/svg/privacy_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/settings_screen/svg/reset_password_icon.svg b/assets/images/settings_screen/svg/reset_password_icon.svg new file mode 100644 index 0000000..9cb8064 --- /dev/null +++ b/assets/images/settings_screen/svg/reset_password_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/settings_screen/svg/reset_pin_icon.svg b/assets/images/settings_screen/svg/reset_pin_icon.svg new file mode 100644 index 0000000..a55a4ea --- /dev/null +++ b/assets/images/settings_screen/svg/reset_pin_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/settings_screen/svg/upgrade_icon.svg b/assets/images/settings_screen/svg/upgrade_icon.svg new file mode 100644 index 0000000..ba76cd0 --- /dev/null +++ b/assets/images/settings_screen/svg/upgrade_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/lib/core/styles/app_color.dart b/lib/core/styles/app_color.dart index 3f22566..77111b6 100644 --- a/lib/core/styles/app_color.dart +++ b/lib/core/styles/app_color.dart @@ -66,7 +66,10 @@ class AppColor { static const Color unselectedItemColor = Color(0xFF676767); //Academy Color - static const Color academyCardBgColor = Color(0xFFF8F8F8); static const Color academyCardTextColor = Color(0xFFD8D8D8); + + //KYC Card Color + static const Color kycCardTextColor = Color(0xFF074A23); + static const Color kycCardBgColor = Color(0x7F074A23); } diff --git a/lib/core/styles/app_images.dart b/lib/core/styles/app_images.dart index c6a70fc..eb94337 100644 --- a/lib/core/styles/app_images.dart +++ b/lib/core/styles/app_images.dart @@ -76,4 +76,18 @@ class AppImages { static const String videoIcon = 'assets/images/academy_screen/video.png'; static const String videoPlayIcon = 'assets/images/academy_screen/play_arrow.png'; + + //Settings + static const String upgradeIcon = + 'assets/images/settings_screen/svg/upgrade_icon.svg'; + static const String faqIcon = + 'assets/images/settings_screen/svg/upgrade_icon.svg'; + static const String languageIcon = + 'assets/images/settings_screen/svg/upgrade_icon.svg'; + static const String privacyIcon = + 'assets/images/settings_screen/svg/upgrade_icon.svg'; + static const String resetPasswordIcon = + 'assets/images/settings_screen/svg/upgrade_icon.svg'; + static const String resetPinIcon = + 'assets/images/settings_screen/svg/upgrade_icon.svg'; } diff --git a/lib/core/styles/app_text.dart b/lib/core/styles/app_text.dart index 730d709..7702c29 100644 --- a/lib/core/styles/app_text.dart +++ b/lib/core/styles/app_text.dart @@ -130,4 +130,24 @@ class AppText { //Wallet static const String walletTitle = "Wallet balance"; + + //Settings + static const String settingsText = "Settings"; + static const String experiencedInvestorText = "Experienced investor?"; + static const String upgradeText = + "Upgrade your investor status today in a few simple steps to allows investments higher than SAR 200,000"; + static const String generalText = "General"; + static const String notificationsText = "Notifications"; + static const String languageText = "Language"; + static const String englishText = "English"; + static const String privacySettingsText = "Privacy Settings"; + static const String biometricText = "Biometric ID"; + static const String resetPasswordText = "Reset Password"; + static const String resetPinCodeText = "Reset PIN-code"; + static const String contactAdminText = "Contact Admin"; + static const String privacyPolicyText = "Privacy Policy"; + static const String termsAndConditionText = "Terms & Conditions"; + static const String faqText = "FAQ"; + static const String logoutText = "Log Out"; + static const String deleteAccountText = "Delete account"; } diff --git a/lib/features/MainScreens/Academy/presentation/widgets/academy_detail_section.dart b/lib/features/MainScreens/Academy/presentation/widgets/academy_detail_section.dart index 7b3818a..ac1376c 100644 --- a/lib/features/MainScreens/Academy/presentation/widgets/academy_detail_section.dart +++ b/lib/features/MainScreens/Academy/presentation/widgets/academy_detail_section.dart @@ -1,7 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:gap/gap.dart'; -import 'package:google_fonts/google_fonts.dart'; import 'package:tanami_app/core/styles/app_color.dart'; import 'package:tanami_app/core/styles/app_images.dart'; import 'package:tanami_app/core/styles/app_text.dart'; diff --git a/lib/features/MainScreens/Settings/presentation/pages/settingsScreen.dart b/lib/features/MainScreens/Settings/presentation/pages/settingsScreen.dart deleted file mode 100644 index 1eff811..0000000 --- a/lib/features/MainScreens/Settings/presentation/pages/settingsScreen.dart +++ /dev/null @@ -1,17 +0,0 @@ -import 'package:flutter/material.dart'; - -class SettingsScreen extends StatefulWidget { - const SettingsScreen({super.key}); - - @override - State createState() => _SettingsScreenState(); -} - -class _SettingsScreenState extends State { - @override - Widget build(BuildContext context) { - return const Scaffold( - body: Text('Settings'), - ); - } -} diff --git a/lib/features/MainScreens/Settings/presentation/pages/settings_layout.dart b/lib/features/MainScreens/Settings/presentation/pages/settings_layout.dart new file mode 100644 index 0000000..9f4f429 --- /dev/null +++ b/lib/features/MainScreens/Settings/presentation/pages/settings_layout.dart @@ -0,0 +1,25 @@ +import 'package:flutter/material.dart'; +import 'package:gap/gap.dart'; + +import '../widgets/kyc_card.dart'; + +class SettingsLayout extends StatelessWidget { + const SettingsLayout({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 16, + ), + child: ListView( + children: [ + const Gap(10), + kycCard(), + ], + ), + ), + ); + } +} diff --git a/lib/features/MainScreens/Settings/presentation/pages/settings_screen.dart b/lib/features/MainScreens/Settings/presentation/pages/settings_screen.dart new file mode 100644 index 0000000..dc4984f --- /dev/null +++ b/lib/features/MainScreens/Settings/presentation/pages/settings_screen.dart @@ -0,0 +1,33 @@ +import 'package:flutter/material.dart'; +import 'package:tanami_app/features/MainScreens/Settings/presentation/pages/settings_layout.dart'; + +import '../../../../../core/styles/app_color.dart'; +import '../../../../../core/styles/app_text.dart'; +import '../../../../../shared/components/text_widget.dart'; + +class SettingsScreen extends StatefulWidget { + const SettingsScreen({super.key}); + + @override + State createState() => _SettingsScreenState(); +} + +class _SettingsScreenState extends State { + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + // backgroundColor: Colors.white, + elevation: 0, + scrolledUnderElevation: 0, + automaticallyImplyLeading: false, + centerTitle: true, + title: TextWidget().text22W700( + AppText.settingsText, + clr: AppColor.charcoalColor, + ), + titleSpacing: 16, + ), + body: const SettingsLayout()); + } +} diff --git a/lib/features/MainScreens/Settings/presentation/widgets/kyc_card.dart b/lib/features/MainScreens/Settings/presentation/widgets/kyc_card.dart new file mode 100644 index 0000000..b72f599 --- /dev/null +++ b/lib/features/MainScreens/Settings/presentation/widgets/kyc_card.dart @@ -0,0 +1,65 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:gap/gap.dart'; +import 'package:tanami_app/core/styles/app_color.dart'; +import 'package:tanami_app/core/styles/app_images.dart'; +import 'package:tanami_app/core/styles/app_text.dart'; +import 'package:tanami_app/shared/components/text_widget.dart'; + +Widget kycCard() { + return Container( + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), + decoration: ShapeDecoration( + color: const Color(0xFFD9EDE0), + shape: RoundedRectangleBorder( + side: const BorderSide( + width: 1, + color: AppColor.kycCardBgColor, + ), + borderRadius: BorderRadius.circular(22), + ), + shadows: const [ + BoxShadow( + color: Color(0x33066123), + blurRadius: 8, + offset: Offset(-3, -3), + spreadRadius: 0, + ), + BoxShadow( + color: Color(0x26122F1A), + blurRadius: 8, + offset: Offset(3, 3), + spreadRadius: 0, + ) + ], + ), + child: Row( + children: [ + SvgPicture.asset( + AppImages.upgradeIcon, + ), + const Gap(8), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TextWidget().text14W600( + AppText.experiencedInvestorText, + clr: AppColor.kycCardTextColor, + ), + TextWidget().text11W500( + AppText.upgradeText, + clr: AppColor.kycCardTextColor, + ), + ], + ), + ), + const Gap(8), + const Icon( + Icons.arrow_forward_ios_rounded, + color: AppColor.kycCardTextColor, + ) + ], + ), + ); +} diff --git a/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart b/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart index be6b9f8..ab98630 100644 --- a/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart +++ b/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; -import 'package:flutter/widgets.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:tanami_app/core/styles/app_text.dart'; @@ -14,7 +13,6 @@ class WalletScreen extends StatefulWidget { class _WalletScreenState extends State { @override Widget build(BuildContext context) { - return Scaffold( backgroundColor: Colors.white, body: CustomScrollView( @@ -117,7 +115,7 @@ class _WalletScreenState extends State { ), ], ), - VerticalDivider( + const VerticalDivider( color: Colors.black, width: 20.0, ), @@ -157,7 +155,6 @@ class _WalletScreenState extends State { ), ], ), - ); } } diff --git a/lib/features/MainScreens/main_screen.dart b/lib/features/MainScreens/main_screen.dart index 75432c9..3189a75 100644 --- a/lib/features/MainScreens/main_screen.dart +++ b/lib/features/MainScreens/main_screen.dart @@ -3,7 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:tanami_app/features/MainScreens/Academy/presentation/pages/academy_screen.dart'; import 'package:tanami_app/features/MainScreens/Invest/presentation/pages/investScreen.dart'; import 'package:tanami_app/features/MainScreens/Portfolio/presentation/pages/portfolio_screen.dart'; -import 'package:tanami_app/features/MainScreens/Settings/presentation/pages/settingsScreen.dart'; +import 'package:tanami_app/features/MainScreens/Settings/presentation/pages/settings_Screen.dart'; import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/walletScreen.dart'; import 'package:tanami_app/shared/components/common_bottom_navigation.dart'; diff --git a/lib/shared/components/bloc/toggle/toggle_bloc.dart b/lib/shared/components/bloc/toggle/toggle_bloc.dart new file mode 100644 index 0000000..c7b0342 --- /dev/null +++ b/lib/shared/components/bloc/toggle/toggle_bloc.dart @@ -0,0 +1,19 @@ +// Bloc +import 'package:bloc/bloc.dart'; + +import 'toggle_event.dart'; +import 'toggle_state.dart'; + +class ToggleBloc extends Bloc { + ToggleBloc() : super(ToggleInitial()); + + Stream mapEventToState(ToggleEvent event) async* { + if (event is ToggleSwitch) { + if (state is ToggleOn) { + yield ToggleOff(); + } else { + yield ToggleOn(); + } + } + } +} diff --git a/lib/shared/components/bloc/toggle/toggle_event.dart b/lib/shared/components/bloc/toggle/toggle_event.dart new file mode 100644 index 0000000..375f8ab --- /dev/null +++ b/lib/shared/components/bloc/toggle/toggle_event.dart @@ -0,0 +1,9 @@ +// Events +import 'package:equatable/equatable.dart'; + +abstract class ToggleEvent extends Equatable { + const ToggleEvent(); + + @override + List get props => []; +} diff --git a/lib/shared/components/bloc/toggle/toggle_state.dart b/lib/shared/components/bloc/toggle/toggle_state.dart new file mode 100644 index 0000000..15b5e76 --- /dev/null +++ b/lib/shared/components/bloc/toggle/toggle_state.dart @@ -0,0 +1,19 @@ +import 'package:equatable/equatable.dart'; + +import 'toggle_event.dart'; + +class ToggleSwitch extends ToggleEvent {} + +// States +abstract class ToggleState extends Equatable { + const ToggleState(); + + @override + List get props => []; +} + +class ToggleInitial extends ToggleState {} + +class ToggleOn extends ToggleState {} + +class ToggleOff extends ToggleState {} diff --git a/lib/shared/components/text_widget.dart b/lib/shared/components/text_widget.dart index d364cdf..8f95d99 100644 --- a/lib/shared/components/text_widget.dart +++ b/lib/shared/components/text_widget.dart @@ -12,7 +12,7 @@ class TextWidget { color: clr ?? AppColor.plainWhite)); } - Widget text11W500(String text, {Color? clr}) { + Widget text11W500(String text, {Color? clr}) { return Text(text, style: GoogleFonts.dmSans( fontSize: 11, @@ -89,6 +89,21 @@ class TextWidget { color: clr ?? AppColor.plainWhite)); } + Widget text14W600( + String text, { + Color? clr, + TextDecoration? textDecoration, + TextAlign? txtAlign, + }) { + return Text(text, + textAlign: txtAlign ?? TextAlign.center, + style: GoogleFonts.dmSans( + fontSize: 14, + fontWeight: FontWeight.w600, + decoration: textDecoration ?? TextDecoration.none, + color: clr ?? AppColor.plainWhite)); + } + Widget text14W700(String text, {Color? clr, TextDecoration? textDecoration, TextAlign? txtAlign}) { return Text(text, diff --git a/lib/shared/components/toggle_widget.dart b/lib/shared/components/toggle_widget.dart new file mode 100644 index 0000000..6082f6f --- /dev/null +++ b/lib/shared/components/toggle_widget.dart @@ -0,0 +1,55 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; + +import 'bloc/toggle/toggle_bloc.dart'; +import 'bloc/toggle/toggle_state.dart'; + +class CustomToggle extends StatelessWidget { + const CustomToggle({super.key}); + + @override + Widget build(BuildContext context) { + return BlocBuilder( + builder: (context, state) { + bool isOn = state is ToggleOn; + + return GestureDetector( + onTap: () { + context.read().add(ToggleSwitch()); + }, + child: AnimatedContainer( + duration: const Duration(milliseconds: 200), + width: 50.0, + height: 30.0, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15.0), + color: isOn ? Colors.green : Colors.grey, + ), + child: Stack( + children: [ + AnimatedPositioned( + duration: const Duration(milliseconds: 200), + curve: Curves.easeIn, + left: isOn ? 20.0 : 0.0, + right: isOn ? 0.0 : 20.0, + child: AnimatedSwitcher( + duration: const Duration(milliseconds: 200), + transitionBuilder: + (Widget child, Animation animation) { + return ScaleTransition(scale: animation, child: child); + }, + child: isOn + ? Icon(Icons.check_circle, + color: Colors.white, size: 30.0, key: UniqueKey()) + : Icon(Icons.remove_circle_outline, + color: Colors.white, size: 30.0, key: UniqueKey()), + ), + ), + ], + ), + ), + ); + }, + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index dedb1bd..5dfe525 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -109,3 +109,6 @@ flutter: - assets/images/biometric_screen/svg/ - assets/images/dialog/ - assets/images/dialog/svg/ + - assets/images/settings_screen/ + - assets/images/settings_screen/png/ + - assets/images/settings_screen/svg/