forgot password screen, portoflio screen ui code reformating
This commit is contained in:
BIN
assets/images/wallet_screen/bg.png
Normal file
BIN
assets/images/wallet_screen/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
assets/images/wallet_screen/deposit.png
Normal file
BIN
assets/images/wallet_screen/deposit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/images/wallet_screen/withdraw.png
Normal file
BIN
assets/images/wallet_screen/withdraw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@@ -126,4 +126,7 @@ class AppText {
|
||||
"To restore password please enter phone number";
|
||||
static const String createNewPasswordText = "Create new password";
|
||||
static const String submitText = "Submit";
|
||||
|
||||
//Wallet
|
||||
static const String walletTitle = "Wallet balance";
|
||||
}
|
||||
|
||||
@@ -181,7 +181,6 @@ class _AcademyDetailsScreenState extends State<AcademyDetailsScreen> {
|
||||
videos[index],
|
||||
fit: BoxFit.cover,
|
||||
height: 160.h,
|
||||
// alignment: Alignment.topCenter,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -0,0 +1,342 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:tanami_app/core/routes/route_name.dart';
|
||||
import 'package:tanami_app/core/routes/routes.dart';
|
||||
import 'package:tanami_app/core/styles/app_text.dart';
|
||||
|
||||
class PortfolioScreen extends StatefulWidget {
|
||||
const PortfolioScreen({super.key});
|
||||
|
||||
@override
|
||||
State<PortfolioScreen> createState() => _PortfolioScreenState();
|
||||
}
|
||||
|
||||
class _PortfolioScreenState extends State<PortfolioScreen> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
SliverAppBar(
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 0,
|
||||
expandedHeight: 230.0,
|
||||
automaticallyImplyLeading: false,
|
||||
snap: false,
|
||||
pinned: true,
|
||||
floating: false,
|
||||
flexibleSpace: LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
var top = constraints.biggest.height;
|
||||
var percentage =
|
||||
((top - kToolbarHeight) / (200.0 - kToolbarHeight))
|
||||
.clamp(0.0, 1.0);
|
||||
var opacity = (1 - percentage).clamp(0.0, 1.0);
|
||||
return FlexibleSpaceBar(
|
||||
// centerTitle: true,
|
||||
titlePadding:
|
||||
const EdgeInsets.only(left: 30, top: 0, bottom: 15),
|
||||
title: Opacity(
|
||||
opacity: opacity,
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
AppText.portfolio,
|
||||
style: GoogleFonts.dmSans(
|
||||
color: const Color(0xFF888888),
|
||||
fontSize: 12.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'SAR 178,000',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: Colors.black,
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
background: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
Image.asset(
|
||||
'assets/images/portfolio_screen/bg.png', // Replace with your image asset
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 40.0),
|
||||
child: Opacity(
|
||||
opacity: percentage,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
AppText.portfolio,
|
||||
style: GoogleFonts.dmSans(
|
||||
color: const Color(0xFFC9D9CB),
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: 8.h,
|
||||
),
|
||||
Text(
|
||||
'SAR 178,000',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: Colors.white,
|
||||
fontSize: 28.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}),
|
||||
backgroundColor: Colors.white,
|
||||
),
|
||||
SliverList(
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) => Padding(
|
||||
padding: const EdgeInsets.all(10.0),
|
||||
child: GestureDetector(
|
||||
onTap: () {
|
||||
goRouter.pushNamed(RouteName.porfolioDetails);
|
||||
},
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
|
||||
borderRadius: const BorderRadius.all(Radius.circular(20.0)),
|
||||
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.15),
|
||||
spreadRadius: 2,
|
||||
blurRadius: 10,
|
||||
offset:
|
||||
const Offset(0, 3), // changes position of shadow
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 20.0, vertical: 16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
Image.asset(
|
||||
(index == 2)
|
||||
? 'assets/images/portfolio_screen/clock_off.png'
|
||||
: 'assets/images/portfolio_screen/clock.png',
|
||||
height: 25.sp,
|
||||
),
|
||||
SizedBox(
|
||||
width: 5.w,
|
||||
),
|
||||
Text(
|
||||
'Mar 01 2024',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: const Color(0xFF004717),
|
||||
fontSize: 12.sp,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
(index == 2) ? 'Exited' : 'Pending',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: (index == 2)
|
||||
? const Color(0xFF8D8D8D)
|
||||
: const Color(0xFF0FA4A4),
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
SizedBox(
|
||||
height: 8.h,
|
||||
),
|
||||
Text(
|
||||
(index == 2)
|
||||
? 'Real Estate III'
|
||||
: 'Private equity portfolio I',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: Colors.black,
|
||||
fontSize: 17.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Container(
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFFF8F8F8),
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomLeft: Radius.circular(20.0),
|
||||
bottomRight: Radius.circular(20.0),
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 20.0, vertical: 16.0),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
AppText.investmentamount,
|
||||
style: GoogleFonts.dmSans(
|
||||
color: (index == 2)
|
||||
? const Color(0xFF8D8D8D)
|
||||
: const Color(0xFF535353),
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
'SAR 100,000',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: (index == 2)
|
||||
? const Color(0xFF8D8D8D)
|
||||
: Colors.black,
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
' \$ 26,700',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: (index == 2)
|
||||
? const Color(0xFF8D8D8D)
|
||||
: Colors.black,
|
||||
fontSize: 11.sp,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
SizedBox(
|
||||
height: 8.h,
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
AppText.currentval,
|
||||
style: GoogleFonts.dmSans(
|
||||
color: (index == 2)
|
||||
? const Color(0xFF8D8D8D)
|
||||
: const Color(0xFF535353),
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
'SAR 100,000',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: (index == 2)
|
||||
? const Color(0xFF8D8D8D)
|
||||
: Colors.black,
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
' \$ 26,700',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: (index == 2)
|
||||
? const Color(0xFF8D8D8D)
|
||||
: Colors.black,
|
||||
fontSize: 11.sp,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
SizedBox(
|
||||
height: 8.h,
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
AppText.totalreturn,
|
||||
style: GoogleFonts.dmSans(
|
||||
color: (index == 2)
|
||||
? const Color(0xFF8D8D8D)
|
||||
: const Color(0xFF535353),
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
(index == 2) ? '- 20.0%' : '+ 20.0%',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: (index == 2)
|
||||
? const Color(0xFFde9595)
|
||||
: const Color(0xFF066123),
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
childCount: 3,
|
||||
), //SliverChildBuildDelegate
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,8 @@
|
||||
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';
|
||||
|
||||
class WalletScreen extends StatefulWidget {
|
||||
const WalletScreen({super.key});
|
||||
@@ -10,8 +14,150 @@ class WalletScreen extends StatefulWidget {
|
||||
class _WalletScreenState extends State<WalletScreen> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const Scaffold(
|
||||
body: Text('Wallet'),
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
SliverAppBar(
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 0,
|
||||
expandedHeight: 230.0,
|
||||
automaticallyImplyLeading: false,
|
||||
snap: false,
|
||||
pinned: true,
|
||||
floating: false,
|
||||
flexibleSpace: LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
return FlexibleSpaceBar(
|
||||
titlePadding:
|
||||
const EdgeInsets.only(left: 30, top: 0, bottom: 15),
|
||||
background: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
Image.asset(
|
||||
'assets/images/wallet_screen/bg.png', // Replace with your image asset
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 40.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
AppText.walletTitle,
|
||||
style: GoogleFonts.dmSans(
|
||||
color: const Color(0xFF343434),
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: 4.h,
|
||||
),
|
||||
Text(
|
||||
'SAR 178,000',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: const Color(0xFF191B1E),
|
||||
fontSize: 28.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}),
|
||||
backgroundColor: Colors.white,
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 18.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Center(
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey.withOpacity(0.2),
|
||||
borderRadius:
|
||||
const BorderRadius.all(Radius.circular(20.0)),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 40.0, vertical: 10.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
Column(
|
||||
children: [
|
||||
Container(
|
||||
decoration: const BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Colors.black,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Image.asset(
|
||||
'assets/images/wallet_screen/deposit.png',
|
||||
height: 20.h,
|
||||
),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'Deposit',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: const Color(0xFF363636),
|
||||
fontSize: 12.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
VerticalDivider(
|
||||
color: Colors.black,
|
||||
width: 20.0,
|
||||
),
|
||||
Column(
|
||||
children: [
|
||||
Container(
|
||||
decoration: const BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Colors.black,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Image.asset(
|
||||
'assets/images/wallet_screen/withdraw.png',
|
||||
height: 20.h,
|
||||
),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'Withdraw',
|
||||
style: GoogleFonts.dmSans(
|
||||
color: const Color(0xFF363636),
|
||||
fontSize: 12.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,6 +103,7 @@ flutter:
|
||||
- assets/images/bottom_bar/inactive/
|
||||
- assets/images/portfolio_screen/
|
||||
- assets/images/academy_screen/
|
||||
- assets/images/wallet_screen/
|
||||
- assets/images/biometric_screen/
|
||||
- assets/images/biometric_screen/png/
|
||||
- assets/images/biometric_screen/svg/
|
||||
|
||||
Reference in New Issue
Block a user