fix: widget overflow

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

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/utils/size_config.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:flutter/material.dart';
@ -50,14 +49,22 @@ class _HomeViewState extends State<HomeView> {
InvestType('Sharia', PathAssets.iconPortofolioSharia)
];
StepVerification listStepVerification = StepVerification(0, [
'Registration', 'Verification', 'Complete'
]);
StepVerification listStepVerification =
StepVerification(0, ['Registration', 'Verification', 'Complete']);
List<Article> listArticle = [
Article('Education', '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),
Article(
'Education',
'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
@ -85,22 +92,17 @@ class _HomeViewState extends State<HomeView> {
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w700
),
fontWeight: FontWeight.w700),
),
ElevatedButton(
onPressed: () {
},
onPressed: () {},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(0),
backgroundColor: Colors.white,
foregroundColor: const Color(0xff2563EB),
elevation: 0,
shape: const CircleBorder()
),
child: const Icon(Icons.notifications_outlined)
)
shape: const CircleBorder()),
child: const Icon(Icons.notifications_outlined))
],
),
),
@ -148,7 +150,8 @@ class _HomeViewState extends State<HomeView> {
children: [
Row(
children: [
const Text('Portofolio Value', style: TextStyle(color: Colors.white)),
const Text('Portofolio Value',
style: TextStyle(color: Colors.white)),
const SizedBox(
width: 12,
),
@ -158,8 +161,11 @@ class _HomeViewState extends State<HomeView> {
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(
@ -170,11 +176,17 @@ class _HomeViewState extends State<HomeView> {
AnimatedCrossFade(
duration: const Duration(milliseconds: 300),
alignment: Alignment.center,
crossFadeState: seePortofolioValue ? CrossFadeState.showSecond : CrossFadeState.showFirst,
crossFadeState: seePortofolioValue
? CrossFadeState.showSecond
: CrossFadeState.showFirst,
firstChild: RichText(
text: const TextSpan(
text: 'Rp ',
style: TextStyle(fontSize: 32, color: Color(0xff93C5FD), fontFamily: 'Manrope',),
style: TextStyle(
fontSize: 32,
color: Color(0xff93C5FD),
fontFamily: 'Manrope',
),
children: [
TextSpan(
text: '22.500.000',
@ -185,9 +197,7 @@ class _HomeViewState extends State<HomeView> {
fontFamily: 'Manrope',
),
)
]
)
),
])),
secondChild: Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Wrap(
@ -197,7 +207,8 @@ class _HomeViewState extends State<HomeView> {
Container(
width: 12,
height: 12,
decoration: const BoxDecoration(color: Colors.white, shape: BoxShape.circle),
decoration: const BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
),
],
),
@ -219,10 +230,8 @@ class _HomeViewState extends State<HomeView> {
BoxShadow(
spreadRadius: 2,
blurRadius: 4,
color: const Color(0xff1E293B).withOpacity(0.04)
)
]
),
color: const Color(0xff1E293B).withOpacity(0.04))
]),
child: Wrap(
spacing: 10,
children: listPortofolioType.asMap().entries.map((e) {
@ -235,7 +244,11 @@ class _HomeViewState extends State<HomeView> {
width: SizeConfig.width * .18,
child: Column(
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(
height: 8,
),
@ -244,9 +257,7 @@ class _HomeViewState extends State<HomeView> {
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600
),
fontSize: 12, fontWeight: FontWeight.w600),
)
],
),
@ -271,21 +282,22 @@ class _HomeViewState extends State<HomeView> {
const SizedBox(
height: 24,
),
if(listStepVerification.currentStep == 1)...[
if (listStepVerification.currentStep == 1) ...[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Row(
children: [
Icon(Icons.verified, size: 18,),
Icon(
Icons.verified,
size: 18,
),
SizedBox(
width: 12,
),
Text(
'Verified by PT Gemilang',
style: TextStyle(
color: ColorPalette.slate500
),
style: TextStyle(color: ColorPalette.slate500),
)
],
),
@ -294,9 +306,9 @@ class _HomeViewState extends State<HomeView> {
height: 16,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: const Color(0xffCBD5E1), width: 1.5),
shape: BoxShape.circle
),
border: Border.all(
color: const Color(0xffCBD5E1), width: 1.5),
shape: BoxShape.circle),
)
],
),
@ -309,15 +321,16 @@ class _HomeViewState extends State<HomeView> {
const Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Icon(Icons.verified, size: 18,),
Icon(
Icons.verified,
size: 18,
),
SizedBox(
width: 12,
),
Text(
'Verified by KSEI',
style: TextStyle(
color: ColorPalette.slate500
),
style: TextStyle(color: ColorPalette.slate500),
)
],
),
@ -326,9 +339,9 @@ class _HomeViewState extends State<HomeView> {
height: 16,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: const Color(0xffCBD5E1), width: 1.5),
shape: BoxShape.circle
),
border: Border.all(
color: const Color(0xffCBD5E1), width: 1.5),
shape: BoxShape.circle),
)
],
),
@ -339,15 +352,12 @@ class _HomeViewState extends State<HomeView> {
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: ColorPalette.blue50,
borderRadius: BorderRadius.circular(12)
),
borderRadius: BorderRadius.circular(12)),
child: const Column(
children: [
Text(
'Your registration is currently being verified by PT Gemilang',
style: TextStyle(
color: ColorPalette.slate500
),
style: TextStyle(color: ColorPalette.slate500),
),
SizedBox(
height: 16,
@ -355,37 +365,32 @@ class _HomeViewState extends State<HomeView> {
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Estimated:',
style: TextStyle(
color: ColorPalette.slate500
),
Text(
'Estimated:',
style: TextStyle(color: ColorPalette.slate500),
),
Text(
'January 30 2024',
style: TextStyle(
fontWeight: FontWeight.w600,
color: Color(0xff1E293B)
),
color: Color(0xff1E293B)),
)
],
)
],
),
)
]else if(listStepVerification.currentStep == 0)...[
] else if (listStepVerification.currentStep == 0) ...[
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: ColorPalette.blue50,
borderRadius: BorderRadius.circular(12)
),
borderRadius: BorderRadius.circular(12)),
child: Column(
children: [
Text(
"Let's start registering your data to start mutual fund investment at PT Gemilang Indonesia",
style: TextStyle(
color: ColorPalette.slate500
),
style: TextStyle(color: ColorPalette.slate500),
),
SizedBox(
height: 16,
@ -416,11 +421,15 @@ class _HomeViewState extends State<HomeView> {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if(e.key != 0)
if (e.key != 0)
SizedBox(
width: 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(
children: [
@ -429,18 +438,31 @@ class _HomeViewState extends State<HomeView> {
height: 30,
decoration: BoxDecoration(
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(
color: listStepVerification.currentStep < e.key ? const Color(0xffCBD5E1) : const Color(0xff2563EB),
width: 2
)
color: listStepVerification.currentStep < e.key
? 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(
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(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const TextTitle(title: 'Info and Special Promo', color: ColorPalette.slate800,),
const TextTitle(
title: 'Info and Special Promo',
color: ColorPalette.slate800,
),
const SizedBox(
height: 16,
),
CarouselSlider(
items: [1,2,3].map((e) {
items: [1, 2, 3].map((e) {
return Padding(
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(),
options: CarouselOptions(
@ -493,14 +522,13 @@ class _HomeViewState extends State<HomeView> {
children: [
const TextTitle(title: 'Article', color: ColorPalette.slate800),
GestureDetector(
onTap: () {
},
child: const Text('See More',
onTap: () {},
child: const Text(
'See More',
style: TextStyle(
color: ColorPalette.primary,
fontWeight: FontWeight.bold
),),
fontWeight: FontWeight.bold),
),
)
],
),
@ -511,10 +539,12 @@ class _HomeViewState extends State<HomeView> {
...listArticle.asMap().entries.map((e) {
return Column(
children: [
if(e.key != 0)...[
if (e.key != 0) ...[
const Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: Divider(color: ColorPalette.slate200,),
child: Divider(
color: ColorPalette.slate200,
),
)
],
cardArticle(e.value),
@ -531,7 +561,12 @@ class _HomeViewState extends State<HomeView> {
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
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(
width: 16,
),
@ -539,7 +574,8 @@ class _HomeViewState extends State<HomeView> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(article.title,
Text(
article.title,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
@ -548,22 +584,20 @@ class _HomeViewState extends State<HomeView> {
height: 8,
),
Container(
padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
padding:
const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: ColorPalette.green100
),
color: ColorPalette.green100),
child: Text(
article.type,
style: TextStyle(
fontWeight: FontWeight.w600,
color: ColorPalette.green500
),
color: ColorPalette.green500),
),
),
],
)
)
))
],
),
);

View File

@ -1,5 +1,3 @@
import 'dart:math';
import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
@ -70,7 +68,7 @@ class _PortofolioViewState extends State<PortofolioView> {
),
const Center(
child: Text(
'Portofolio',
'Portfolio',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
@ -125,20 +123,22 @@ class _PortofolioViewState extends State<PortofolioView> {
),
Column(
children: [
const Text('Total Mutual Fund',
const Text(
'Total Mutual Fund',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18,
color: ColorPalette.slate400
color: ColorPalette.slate400),
),
),
Text(listInvestmentType.map((e) => e.mutualFunds).reduce((value, element) => value + element).toString(),
Text(
listInvestmentType
.map((e) => e.mutualFunds)
.reduce(
(value, element) => value + element)
.toString(),
style: const TextStyle(
fontSize: 44,
fontWeight: FontWeight.w700
)
)
,
fontWeight: FontWeight.w700)),
],
)
]),
@ -168,7 +168,7 @@ class _PortofolioViewState extends State<PortofolioView> {
children: [
Row(
children: [
const Text('Portofolio Value',
const Text('Portfolio Value',
style: TextStyle(color: Colors.white)),
const SizedBox(
width: 8,
@ -179,8 +179,11 @@ class _PortofolioViewState extends State<PortofolioView> {
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(
@ -197,7 +200,10 @@ class _PortofolioViewState extends State<PortofolioView> {
firstChild: RichText(
text: const TextSpan(
text: 'Rp ',
style: TextStyle(fontSize: 32, color: Color(0xff93C5FD), fontFamily: 'Manrope'),
style: TextStyle(
fontSize: 32,
color: Color(0xff93C5FD),
fontFamily: 'Manrope'),
children: [
TextSpan(
text: '22.500.000',
@ -205,8 +211,7 @@ class _PortofolioViewState extends State<PortofolioView> {
fontSize: 32,
fontFamily: 'Manrope',
fontWeight: FontWeight.bold,
color: Colors.white
),
color: Colors.white),
)
])),
secondChild: Padding(

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/features/auth/login/view/login_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:flutter/material.dart';
import 'package:provider/provider.dart';
@ -103,8 +102,7 @@ class DashboardPublicView extends StatelessWidget {
width: 26,
),
onPressed: () {
// provider.loginGoogle(context);
routePush(context, page: const BottomNavigationView());
provider.loginGoogle(context);
},
),
Row(