feat: submit photo selfie

lib/application/component/take_picture_screen/DisplayPictureScreen.dart

@@ -112,7 +112,7 @@ class DisplayPictureScreen extends StatelessWidget {
                             children: [
                               Container(
                                 width: SizeConfig.width * .42,
-                                height: SizeConfig.height * .15,
+                                height: SizeConfig.height * .13,
                                 padding: const EdgeInsets.symmetric(
                                     vertical: 8.0, horizontal: 8.0),
                                 decoration: BoxDecoration(
@@ -170,9 +170,9 @@ class DisplayPictureScreen extends StatelessWidget {
                             ),
                           ),
                           SizedBox(
-                            width: SizeConfig.width * .42,
+                            width: SizeConfig.width * .4,
                             child: ButtonView(
-                              marginVertical: 8.0,
+                              marginVertical: 0.0,
                               name: 'Next',
                               onPressed: () {
                                 provider.nextSubmission(context);

lib/features/auth/registration/view/submission_data/submission_parent.dart

@@ -5,6 +5,7 @@ import 'package:cims_apps/core/utils/size_config.dart';
 import 'package:cims_apps/features/auth/registration/view/submission_data/submit_photo_ktp.dart';
 import 'package:cims_apps/features/auth/registration/view/submission_data/submit_email.dart';
 import 'package:cims_apps/features/auth/registration/view/submission_data/submit_personal_data.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/submit_photo_selfie.dart';
 import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
 import 'package:cims_apps/features/bottom_navigation_view.dart';
 import 'package:flutter/material.dart';
@@ -42,9 +43,7 @@ class _SubmissionParentState extends State<SubmissionParent> {
       case 3:
         return const SubmitPhotoKtp();
       case 4:
-        return Container(
+        return const SubmitPhotoSelfie();
-          child: Text("Step 4"),
-        );
       case 5:
         return Container(
           child: Text("Step 5"),
@@ -113,7 +112,8 @@ class _SubmissionParentState extends State<SubmissionParent> {
                             child: _content(provider.getCurrentStep),
                           ),
                         ),
-                        provider.getCurrentStep == 3
+                        provider.getCurrentStep == 3 ||
+                                provider.getCurrentStep == 4
                             ? const SizedBox()
                             : Align(
                                 alignment: Alignment.bottomCenter,

lib/features/auth/registration/view/submission_data/submit_photo_selfie.dart

@@ -0,0 +1,125 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/take_picture_screen/take_picture_screen.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/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class SubmitPhotoSelfie extends StatelessWidget {
+  const SubmitPhotoSelfie({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List listImg = [
+      {
+        'urlImg': PathAssets.imgSelfieBlur,
+        'tag': 'Blurry and ID card is not visible'
+      },
+      {
+        'urlImg': PathAssets.imgSelfieClear,
+        'tag': 'ID card and face clearly visible'
+      },
+    ];
+    return MultiProvider(
+        providers: [
+          ChangeNotifierProvider(
+            create: (context) => SubmissionDataViewModel(),
+          )
+        ],
+        builder: (context, child) {
+          return SizedBox(
+            height: SizeConfig.height * .75,
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const TextCaption(
+                  title: 'Take a selfie with your ID card',
+                  subtitle:
+                      'Make sure your face and identity are clearly visible to ensure your identity is correct.',
+                ),
+                SizedBox(
+                  height: SizeConfig.height * .42,
+                  width: SizeConfig.width,
+                  child: Wrap(
+                    alignment: WrapAlignment.spaceBetween,
+                    spacing: 2,
+                    runSpacing: 2,
+                    children: List.generate(listImg.length, (index) {
+                      final urlList = listImg[index]['urlImg'];
+                      final tag = listImg[index]['tag'];
+                      return Column(
+                        children: [
+                          ImageView(
+                            image: urlList,
+                            width: SizeConfig.width * .35,
+                          ),
+                          const SizedBox(
+                            height: 8,
+                          ),
+                          SizedBox(
+                            width: SizeConfig.width * .42,
+                            child: Text(
+                              tag,
+                              textAlign: TextAlign.center,
+                              style: const TextStyle(
+                                  color: ColorPalette.slate800,
+                                  fontWeight: FontWeight.w600),
+                            ),
+                          ),
+                        ],
+                      );
+                    }),
+                  ),
+                ),
+                const Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    ImageView(
+                      image: PathAssets.iconShield,
+                      width: 20,
+                      height: 22,
+                    ),
+                    SizedBox(
+                      width: 8,
+                    ),
+                    Expanded(
+                      child: Text(
+                        'In accordance with OJK regulations, a selfie with ID card is required to purchase mutual funds.',
+                        maxLines: 2,
+                        style: TextStyle(
+                          fontSize: 12,
+                          fontWeight: FontWeight.w600,
+                          color: ColorPalette.primary,
+                        ),
+                      ),
+                    )
+                  ],
+                ),
+                Consumer<SubmissionDataViewModel>(
+                    builder: (context, provider, child) {
+                  return ButtonView(
+                    name: 'Take a Photo',
+                    marginVertical: 16.0,
+                    onPressed: () {
+                      provider.initCamera().then((cameras) {
+                        routePush(context,
+                            page: TakePictureScreen(
+                              camera: cameras[1],
+                              takeContent: 'selfie',
+                            ));
+                      });
+                    },
+                  );
+                })
+              ],
+            ),
+          );
+        });
+  }
+}