fix: widget overflow
This commit is contained in:
@@ -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),
|
||||
))
|
||||
],
|
||||
))
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user