fix: widget overflow

This commit is contained in:
2024-02-20 15:14:25 +07:00
parent 9761dc369c
commit dfb947dce5
3 changed files with 323 additions and 268 deletions

View File

@@ -24,160 +24,163 @@ class _TotalPaymentViewState extends State<TotalPaymentView> {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16)
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.all(24.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('Your Investment Today',
style: TextStyle(
color: ColorPalette.slate800,
fontWeight: FontWeight.w600,
fontSize: 16
),
),
GestureDetector(
onTap: () => Navigator.pop(context),
child: const Icon(Icons.close_rounded)
)
],
),
),
...widget.listProduct.asMap().entries.map((e) {
return Container(
padding: const EdgeInsets.only(left: 16, right: 24, bottom: 16, top: 16),
decoration: BoxDecoration(
border: Border(
left: BorderSide(
width: 8,
color: ColorPalette.investTypeColor[e.value.type]!
)
)
),
return SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.all(24.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 5,
child: Text(e.value.name ?? '',
style: const TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600,
fontSize: 16
),
)
const Text(
'Your Investment Today',
style: TextStyle(
color: ColorPalette.slate800,
fontWeight: FontWeight.w600,
fontSize: 16),
),
Expanded(
flex: 7,
child: Text(
NumberFormatter.numberCurrency(widget.totalInvest * e.value.totalPercent!, 'Rp ', 'id_ID'),
textAlign: TextAlign.end,
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 18,
color: ColorPalette.slate800
),
)
GestureDetector(
onTap: () => Navigator.pop(context),
child: const Icon(Icons.close_rounded))
],
),
),
...widget.listProduct.asMap().entries.map((e) {
return Container(
padding: const EdgeInsets.only(
left: 16, right: 24, bottom: 16, top: 16),
decoration: BoxDecoration(
border: Border(
left: BorderSide(
width: 8,
color:
ColorPalette.investTypeColor[e.value.type]!))),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 5,
child: Text(
e.value.name ?? '',
style: const TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600,
fontSize: 16),
)),
Expanded(
flex: 7,
child: Text(
NumberFormatter.numberCurrency(
widget.totalInvest * e.value.totalPercent!,
'Rp ',
'id_ID'),
textAlign: TextAlign.end,
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 18,
color: ColorPalette.slate800),
))
],
),
);
}).toList(),
const SizedBox(height: 16),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Purchase Commission',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600,
fontSize: 16),
),
Text(
'Free',
style: TextStyle(
color: ColorPalette.primary,
fontSize: 18,
fontWeight: FontWeight.w700),
)
],
),
);
}).toList(),
const SizedBox(height: 16),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Purchase Commission',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600,
fontSize: 16
),
),
Text('Free',
style: TextStyle(
color: ColorPalette.primary,
fontSize: 18,
fontWeight: FontWeight.w700
),
)
],
),
),
const SizedBox(height: 16,),
Container(
color: ColorPalette.slate200.withOpacity(0.5),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('Total',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600,
fontSize: 16
),
),
Text(NumberFormatter.numberCurrency(widget.totalInvest, 'Rp ', 'id_ID'),
textAlign: TextAlign.end,
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 18,
color: ColorPalette.slate800
),
)
],
const SizedBox(
height: 16,
),
),
buttonAgreement(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('Total Payment',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600,
fontSize: 16
Container(
color: ColorPalette.slate200.withOpacity(0.5),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Total',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600,
fontSize: 16),
),
),
Text(NumberFormatter.numberCurrency(widget.totalInvest, 'Rp ', 'id_ID'),
textAlign: TextAlign.end,
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 18,
color: ColorPalette.slate800
),
)
],
Text(
NumberFormatter.numberCurrency(
widget.totalInvest, 'Rp ', 'id_ID'),
textAlign: TextAlign.end,
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 18,
color: ColorPalette.slate800),
)
],
),
),
),
ButtonView(
disabled: !isAgreement,
name: 'Subscribe Now',
onPressed: () {
routePush(context, page: PaymentMethodView(
totalInvest: widget.totalInvest,
));
},
disabledBgColor: ColorPalette.slate200.withOpacity(0.5),
textColor: isAgreement ? Colors.white : ColorPalette.slate400,
textWeight: FontWeight.w700,
textSize: 20,
backgroundColor: ColorPalette.primary,
)
],
buttonAgreement(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Total Payment',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600,
fontSize: 16),
),
Text(
NumberFormatter.numberCurrency(
widget.totalInvest, 'Rp ', 'id_ID'),
textAlign: TextAlign.end,
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 18,
color: ColorPalette.slate800),
)
],
),
),
ButtonView(
disabled: !isAgreement,
name: 'Subscribe Now',
onPressed: () {
routePush(context,
page: PaymentMethodView(
totalInvest: widget.totalInvest,
));
},
disabledBgColor: ColorPalette.slate200.withOpacity(0.5),
textColor: isAgreement ? Colors.white : ColorPalette.slate400,
textWeight: FontWeight.w700,
textSize: 20,
backgroundColor: ColorPalette.primary,
)
],
),
),
);
}
@@ -205,50 +208,48 @@ class _TotalPaymentViewState extends State<TotalPaymentView> {
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: isAgree ? ColorPalette.primary : ColorPalette.slate200
)
),
color: isAgree
? ColorPalette.primary
: ColorPalette.slate200)),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
child: Container(
decoration: BoxDecoration(
color: isAgree ? ColorPalette.primary : ColorPalette.white,
shape: BoxShape.circle
),
color:
isAgree ? ColorPalette.primary : ColorPalette.white,
shape: BoxShape.circle),
),
),
),
),
const SizedBox(width: 12,),
const SizedBox(
width: 12,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('I agree to buy the mutual fund on this page and have read and agreed to all the contents of the Prospectus and summary information and understand the risks of my investment decision.',
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'I agree to buy the mutual fund on this page and have read and agreed to all the contents of the Prospectus and summary information and understand the risks of my investment decision.',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: ColorPalette.slate400),
),
GestureDetector(
onTap: () {},
child: const Text(
'Read More',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: ColorPalette.slate400
),
),
GestureDetector(
onTap: () {
},
child: const Text('Read More',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline,
color: ColorPalette.primary
),
)
)
],
)
)
decoration: TextDecoration.underline,
color: ColorPalette.primary),
))
],
))
],
),
);
}
}
}