fix: component select form

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<ItemSelectForm> listItem;
   final ValueChanged<String> onSelect;
   final FormFieldValidator<String>? 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(),
+                  Row(
-                  // const SizedBox(height: 16),
+                    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(
+                          ...listItem.map((e) {
-                            (e) => Card(
+                            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(
+                                  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(
+                                trailing: selected
-                                //   Icons.check_circle,
+                                    ? const Icon(Icons.check_circle_rounded,
-                                //   color: ColorPalette.primary,
+                                        color: ColorPalette.primary)
-                                // ),
+                                    : null,
-                                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;
-                                    // });
-                                  },
-                                ),
                                 onTap: () {
+                                  stateSetter(() {
                                     ctrl?.text = e.text;
                                     onSelect(e.key);
-                                  Navigator.of(context).pop();
+                                  });
                                 },
                               ),
-                            ),
+                            );
-                          ),
+                          }),
                         ],
                       ),
                     ),
@@ -145,7 +141,7 @@ class SelectFormView extends StatelessWidget {
                     name: 'Select',
                     marginVertical: 4.0,
                     onPressed: () {
-                      // print('object $')
+                      Navigator.pop(context);
                     },
                   )
                 ],

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,45 +9,49 @@ class SubmitPersonalData extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    List<ItemSelectForm> 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<SubmissionDataViewModel>(
               builder: (context, provider, child) {
             return SingleChildScrollView(
+              child: Form(
+                key: provider.formKeyPersonalData,
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
-                // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
                     const TextCaption(title: 'Your personal details'),
                     SelectFormView(
                       name: 'Occupation',
                       hintText: 'Select occupation ',
-                    bottomSheetTitle: Row(
+                      ctrl: provider.ctrlOccupation,
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      listItem: provider.listOccupation,
-                      children: [
+                      onSelect: (value) {},
-                        const Text('Occupation'),
-                        IconButton(
-                            onPressed: () => Navigator.pop(context),
-                            icon: const Icon(
-                              Icons.clear,
-                              size: 20,
-                              color: ColorPalette.greyBase,
-                            )),
-                      ],
                     ),
-                    listItem: listForm,
+                    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) {},
                     ),
                   ],
                 ),
+              ),
             );
           });
         });

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<FormState>();
+  TextEditingController ctrlOccupation = TextEditingController();
+  TextEditingController ctrlIncome = TextEditingController();
+  TextEditingController ctrlMarital = TextEditingController();
+  TextEditingController ctrlSourceFund = TextEditingController();
+
+  List<ItemSelectForm> listOccupation = [
+    ItemSelectForm('key1', 'Student'),
+    ItemSelectForm('key2', 'Entrepreneur'),
+    ItemSelectForm('key3', 'Civil Servant'),
+  ];
+  List<ItemSelectForm> listIncome = [
+    ItemSelectForm('key1', '< 10 million/year'),
+    ItemSelectForm('key2', '10 – 50 million/year'),
+    ItemSelectForm('key3', '50 – 100 million/year'),
+  ];
+  List<ItemSelectForm> listMarital = [
+    ItemSelectForm('key1', 'Single'),
+    ItemSelectForm('key2', 'Married'),
+    ItemSelectForm('key3', 'Divorced'),
+  ];
+  List<ItemSelectForm> listSourceFund = [
+    ItemSelectForm('key1', 'Revenue'),
+    ItemSelectForm('key2', 'Business Profit'),
+    ItemSelectForm('key3', 'Saving interest'),
+  ];
 
   Future<List<CameraDescription>> initCamera() async {
     final cameras = await availableCameras();