settings screen ui
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class SettingsScreen extends StatefulWidget {
|
||||
const SettingsScreen({super.key});
|
||||
|
||||
@override
|
||||
State<SettingsScreen> createState() => _SettingsScreenState();
|
||||
}
|
||||
|
||||
class _SettingsScreenState extends State<SettingsScreen> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const Scaffold(
|
||||
body: Text('Settings'),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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(),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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<SettingsScreen> createState() => _SettingsScreenState();
|
||||
}
|
||||
|
||||
class _SettingsScreenState extends State<SettingsScreen> {
|
||||
@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());
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -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<WalletScreen> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: CustomScrollView(
|
||||
@@ -117,7 +115,7 @@ class _WalletScreenState extends State<WalletScreen> {
|
||||
),
|
||||
],
|
||||
),
|
||||
VerticalDivider(
|
||||
const VerticalDivider(
|
||||
color: Colors.black,
|
||||
width: 20.0,
|
||||
),
|
||||
@@ -157,7 +155,6 @@ class _WalletScreenState extends State<WalletScreen> {
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
19
lib/shared/components/bloc/toggle/toggle_bloc.dart
Normal file
19
lib/shared/components/bloc/toggle/toggle_bloc.dart
Normal file
@@ -0,0 +1,19 @@
|
||||
// Bloc
|
||||
import 'package:bloc/bloc.dart';
|
||||
|
||||
import 'toggle_event.dart';
|
||||
import 'toggle_state.dart';
|
||||
|
||||
class ToggleBloc extends Bloc<ToggleEvent, ToggleState> {
|
||||
ToggleBloc() : super(ToggleInitial());
|
||||
|
||||
Stream<ToggleState> mapEventToState(ToggleEvent event) async* {
|
||||
if (event is ToggleSwitch) {
|
||||
if (state is ToggleOn) {
|
||||
yield ToggleOff();
|
||||
} else {
|
||||
yield ToggleOn();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
9
lib/shared/components/bloc/toggle/toggle_event.dart
Normal file
9
lib/shared/components/bloc/toggle/toggle_event.dart
Normal file
@@ -0,0 +1,9 @@
|
||||
// Events
|
||||
import 'package:equatable/equatable.dart';
|
||||
|
||||
abstract class ToggleEvent extends Equatable {
|
||||
const ToggleEvent();
|
||||
|
||||
@override
|
||||
List<Object> get props => [];
|
||||
}
|
||||
19
lib/shared/components/bloc/toggle/toggle_state.dart
Normal file
19
lib/shared/components/bloc/toggle/toggle_state.dart
Normal file
@@ -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<Object> get props => [];
|
||||
}
|
||||
|
||||
class ToggleInitial extends ToggleState {}
|
||||
|
||||
class ToggleOn extends ToggleState {}
|
||||
|
||||
class ToggleOff extends ToggleState {}
|
||||
@@ -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,
|
||||
|
||||
55
lib/shared/components/toggle_widget.dart
Normal file
55
lib/shared/components/toggle_widget.dart
Normal file
@@ -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<ToggleBloc, ToggleState>(
|
||||
builder: (context, state) {
|
||||
bool isOn = state is ToggleOn;
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
context.read<ToggleBloc>().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<double> 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()),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user