From 4f50dc951a8a98ee093c1836b1f2016d31eb22a4 Mon Sep 17 00:00:00 2001 From: Dian Bayu Nugroho Date: Mon, 19 Feb 2024 15:24:36 +0700 Subject: [PATCH] fix: component select form --- .../select_form/select_form_view.dart | 94 +++++++++---------- .../submission_data/submit_personal_data.dart | 67 ++++++------- .../viewmodel/submission_data_viewmodel.dart | 27 ++++++ 3 files changed, 107 insertions(+), 81 deletions(-) diff --git a/lib/application/component/select_form/select_form_view.dart b/lib/application/component/select_form/select_form_view.dart index 5e2fa4d..6e6f0f2 100644 --- a/lib/application/component/select_form/select_form_view.dart +++ b/lib/application/component/select_form/select_form_view.dart @@ -25,7 +25,6 @@ class SelectFormView extends StatelessWidget { final String? hintText; final TextStyle? hintTextStyle; final TextEditingController? ctrl; - final Widget? bottomSheetTitle; final List listItem; final ValueChanged onSelect; final FormFieldValidator? validator; @@ -37,7 +36,6 @@ class SelectFormView extends StatelessWidget { this.hintText, this.hintTextStyle, this.ctrl, - this.bottomSheetTitle, required this.listItem, required this.onSelect, this.validator, @@ -56,14 +54,6 @@ class SelectFormView extends StatelessWidget { ), ), builder: (BuildContext context) { - ItemSelectForm? selectedForm; - String? selectedKey; - if (listItem.isNotEmpty) { - var res = listItem.where((element) => element.key == selectedKey); - if (res.isNotEmpty) { - selectedForm = res.first; - } - } return StatefulBuilder(builder: ( BuildContext context, StateSetter stateSetter, @@ -74,30 +64,54 @@ class SelectFormView extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - bottomSheetTitle ?? Container(), - // const SizedBox(height: 16), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + name, + style: const TextStyle( + color: ColorPalette.slate800, + fontSize: 16, + fontWeight: FontWeight.w600, + ), + ), + IconButton( + onPressed: () => Navigator.pop(context), + icon: const Icon( + Icons.clear, + size: 26, + color: ColorPalette.greyBase, + )), + ], + ), + const SizedBox(height: 16), Expanded( child: SingleChildScrollView( scrollDirection: Axis.vertical, child: Column( children: [ - ...listItem.map( - (e) => Card( + ...listItem.map((e) { + bool selected = e.text == ctrl?.text; + return Card( elevation: 0, color: Colors.transparent, - shape: const RoundedRectangleBorder( + shape: RoundedRectangleBorder( side: BorderSide( - color: ColorPalette.greyBorder, + color: selected + ? ColorPalette.primary + : ColorPalette.greyBorder, ), borderRadius: - BorderRadius.all(Radius.circular(12)), + const BorderRadius.all(Radius.circular(12)), ), child: ListTile( title: Text( e.text, - style: const TextStyle( - fontSize: 14, - ), + style: TextStyle( + fontSize: 14, + color: selected + ? ColorPalette.primary + : ColorPalette.slate500), ), subtitle: e.description != null ? Text( @@ -106,37 +120,19 @@ class SelectFormView extends StatelessWidget { overflow: TextOverflow.ellipsis, ) : null, - // trailing: const Icon( - // Icons.check_circle, - // color: ColorPalette.primary, - // ), - trailing: Radio( - focusColor: ColorPalette.primary, - activeColor: ColorPalette.primary, - visualDensity: const VisualDensity( - horizontal: VisualDensity.minimumDensity, - vertical: VisualDensity.minimumDensity, - ), - materialTapTargetSize: - MaterialTapTargetSize.shrinkWrap, - value: e.key, - groupValue: selectedKey, - onChanged: (value) { - // selectedForm = - // ItemSelectForm(e.key, e.text); - // stateSetter(() { - // selectedKey = selectedForm!.key; - // }); - }, - ), + trailing: selected + ? const Icon(Icons.check_circle_rounded, + color: ColorPalette.primary) + : null, onTap: () { - ctrl?.text = e.text; - onSelect(e.key); - Navigator.of(context).pop(); + stateSetter(() { + ctrl?.text = e.text; + onSelect(e.key); + }); }, ), - ), - ), + ); + }), ], ), ), @@ -145,7 +141,7 @@ class SelectFormView extends StatelessWidget { name: 'Select', marginVertical: 4.0, onPressed: () { - // print('object $') + Navigator.pop(context); }, ) ], diff --git a/lib/features/auth/registration/view/submission_data/submit_personal_data.dart b/lib/features/auth/registration/view/submission_data/submit_personal_data.dart index 1b8b389..583d4e4 100644 --- a/lib/features/auth/registration/view/submission_data/submit_personal_data.dart +++ b/lib/features/auth/registration/view/submission_data/submit_personal_data.dart @@ -1,6 +1,5 @@ import 'package:cims_apps/application/component/select_form/select_form_view.dart'; import 'package:cims_apps/application/component/text_caption/text_caption.dart'; -import 'package:cims_apps/application/theme/color_palette.dart'; import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; @@ -10,44 +9,48 @@ class SubmitPersonalData extends StatelessWidget { @override Widget build(BuildContext context) { - List listForm = [ - ItemSelectForm('key1', 'text'), - ItemSelectForm('key2', 'text'), - ItemSelectForm('key3', 'text'), - ItemSelectForm('key4', 'text'), - ItemSelectForm('key5', 'text'), - ]; return ChangeNotifierProvider( create: (context) => SubmissionDataViewModel(), builder: (context, child) { return Consumer( builder: (context, provider, child) { return SingleChildScrollView( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - // mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const TextCaption(title: 'Your personal details'), - SelectFormView( - name: 'Occupation', - hintText: 'Select occupation ', - bottomSheetTitle: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const Text('Occupation'), - IconButton( - onPressed: () => Navigator.pop(context), - icon: const Icon( - Icons.clear, - size: 20, - color: ColorPalette.greyBase, - )), - ], + child: Form( + key: provider.formKeyPersonalData, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const TextCaption(title: 'Your personal details'), + SelectFormView( + name: 'Occupation', + hintText: 'Select occupation ', + ctrl: provider.ctrlOccupation, + listItem: provider.listOccupation, + onSelect: (value) {}, ), - listItem: listForm, - onSelect: (value) {}, - ), - ], + SelectFormView( + name: 'Income Level (IDR)', + hintText: 'Select Income ', + ctrl: provider.ctrlIncome, + listItem: provider.listIncome, + onSelect: (value) {}, + ), + SelectFormView( + name: 'Marital Status', + hintText: 'Select Marital Status ', + ctrl: provider.ctrlMarital, + listItem: provider.listMarital, + onSelect: (value) {}, + ), + SelectFormView( + name: 'Source of Fund', + hintText: 'Select Source of Fund ', + ctrl: provider.ctrlSourceFund, + listItem: provider.listSourceFund, + onSelect: (value) {}, + ), + ], + ), ), ); }); diff --git a/lib/features/auth/registration/viewmodel/submission_data_viewmodel.dart b/lib/features/auth/registration/viewmodel/submission_data_viewmodel.dart index ceaad54..51e70de 100644 --- a/lib/features/auth/registration/viewmodel/submission_data_viewmodel.dart +++ b/lib/features/auth/registration/viewmodel/submission_data_viewmodel.dart @@ -1,4 +1,5 @@ import 'package:camera/camera.dart'; +import 'package:cims_apps/application/component/select_form/select_form_view.dart'; import 'package:flutter/material.dart'; class SubmissionDataViewModel extends ChangeNotifier { @@ -7,6 +8,32 @@ class SubmissionDataViewModel extends ChangeNotifier { int stepAmount = 9; bool _isEmailVerify = false; bool get isEmailVerify => _isEmailVerify; + var formKeyPersonalData = GlobalKey(); + TextEditingController ctrlOccupation = TextEditingController(); + TextEditingController ctrlIncome = TextEditingController(); + TextEditingController ctrlMarital = TextEditingController(); + TextEditingController ctrlSourceFund = TextEditingController(); + + List listOccupation = [ + ItemSelectForm('key1', 'Student'), + ItemSelectForm('key2', 'Entrepreneur'), + ItemSelectForm('key3', 'Civil Servant'), + ]; + List listIncome = [ + ItemSelectForm('key1', '< 10 million/year'), + ItemSelectForm('key2', '10 – 50 million/year'), + ItemSelectForm('key3', '50 – 100 million/year'), + ]; + List listMarital = [ + ItemSelectForm('key1', 'Single'), + ItemSelectForm('key2', 'Married'), + ItemSelectForm('key3', 'Divorced'), + ]; + List listSourceFund = [ + ItemSelectForm('key1', 'Revenue'), + ItemSelectForm('key2', 'Business Profit'), + ItemSelectForm('key3', 'Saving interest'), + ]; Future> initCamera() async { final cameras = await availableCameras();