diff --git a/lib/application/component/expandable_widget/expandable_widget.dart b/lib/application/component/expandable_widget/expandable_widget.dart new file mode 100644 index 0000000..0b56609 --- /dev/null +++ b/lib/application/component/expandable_widget/expandable_widget.dart @@ -0,0 +1,119 @@ +import 'package:cims_apps/application/component/expandable_widget/see_more_less_widget.dart'; +import 'package:cims_apps/application/theme/color_palette.dart'; +import 'package:cims_apps/core/utils/size_config.dart'; +import 'package:flutter/material.dart'; + +class ExpandableWidget extends StatelessWidget { + final String? content; + final double? fontSize; + final int maxLinesToShow; + final Alignment? alignmentMore; + final bool? hideTextMore; + final bool? hideIconMore; + + ExpandableWidget({ + super.key, + required this.content, + this.fontSize, + this.maxLinesToShow = 1, + this.alignmentMore, + this.hideTextMore = false, + this.hideIconMore = true, + }); + + ValueNotifier expanded = ValueNotifier(false); + + @override + Widget build(BuildContext context) { + final TextSpan textSpan = TextSpan( + text: content ?? "", + style: TextStyle( + fontSize: fontSize ?? 16.0, + color: ColorPalette.slate400, + ), + ); + + final TextPainter textPainter = TextPainter( + text: textSpan, + maxLines: expanded.value ? null : maxLinesToShow, + textDirection: TextDirection.ltr, + strutStyle: StrutStyle( + fontSize: fontSize ?? 16.0, + ) + ); + + textPainter.layout(maxWidth: SizeConfig.width); + + final int numberOfLines = textPainter.computeLineMetrics().length; + return ValueListenableBuilder( + valueListenable: expanded, + builder: (context, values, _) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + if (!expanded.value && numberOfLines >= maxLinesToShow) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + content ?? "", + maxLines: maxLinesToShow, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontSize: fontSize ?? 16.0, + color: ColorPalette.slate400, + ), + ), + /* See More :: type 1 - See More | 2 - See Less */ + SeeMoreLessWidget( + textData: 'See More', + type: 1, + section: 1, + onSeeMoreLessTap: () { + expanded.value = true; + }, + alignment: alignmentMore, + hideIconMore: hideIconMore!, + hideTextMore: hideTextMore!, + ), + /* See More :: type 1 - See More | 2 - See Less */ + ], + ); + } else { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + content ?? "", + style: TextStyle( + fontSize: fontSize ?? 16.0, + color: ColorPalette.slate400, + ), + ), + if (expanded.value && numberOfLines >= maxLinesToShow) + /* See Less :: type 1 - See More | 2 - See Less */ + SeeMoreLessWidget( + textData: 'See Less', + type: 2, + section: 1, + onSeeMoreLessTap: () { + expanded.value = false; + }, + alignment: alignmentMore, + hideIconMore: hideIconMore!, + hideTextMore: hideTextMore!, + ), + /* See Less :: type 1 - See More | 2 - See Less */ + ], + ); + } + }, + ), + ], + ); + }, + ); + } +} \ No newline at end of file diff --git a/lib/application/component/expandable_widget/see_more_less_widget.dart b/lib/application/component/expandable_widget/see_more_less_widget.dart new file mode 100644 index 0000000..8c0760f --- /dev/null +++ b/lib/application/component/expandable_widget/see_more_less_widget.dart @@ -0,0 +1,74 @@ +import 'package:cims_apps/application/theme/color_palette.dart'; +import 'package:flutter/material.dart'; + +class SeeMoreLessWidget extends StatelessWidget { + final String? textData; + final int? type; /* type 1 - See More | 2 - See Less */ + final Function? onSeeMoreLessTap; + final int? + section; /* 1: About the course | 2 - Who can take up this course? | 3 - Mentors | 4 - Course Video Reviews */ + final Alignment? alignment; + final bool hideTextMore; + final bool hideIconMore; + + const SeeMoreLessWidget({ + super.key, + required this.textData, + required this.type, + required this.onSeeMoreLessTap, + required this.section, + required this.alignment, + required this.hideTextMore, + required this.hideIconMore, + }); + + @override + Widget build(BuildContext context) { + return Align( + alignment: alignment ?? Alignment.centerLeft, + child: InkWell( + onTap: () { + if (onSeeMoreLessTap != null) { + onSeeMoreLessTap!(); + } + }, + child: Text.rich( + softWrap: true, + style: const TextStyle( + color: ColorPalette.primary, + ), + textAlign: TextAlign.start, + TextSpan( + text: "", + children: [ + if(!hideTextMore) + TextSpan( + text: textData, + style: const TextStyle( + color: ColorPalette.primary, + decoration: TextDecoration.underline, + ), + ), + if(!hideTextMore && !hideIconMore) + const WidgetSpan( + child: SizedBox( + width: 3.0, + ), + ), + if(!hideIconMore) + WidgetSpan( + child: Icon( + (type == 1) + ? Icons.keyboard_arrow_down + : Icons.keyboard_arrow_up, + color: ColorPalette.slate300, + size: 28, + ), + ), + ], + ), + ), + ), + ); + } +} \ No newline at end of file diff --git a/lib/application/component/radio_agreement.dart b/lib/application/component/radio_agreement.dart index cecd678..0759255 100644 --- a/lib/application/component/radio_agreement.dart +++ b/lib/application/component/radio_agreement.dart @@ -1,3 +1,4 @@ +import 'package:cims_apps/application/component/expandable_widget/expandable_widget.dart'; import 'package:cims_apps/application/theme/color_palette.dart'; import 'package:flutter/material.dart'; @@ -44,28 +45,11 @@ class RadioAgreement extends StatelessWidget { width: 12, ), Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - desc, - 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), - )) - ], - )) + child: ExpandableWidget( + content: desc, + maxLinesToShow: 3, + ) + ) ], ), ); diff --git a/lib/application/component/risk_profile.dart b/lib/application/component/risk_profile.dart index a2a0cf7..8a94990 100644 --- a/lib/application/component/risk_profile.dart +++ b/lib/application/component/risk_profile.dart @@ -1,4 +1,5 @@ import 'package:cims_apps/application/assets/path_assets.dart'; +import 'package:cims_apps/application/component/expandable_widget/expandable_widget.dart'; import 'package:cims_apps/application/theme/color_palette.dart'; import 'package:cims_apps/core/utils/size_config.dart'; import 'package:cims_apps/features/auth/registration/view/submission_data/risk_profile/risk_profile_view_model/risk_profile_view_model.dart'; @@ -73,20 +74,20 @@ class RiskProfile extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( - padding: EdgeInsets.all(24), + padding: const EdgeInsets.all(24), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( riskProfile.type, - style: TextStyle( + style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 24, color: ColorPalette.white ), ), - SizedBox(height: 16,), - Text('Total Score :', + const SizedBox(height: 16,), + const Text('Total Score :', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 16, @@ -94,7 +95,7 @@ class RiskProfile extends StatelessWidget { ), ), Text('$totalScore', - style: TextStyle( + style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 28, color: ColorPalette.white @@ -107,20 +108,20 @@ class RiskProfile extends StatelessWidget { ), ), ), - SizedBox( + const SizedBox( height: 24, ), - Text( - riskProfile.desc, - style: TextStyle( - color: ColorPalette.slate500, - fontSize: 16 - ) + ExpandableWidget( + content: riskProfile.desc, + hideTextMore: true, + hideIconMore: false, + maxLinesToShow: 4, + alignmentMore: Alignment.center, ), - SizedBox( + const SizedBox( height: 24, ), - Text( + const Text( 'Suitable Product', style: TextStyle( color: ColorPalette.slate800, @@ -128,7 +129,7 @@ class RiskProfile extends StatelessWidget { fontSize: 18 ), ), - SizedBox( + const SizedBox( height: 16, ), rowSuitableProduct ? @@ -137,7 +138,7 @@ class RiskProfile extends StatelessWidget { return Expanded( child: Container( margin: EdgeInsets.only(left: e.key != 0 ? 12 : 0), - padding: EdgeInsets.all(16), + padding: const EdgeInsets.all(16), decoration: BoxDecoration( border: Border.all(color: ColorPalette.slate200), borderRadius: BorderRadius.circular(6) @@ -146,18 +147,18 @@ class RiskProfile extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( - padding: EdgeInsets.all(8), + padding: const EdgeInsets.all(8), decoration: BoxDecoration( shape: BoxShape.circle, color: riskProfile.color.withOpacity(0.1) ), child: Image.asset(e.value['icon'], width: SizeConfig.width * 0.07, color: riskProfile.color) ), - SizedBox( + const SizedBox( height: 12, ), Text(e.value['desc'], - style: TextStyle( + style: const TextStyle( fontSize: 16, fontWeight: FontWeight.bold, color: ColorPalette.slate800 @@ -173,7 +174,7 @@ class RiskProfile extends StatelessWidget { runSpacing: 16, children: riskProfile.suitableProduct.map((e) { return Container( - padding: EdgeInsets.all(16), + padding: const EdgeInsets.all(16), decoration: BoxDecoration( borderRadius: BorderRadius.circular(6), border: Border.all(color: ColorPalette.slate200), @@ -181,7 +182,7 @@ class RiskProfile extends StatelessWidget { child: Row( children: [ Container( - padding: EdgeInsets.all(8), + padding: const EdgeInsets.all(8), alignment: Alignment.center, decoration: BoxDecoration( shape: BoxShape.circle, @@ -189,12 +190,12 @@ class RiskProfile extends StatelessWidget { ), child: Image.asset(e['icon'], width: SizeConfig.width * 0.07, color: riskProfile.color) ), - SizedBox( + const SizedBox( width: 12, ), Expanded( child: Text(e['desc'], - style: TextStyle( + style: const TextStyle( fontSize: 18, fontWeight: FontWeight.bold, color: ColorPalette.slate800 diff --git a/lib/application/component/subscribe/total_payment_view.dart b/lib/application/component/subscribe/total_payment_view.dart index a8ae096..e594d46 100644 --- a/lib/application/component/subscribe/total_payment_view.dart +++ b/lib/application/component/subscribe/total_payment_view.dart @@ -139,9 +139,8 @@ class TotalPaymentView extends StatelessWidget { ), RadioAgreement( isAgree: isAgree, - desc: '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. Read More', + desc: '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.', onTap: () { - print('gagaga'); onTapAgree(); }, ), diff --git a/lib/features/dashboard/dashboard_account/view/plan/view/plan_view.dart b/lib/features/dashboard/dashboard_account/view/plan/view/plan_view.dart index b373824..1ed5d1a 100644 --- a/lib/features/dashboard/dashboard_account/view/plan/view/plan_view.dart +++ b/lib/features/dashboard/dashboard_account/view/plan/view/plan_view.dart @@ -1,12 +1,8 @@ -import 'package:cims_apps/application/component/button/button_view.dart'; import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart'; import 'package:cims_apps/application/component/subscribe/goal_investing_view.dart'; import 'package:cims_apps/application/component/subscribe/input_investment_view.dart'; -import 'package:cims_apps/application/component/numeric_pad/numeric_pad.dart'; import 'package:cims_apps/application/component/risk_profile.dart'; -import 'package:cims_apps/application/component/text_form/text_form_view.dart'; import 'package:cims_apps/application/theme/color_palette.dart'; -import 'package:cims_apps/core/utils/number_formatter.dart'; import 'package:cims_apps/core/utils/size_config.dart'; import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/view/step_invest_plan/options_starting_invest.dart'; import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/view_model/plan_view_model.dart'; @@ -46,33 +42,32 @@ class _PlanViewState extends State { appBar: CustomAppBar( height: SizeConfig.height * 0.08, title: 'Investment Plan', - leading: SizedBox(), + leading: const SizedBox(), ), body: SingleChildScrollView( - padding: EdgeInsets.all(24), + padding: const EdgeInsets.all(24), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - RiskProfile( + const RiskProfile( totalScore: 26, rowSuitableProduct: true ), - SizedBox( + const SizedBox( height: 32, ), - Text('Your Goal in Investing', + const Text('Your Goal in Investing', style: TextStyle( fontWeight: FontWeight.w700, color: ColorPalette.slate800, fontSize: 18 ), ), - SizedBox( + const SizedBox( height: 24, ), GoalInvestingView( onListSelected: (p0) { - print(p0); showModalBottomSheet( context: context, isScrollControlled: true, @@ -103,7 +98,7 @@ class _PlanViewState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Text("It's time to invest", + const Text("It's time to invest", style: TextStyle( fontSize: 16, fontWeight: FontWeight.w600 @@ -113,12 +108,12 @@ class _PlanViewState extends State { onTap: () { Navigator.pop(context); }, - child: Icon(Icons.close_rounded) + child: const Icon(Icons.close_rounded) ) ], ), ), - Divider(color: ColorPalette.slate200, height: 1), + const Divider(color: ColorPalette.slate200, height: 1), InputInvestmentView( selectedPlan: text, nextMove: (value) {