nugrohob825/cims_apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: widget overflow

Browse Source
This commit is contained in:
Dian Bayu Nugroho 2024-02-20 15:22:05 +07:00
parent dfb947dce5
commit e510aaefd7
3 changed files with 184 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

276
lib/features/dashboard/dashboard_account/view/homepage/homepage_view.dart
View File

@ -7,7 +7,6 @@ import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart'; import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.dart'; import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/auth/registration/view/initial_registration_step.dart'; import 'package:cims_apps/features/auth/registration/view/initial_registration_step.dart';
import 'package:cims_apps/features/auth/registration/view/registration_view.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/invest_type/invest_type_view.dart'; import 'package:cims_apps/features/dashboard/dashboard_account/view/invest_type/invest_type_view.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -50,14 +49,22 @@ class _HomeViewState extends State<HomeView> {
InvestType('Sharia', PathAssets.iconPortofolioSharia) InvestType('Sharia', PathAssets.iconPortofolioSharia)
]; ];
StepVerification listStepVerification = StepVerification(0, [ StepVerification listStepVerification =
'Registration', 'Verification', 'Complete' StepVerification(0, ['Registration', 'Verification', 'Complete']);
]);
List<Article> listArticle = [ List<Article> listArticle = [
Article('Education', 'Menggali Potensi Pasar: Analisis Sebelum Memulai Investasi', PathAssets.imgArticles), Article(
Article('News', 'Tren Investasi 2024: Peluang dan Risiko yang Perlu Diketahui', PathAssets.imgArticles), 'Education',
Article('Education', 'Investasi Berkelanjutan: Mengenal Portofolio Hijau untuk Masa Depan', PathAssets.imgArticles), 'Menggali Potensi Pasar: Analisis Sebelum Memulai Investasi',
PathAssets.imgArticles),
Article(
'News',
'Tren Investasi 2024: Peluang dan Risiko yang Perlu Diketahui',
PathAssets.imgArticles),
Article(
'Education',
'Investasi Berkelanjutan: Mengenal Portofolio Hijau untuk Masa Depan',
PathAssets.imgArticles),
]; ];
@override @override
@ -85,22 +92,17 @@ class _HomeViewState extends State<HomeView> {
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontSize: 20, fontSize: 20,
fontWeight: FontWeight.w700 fontWeight: FontWeight.w700),
),
), ),
ElevatedButton( ElevatedButton(
onPressed: () { onPressed: () {},
},
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(0), padding: const EdgeInsets.all(0),
backgroundColor: Colors.white, backgroundColor: Colors.white,
foregroundColor: const Color(0xff2563EB), foregroundColor: const Color(0xff2563EB),
elevation: 0, elevation: 0,
shape: const CircleBorder() shape: const CircleBorder()),
), child: const Icon(Icons.notifications_outlined))
child: const Icon(Icons.notifications_outlined)
)
], ],
), ),
), ),
@ -148,7 +150,8 @@ class _HomeViewState extends State<HomeView> {
children: [ children: [
Row( Row(
children: [ children: [
const Text('Portofolio Value', style: TextStyle(color: Colors.white)), const Text('Portofolio Value',
style: TextStyle(color: Colors.white)),
const SizedBox( const SizedBox(
width: 12, width: 12,
), ),
@ -158,8 +161,11 @@ class _HomeViewState extends State<HomeView> {
seePortofolioValue = !seePortofolioValue; seePortofolioValue = !seePortofolioValue;
}); });
}, },
child: const Icon(Icons.visibility_outlined, color: Color(0xff93C5FD)) child: Icon(
) seePortofolioValue
? Icons.visibility_off_outlined
: Icons.visibility_outlined,
color: const Color(0xff93C5FD)))
], ],
), ),
const SizedBox( const SizedBox(
@ -170,24 +176,28 @@ class _HomeViewState extends State<HomeView> {
AnimatedCrossFade( AnimatedCrossFade(
duration: const Duration(milliseconds: 300), duration: const Duration(milliseconds: 300),
alignment: Alignment.center, alignment: Alignment.center,
crossFadeState: seePortofolioValue ? CrossFadeState.showSecond : CrossFadeState.showFirst, crossFadeState: seePortofolioValue
? CrossFadeState.showSecond
: CrossFadeState.showFirst,
firstChild: RichText( firstChild: RichText(
text: const TextSpan( text: const TextSpan(
text: 'Rp ', text: 'Rp ',
style: TextStyle(fontSize: 32, color: Color(0xff93C5FD), fontFamily: 'Manrope',), style: TextStyle(
fontSize: 32,
color: Color(0xff93C5FD),
fontFamily: 'Manrope',
),
children: [ children: [
TextSpan( TextSpan(
text: '22.500.000', text: '22.500.000',
style: TextStyle( style: TextStyle(
fontSize: 32, fontSize: 32,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.white, color: Colors.white,
fontFamily: 'Manrope', fontFamily: 'Manrope',
), ),
) )
] ])),
)
),
secondChild: Padding( secondChild: Padding(
padding: const EdgeInsets.symmetric(vertical: 16), padding: const EdgeInsets.symmetric(vertical: 16),
child: Wrap( child: Wrap(
@ -197,7 +207,8 @@ class _HomeViewState extends State<HomeView> {
Container( Container(
width: 12, width: 12,
height: 12, height: 12,
decoration: const BoxDecoration(color: Colors.white, shape: BoxShape.circle), decoration: const BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
), ),
], ],
), ),
@ -219,14 +230,12 @@ class _HomeViewState extends State<HomeView> {
BoxShadow( BoxShadow(
spreadRadius: 2, spreadRadius: 2,
blurRadius: 4, blurRadius: 4,
color: const Color(0xff1E293B).withOpacity(0.04) color: const Color(0xff1E293B).withOpacity(0.04))
) ]),
]
),
child: Wrap( child: Wrap(
spacing: 10, spacing: 10,
children: listPortofolioType.asMap().entries.map((e) { children: listPortofolioType.asMap().entries.map((e) {
return GestureDetector( return GestureDetector(
onTap: () { onTap: () {
routePush(context, page: InvestTypeView(title: e.value.name)); routePush(context, page: InvestTypeView(title: e.value.name));
}, },
@ -235,7 +244,11 @@ class _HomeViewState extends State<HomeView> {
width: SizeConfig.width * .18, width: SizeConfig.width * .18,
child: Column( child: Column(
children: [ children: [
ImageView(image: e.value.iconImage, height: SizeConfig.width * .12, width: SizeConfig.width * .12,), ImageView(
image: e.value.iconImage,
height: SizeConfig.width * .12,
width: SizeConfig.width * .12,
),
const SizedBox( const SizedBox(
height: 8, height: 8,
), ),
@ -244,9 +257,7 @@ class _HomeViewState extends State<HomeView> {
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: const TextStyle( style: const TextStyle(
fontSize: 12, fontSize: 12, fontWeight: FontWeight.w600),
fontWeight: FontWeight.w600
),
) )
], ],
), ),
@ -271,21 +282,22 @@ class _HomeViewState extends State<HomeView> {
const SizedBox( const SizedBox(
height: 24, height: 24,
), ),
if(listStepVerification.currentStep == 1)...[ if (listStepVerification.currentStep == 1) ...[
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
const Row( const Row(
children: [ children: [
Icon(Icons.verified, size: 18,), Icon(
Icons.verified,
size: 18,
),
SizedBox( SizedBox(
width: 12, width: 12,
), ),
Text( Text(
'Verified by PT Gemilang', 'Verified by PT Gemilang',
style: TextStyle( style: TextStyle(color: ColorPalette.slate500),
color: ColorPalette.slate500
),
) )
], ],
), ),
@ -294,9 +306,9 @@ class _HomeViewState extends State<HomeView> {
height: 16, height: 16,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
border: Border.all(color: const Color(0xffCBD5E1), width: 1.5), border: Border.all(
shape: BoxShape.circle color: const Color(0xffCBD5E1), width: 1.5),
), shape: BoxShape.circle),
) )
], ],
), ),
@ -309,15 +321,16 @@ class _HomeViewState extends State<HomeView> {
const Row( const Row(
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
children: [ children: [
Icon(Icons.verified, size: 18,), Icon(
Icons.verified,
size: 18,
),
SizedBox( SizedBox(
width: 12, width: 12,
), ),
Text( Text(
'Verified by KSEI', 'Verified by KSEI',
style: TextStyle( style: TextStyle(color: ColorPalette.slate500),
color: ColorPalette.slate500
),
) )
], ],
), ),
@ -326,9 +339,9 @@ class _HomeViewState extends State<HomeView> {
height: 16, height: 16,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
border: Border.all(color: const Color(0xffCBD5E1), width: 1.5), border: Border.all(
shape: BoxShape.circle color: const Color(0xffCBD5E1), width: 1.5),
), shape: BoxShape.circle),
) )
], ],
), ),
@ -339,15 +352,12 @@ class _HomeViewState extends State<HomeView> {
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: ColorPalette.blue50, color: ColorPalette.blue50,
borderRadius: BorderRadius.circular(12) borderRadius: BorderRadius.circular(12)),
),
child: const Column( child: const Column(
children: [ children: [
Text( Text(
'Your registration is currently being verified by PT Gemilang', 'Your registration is currently being verified by PT Gemilang',
style: TextStyle( style: TextStyle(color: ColorPalette.slate500),
color: ColorPalette.slate500
),
), ),
SizedBox( SizedBox(
height: 16, height: 16,
@ -355,37 +365,32 @@ class _HomeViewState extends State<HomeView> {
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text('Estimated:', Text(
style: TextStyle( 'Estimated:',
color: ColorPalette.slate500 style: TextStyle(color: ColorPalette.slate500),
),
), ),
Text( Text(
'January 30 2024', 'January 30 2024',
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: Color(0xff1E293B) color: Color(0xff1E293B)),
),
) )
], ],
) )
], ],
), ),
) )
]else if(listStepVerification.currentStep == 0)...[ ] else if (listStepVerification.currentStep == 0) ...[
Container( Container(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: ColorPalette.blue50, color: ColorPalette.blue50,
borderRadius: BorderRadius.circular(12) borderRadius: BorderRadius.circular(12)),
),
child: Column( child: Column(
children: [ children: [
Text( Text(
"Let's start registering your data to start mutual fund investment at PT Gemilang Indonesia", "Let's start registering your data to start mutual fund investment at PT Gemilang Indonesia",
style: TextStyle( style: TextStyle(color: ColorPalette.slate500),
color: ColorPalette.slate500
),
), ),
SizedBox( SizedBox(
height: 16, height: 16,
@ -416,11 +421,15 @@ class _HomeViewState extends State<HomeView> {
return Row( return Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
if(e.key != 0) if (e.key != 0)
SizedBox( SizedBox(
width: 30, width: 30,
height: 30, height: 30,
child: Divider(color: listStepVerification.currentStep >= e.key ? const Color(0xff2563EB) : const Color(0xffCBD5E1),), child: Divider(
color: listStepVerification.currentStep >= e.key
? const Color(0xff2563EB)
: const Color(0xffCBD5E1),
),
), ),
Column( Column(
children: [ children: [
@ -429,18 +438,31 @@ class _HomeViewState extends State<HomeView> {
height: 30, height: 30,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
color: listStepVerification.currentStep <= e.key ? Colors.white : const Color(0xff2563EB), color: listStepVerification.currentStep <= e.key
? Colors.white
: const Color(0xff2563EB),
border: Border.all( border: Border.all(
color: listStepVerification.currentStep < e.key ? const Color(0xffCBD5E1) : const Color(0xff2563EB), color: listStepVerification.currentStep < e.key
width: 2 ? const Color(0xffCBD5E1)
) : const Color(0xff2563EB),
), width: 2)),
child: listStepVerification.currentStep <= e.key ? const SizedBox() : const Icon(Icons.done_rounded, color: Colors.white,), child: listStepVerification.currentStep <= e.key
? const SizedBox()
: const Icon(
Icons.done_rounded,
color: Colors.white,
),
), ),
const SizedBox( const SizedBox(
height: 8, height: 8,
), ),
Text(e.value, style: TextStyle(color: listStepVerification.currentStep == e.key ? const Color(0xff2563EB) : Colors.black),) Text(
e.value,
style: TextStyle(
color: listStepVerification.currentStep == e.key
? const Color(0xff2563EB)
: Colors.black),
)
], ],
), ),
], ],
@ -455,15 +477,22 @@ class _HomeViewState extends State<HomeView> {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const TextTitle(title: 'Info and Special Promo', color: ColorPalette.slate800,), const TextTitle(
title: 'Info and Special Promo',
color: ColorPalette.slate800,
),
const SizedBox( const SizedBox(
height: 16, height: 16,
), ),
CarouselSlider( CarouselSlider(
items: [1,2,3].map((e) { items: [1, 2, 3].map((e) {
return Padding( return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8), padding: const EdgeInsets.symmetric(horizontal: 8),
child: ImageView(image: PathAssets.imgCarousel, height: 150, width: SizeConfig.width * .9,), child: ImageView(
image: PathAssets.imgCarousel,
height: 150,
width: SizeConfig.width * .9,
),
); );
}).toList(), }).toList(),
options: CarouselOptions( options: CarouselOptions(
@ -493,14 +522,13 @@ class _HomeViewState extends State<HomeView> {
children: [ children: [
const TextTitle(title: 'Article', color: ColorPalette.slate800), const TextTitle(title: 'Article', color: ColorPalette.slate800),
GestureDetector( GestureDetector(
onTap: () { onTap: () {},
child: const Text(
}, 'See More',
child: const Text('See More',
style: TextStyle( style: TextStyle(
color: ColorPalette.primary, color: ColorPalette.primary,
fontWeight: FontWeight.bold fontWeight: FontWeight.bold),
),), ),
) )
], ],
), ),
@ -511,10 +539,12 @@ class _HomeViewState extends State<HomeView> {
...listArticle.asMap().entries.map((e) { ...listArticle.asMap().entries.map((e) {
return Column( return Column(
children: [ children: [
if(e.key != 0)...[ if (e.key != 0) ...[
const Padding( const Padding(
padding: EdgeInsets.symmetric(vertical: 12), padding: EdgeInsets.symmetric(vertical: 12),
child: Divider(color: ColorPalette.slate200,), child: Divider(
color: ColorPalette.slate200,
),
) )
], ],
cardArticle(e.value), cardArticle(e.value),
@ -531,39 +561,43 @@ class _HomeViewState extends State<HomeView> {
padding: const EdgeInsets.symmetric(horizontal: 24), padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row( child: Row(
children: [ children: [
ImageView(image: PathAssets.imgArticles, width: SizeConfig.width * .17, height: SizeConfig.height * .08, borderRadius: 8,), ImageView(
image: PathAssets.imgArticles,
width: SizeConfig.width * .17,
height: SizeConfig.height * .08,
borderRadius: 8,
),
const SizedBox( const SizedBox(
width: 16, width: 16,
), ),
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text(article.title, Text(
style: const TextStyle( article.title,
fontWeight: FontWeight.bold, style: const TextStyle(
), fontWeight: FontWeight.bold,
), ),
const SizedBox( ),
height: 8, const SizedBox(
), height: 8,
Container( ),
padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12), Container(
decoration: BoxDecoration( padding:
const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30), borderRadius: BorderRadius.circular(30),
color: ColorPalette.green100 color: ColorPalette.green100),
), child: Text(
child: Text( article.type,
article.type, style: TextStyle(
style: TextStyle(
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: ColorPalette.green500 color: ColorPalette.green500),
),
),
), ),
], ),
) ],
) ))
], ],
), ),
); );

51
lib/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart
View File

@ -1,5 +1,3 @@
import 'dart:math';
import 'package:cims_apps/application/assets/path_assets.dart'; import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/image/image_view.dart'; import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart'; import 'package:cims_apps/application/theme/color_palette.dart';
@ -70,7 +68,7 @@ class _PortofolioViewState extends State<PortofolioView> {
), ),
const Center( const Center(
child: Text( child: Text(
'Portofolio', 'Portfolio',
style: TextStyle( style: TextStyle(
fontSize: 20, fontSize: 20,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
@ -125,20 +123,22 @@ class _PortofolioViewState extends State<PortofolioView> {
), ),
Column( Column(
children: [ children: [
const Text('Total Mutual Fund', const Text(
'Total Mutual Fund',
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
fontSize: 18, fontSize: 18,
color: ColorPalette.slate400 color: ColorPalette.slate400),
),
), ),
Text(listInvestmentType.map((e) => e.mutualFunds).reduce((value, element) => value + element).toString(), Text(
style: const TextStyle( listInvestmentType
fontSize: 44, .map((e) => e.mutualFunds)
fontWeight: FontWeight.w700 .reduce(
) (value, element) => value + element)
) .toString(),
, style: const TextStyle(
fontSize: 44,
fontWeight: FontWeight.w700)),
], ],
) )
]), ]),
@ -168,7 +168,7 @@ class _PortofolioViewState extends State<PortofolioView> {
children: [ children: [
Row( Row(
children: [ children: [
const Text('Portofolio Value', const Text('Portfolio Value',
style: TextStyle(color: Colors.white)), style: TextStyle(color: Colors.white)),
const SizedBox( const SizedBox(
width: 8, width: 8,
@ -179,8 +179,11 @@ class _PortofolioViewState extends State<PortofolioView> {
seePortofolioValue = !seePortofolioValue; seePortofolioValue = !seePortofolioValue;
}); });
}, },
child: const Icon(Icons.visibility_outlined, child: Icon(
color: Color(0xff93C5FD))) seePortofolioValue
? Icons.visibility_off_outlined
: Icons.visibility_outlined,
color: const Color(0xff93C5FD)))
], ],
), ),
const SizedBox( const SizedBox(
@ -197,7 +200,10 @@ class _PortofolioViewState extends State<PortofolioView> {
firstChild: RichText( firstChild: RichText(
text: const TextSpan( text: const TextSpan(
text: 'Rp ', text: 'Rp ',
style: TextStyle(fontSize: 32, color: Color(0xff93C5FD), fontFamily: 'Manrope'), style: TextStyle(
fontSize: 32,
color: Color(0xff93C5FD),
fontFamily: 'Manrope'),
children: [ children: [
TextSpan( TextSpan(
text: '22.500.000', text: '22.500.000',
@ -205,8 +211,7 @@ class _PortofolioViewState extends State<PortofolioView> {
fontSize: 32, fontSize: 32,
fontFamily: 'Manrope', fontFamily: 'Manrope',
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.white color: Colors.white),
),
) )
])), ])),
secondChild: Padding( secondChild: Padding(
@ -276,8 +281,8 @@ class _PortofolioViewState extends State<PortofolioView> {
width: 58, width: 58,
alignment: Alignment.center, alignment: Alignment.center,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
color: bgContentColor[e.key], color: bgContentColor[e.key],
), ),
child: Text( child: Text(
'${e.value.value}%', '${e.value.value}%',

4
lib/features/dashboard/dashboard_public/view/dashboard_public_view.dart
View File

@ -6,7 +6,6 @@ import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.dart'; import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/auth/login/view/login_view.dart'; import 'package:cims_apps/features/auth/login/view/login_view.dart';
import 'package:cims_apps/features/auth/registration/view/registration_view.dart'; import 'package:cims_apps/features/auth/registration/view/registration_view.dart';
import 'package:cims_apps/features/bottom_navigation_view.dart';
import 'package:cims_apps/features/dashboard/dashboard_public/viewmodel/dashboard_public_viewmodel.dart'; import 'package:cims_apps/features/dashboard/dashboard_public/viewmodel/dashboard_public_viewmodel.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@ -103,8 +102,7 @@ class DashboardPublicView extends StatelessWidget {
width: 26, width: 26,
), ),
onPressed: () { onPressed: () {
// provider.loginGoogle(context); provider.loginGoogle(context);
routePush(context, page: const BottomNavigationView());
}, },
), ),
Row( Row(