From 1fa37a1c3e481834045734678a580541c31f225b Mon Sep 17 00:00:00 2001 From: jayesh Date: Thu, 20 Jun 2024 17:26:36 +0530 Subject: [PATCH] ui fixing --- .../bloc/payment/invest_payment_bloc.dart | 27 ++++++++ .../bloc/payment/invest_payment_event.dart | 17 +++++ .../bloc/payment/invest_payment_state.dart | 16 +++++ .../pages/payment/invest_payment_layout.dart | 4 ++ .../pages/payment/invest_payment_screen.dart | 12 +++- .../payment/invest_pay_bottom_section.dart | 39 +++++++---- .../payment/invest_pay_method_section.dart | 66 ++++++++----------- .../payment/invest_pay_top_section.dart | 55 ++++++++++------ 8 files changed, 165 insertions(+), 71 deletions(-) create mode 100644 lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_bloc.dart create mode 100644 lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_event.dart create mode 100644 lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_state.dart diff --git a/lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_bloc.dart b/lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_bloc.dart new file mode 100644 index 0000000..b736b3d --- /dev/null +++ b/lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_bloc.dart @@ -0,0 +1,27 @@ +import 'package:bloc/bloc.dart'; +import 'package:flutter/material.dart'; + +import 'invest_payment_event.dart'; +import 'invest_payment_state.dart'; + +class InvestPaymentBloc extends Bloc { + final GlobalKey formKey = GlobalKey(); + TextEditingController amountController = TextEditingController(); + + GlobalKey getFormKey() { + return formKey; + } + + InvestPaymentBloc() : super(const InvestPaymentState(isFormValid: false)) { + on((event, emit) { + emit(state.copyWith(isFormValid: event.text.isNotEmpty)); + }); + } + + @override + Future close() { + amountController.dispose(); + + return super.close(); + } +} diff --git a/lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_event.dart b/lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_event.dart new file mode 100644 index 0000000..9999fe4 --- /dev/null +++ b/lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_event.dart @@ -0,0 +1,17 @@ +import 'package:equatable/equatable.dart'; + +abstract class InvestPaymentEvent extends Equatable { + const InvestPaymentEvent(); + + @override + List get props => []; +} + +class FormTextChanged extends InvestPaymentEvent { + final String text; + + const FormTextChanged({required this.text}); + + @override + List get props => [text]; +} diff --git a/lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_state.dart b/lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_state.dart new file mode 100644 index 0000000..e12ba65 --- /dev/null +++ b/lib/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_state.dart @@ -0,0 +1,16 @@ +import 'package:equatable/equatable.dart'; + +class InvestPaymentState extends Equatable { + final bool isFormValid; + + const InvestPaymentState({required this.isFormValid}); + + InvestPaymentState copyWith({bool? isFormValid}) { + return InvestPaymentState( + isFormValid: isFormValid ?? this.isFormValid, + ); + } + + @override + List get props => [isFormValid]; +} diff --git a/lib/features/MainScreens/Invest/presentation/pages/payment/invest_payment_layout.dart b/lib/features/MainScreens/Invest/presentation/pages/payment/invest_payment_layout.dart index 7faf170..9c5c334 100644 --- a/lib/features/MainScreens/Invest/presentation/pages/payment/invest_payment_layout.dart +++ b/lib/features/MainScreens/Invest/presentation/pages/payment/invest_payment_layout.dart @@ -11,6 +11,10 @@ class InvestPaymentLayout extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( + // bottomNavigationBar: const Padding( + // padding: EdgeInsets.all(8.0), + // child: InvestPayBottomSection(), + // ), backgroundColor: AppColor.plainWhite, body: ListView( children: const [ diff --git a/lib/features/MainScreens/Invest/presentation/pages/payment/invest_payment_screen.dart b/lib/features/MainScreens/Invest/presentation/pages/payment/invest_payment_screen.dart index 19c53ad..d0abe10 100644 --- a/lib/features/MainScreens/Invest/presentation/pages/payment/invest_payment_screen.dart +++ b/lib/features/MainScreens/Invest/presentation/pages/payment/invest_payment_screen.dart @@ -1,6 +1,8 @@ import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:google_fonts/google_fonts.dart'; +import 'package:tanami_app/features/MainScreens/Invest/presentation/bloc/payment/invest_payment_bloc.dart'; import '../../../../../../core/styles/app_color.dart'; import '../../../../../../core/styles/app_text.dart'; @@ -27,7 +29,15 @@ class InvestPaymentScreen extends StatelessWidget { ), ), ), - body: InvestPaymentLayout(), + body: MultiBlocProvider( + providers: [ + BlocProvider( + // Create an instance of the OnboardingBloc + create: (context) => InvestPaymentBloc(), + ), + ], + child: const InvestPaymentLayout(), + ), ); } } diff --git a/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_bottom_section.dart b/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_bottom_section.dart index c11cf76..c08d786 100644 --- a/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_bottom_section.dart +++ b/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_bottom_section.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:gap/gap.dart'; import 'package:tanami_app/core/routes/route_name.dart'; @@ -7,6 +8,8 @@ import '../../../../../../core/routes/routes.dart'; import '../../../../../../core/styles/app_color.dart'; import '../../../../../../core/styles/app_text.dart'; import '../../../../../../shared/components/button_widget.dart'; +import '../../bloc/payment/invest_payment_bloc.dart'; +import '../../bloc/payment/invest_payment_state.dart'; class InvestPayBottomSection extends StatelessWidget { const InvestPayBottomSection({super.key}); @@ -16,19 +19,29 @@ class InvestPayBottomSection extends StatelessWidget { return Column( mainAxisSize: MainAxisSize.min, children: [ - Container( - margin: const EdgeInsets.symmetric( - horizontal: 16, - ), - width: 1.sw, - height: 56.h, - child: ButtonWidget().elevatedBtn( - txtClr: AppColor.plainWhite, - function: () { - goRouter.pushNamed(RouteName.confirmInvestScreen); - }, - text: AppText.nextText, - clr: AppColor.primaryColor2), + BlocBuilder( + builder: (context, state) { + return Container( + margin: const EdgeInsets.symmetric( + horizontal: 16, + ), + width: 1.sw, + height: 56.h, + child: ButtonWidget().elevatedBtn( + txtClr: state.isFormValid + ? AppColor.plainWhite + : AppColor.inactiveBtnTxtColor, + function: () { + if (state.isFormValid) { + goRouter.pushNamed(RouteName.confirmInvestScreen); + } + }, + text: AppText.nextText, + clr: state.isFormValid + ? AppColor.primaryColor2 + : AppColor.inactiveBtnColor), + ); + }, ), const Gap(5), ButtonWidget().textBorderBtn( diff --git a/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_method_section.dart b/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_method_section.dart index 868d0ce..2435763 100644 --- a/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_method_section.dart +++ b/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_method_section.dart @@ -92,46 +92,36 @@ class InvestPayMethodSection extends StatelessWidget { clr: AppColor.textLabelColor), ], ), - Container( - decoration: const BoxDecoration( - border: Border( - bottom: BorderSide( - width: 1, - color: Colors.grey, + Row( + children: [ + RichText( + text: TextSpan( + children: [ + TextSpan( + text: '${AppText.balanceText}: ', + style: GoogleFonts.dmSans( + color: Colors.grey, + fontSize: 12.0, + fontWeight: FontWeight.bold, + ), + ), + TextSpan( + text: 'SAR 178,000', + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 14.0, + fontWeight: FontWeight.bold, + ), + ), + ], ), ), - ), - child: Row( - children: [ - RichText( - text: TextSpan( - children: [ - TextSpan( - text: '${AppText.balanceText}: ', - style: GoogleFonts.dmSans( - color: Colors.grey, - fontSize: 12.0, - fontWeight: FontWeight.bold, - ), - ), - TextSpan( - text: 'SAR 178,000', - style: GoogleFonts.dmSans( - color: Colors.black, - fontSize: 14.0, - fontWeight: FontWeight.bold, - ), - ), - ], - ), - ), - const Icon( - Icons.arrow_forward, - color: Colors.grey, - size: 15, - ) - ], - ), + const Icon( + Icons.arrow_forward, + color: Colors.grey, + size: 15, + ) + ], ), ], ), diff --git a/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_top_section.dart b/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_top_section.dart index 027d0e9..b1c02d6 100644 --- a/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_top_section.dart +++ b/lib/features/MainScreens/Invest/presentation/widgets/payment/invest_pay_top_section.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:gap/gap.dart'; import 'package:tanami_app/core/styles/app_color.dart'; @@ -7,13 +8,16 @@ import 'package:tanami_app/core/styles/app_text.dart'; import 'package:tanami_app/shared/components/text_widget.dart'; import '../../../../../../shared/components/text_from_field_widget.dart'; +import '../../bloc/payment/invest_payment_bloc.dart'; +import '../../bloc/payment/invest_payment_event.dart'; class InvestPayTopSection extends StatelessWidget { const InvestPayTopSection({super.key}); @override Widget build(BuildContext context) { - TextEditingController amountController = TextEditingController(); + final investPaymentBloc = context.read(); + return Padding( padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0), child: Column( @@ -92,24 +96,37 @@ class InvestPayTopSection extends StatelessWidget { ), const Gap(12), Expanded( - child: Column( - children: [ - textFormField( - txtAlign: TextAlign.center, - readonly: false, - validator: (value) { - if (amountController.text.isEmpty) { - return AppText - .pleaseEnterAmountText; - } - return null; - }, - texttype: TextInputType.number, - textEditingController: amountController, - hintText: AppText.enterAmountText, - suffixIcon: const SizedBox(), - ), - ], + child: Form( + child: Column( + children: [ + textFormField( + txtAlign: TextAlign.center, + readonly: false, + validator: (value) { + if (investPaymentBloc + .amountController + .text + .isEmpty) { + return AppText + .pleaseEnterAmountText; + } + return null; + }, + onInput: (value) { + context + .read() + .add(FormTextChanged( + text: value)); + }, + texttype: TextInputType.number, + textEditingController: + investPaymentBloc + .amountController, + hintText: AppText.enterAmountText, + suffixIcon: const SizedBox(), + ), + ], + ), ), ), ],