settings screen ui

This commit is contained in:
jayesh
2024-06-06 11:05:45 +05:30
parent dfbe426010
commit d8daf3bf90
24 changed files with 322 additions and 25 deletions

View File

@@ -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);
}

View File

@@ -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';
}

View File

@@ -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";
}

View File

@@ -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';

View File

@@ -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'),
);
}
}

View File

@@ -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(),
],
),
),
);
}
}

View File

@@ -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());
}
}

View File

@@ -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,
)
],
),
);
}

View File

@@ -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> {
),
],
),
);
}
}

View File

@@ -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';

View 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();
}
}
}
}

View File

@@ -0,0 +1,9 @@
// Events
import 'package:equatable/equatable.dart';
abstract class ToggleEvent extends Equatable {
const ToggleEvent();
@override
List<Object> get props => [];
}

View 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 {}

View File

@@ -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,

View 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()),
),
),
],
),
),
);
},
);
}
}