From afc2bd3cc98063dd1359cb8acb5f839e4e516f31 Mon Sep 17 00:00:00 2001 From: Dian Bayu Nugroho Date: Mon, 19 Feb 2024 13:04:28 +0700 Subject: [PATCH] feat: set pin page --- assets/icons/icon-lock.png | Bin 0 -> 4555 bytes lib/application/assets/path_assets.dart | 1 + .../component/set_pin_view/set_pin_view.dart | 135 ++++++++++++++++++ .../set_pin_view/set_pin_viewmodel.dart | 9 ++ .../terms_and_condition_view.dart | 7 +- lib/main.dart | 32 +++++ 6 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 assets/icons/icon-lock.png create mode 100644 lib/application/component/set_pin_view/set_pin_view.dart create mode 100644 lib/application/component/set_pin_view/set_pin_viewmodel.dart diff --git a/assets/icons/icon-lock.png b/assets/icons/icon-lock.png new file mode 100644 index 0000000000000000000000000000000000000000..6690e356b13549a11a259fced152a5757f863962 GIT binary patch literal 4555 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 SetPinViewModel(), + builder: (context, child) { + return Scaffold( + appBar: CustomAppBar( + height: SizeConfig.height * .1, title: 'Registration'), + body: SingleChildScrollView( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: Consumer( + builder: (context, provider, child) { + return Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Row( + children: List.generate( + 9, + (index) => _stepItem(isCurrentStep: true, isDone: true), + ), + ), + ImageView( + image: PathAssets.iconLock, + width: SizeConfig.width * .15, + ), + Text( + !provider.isPinCompleted + ? 'Set your PIN' + : 'Confirm your PIN', + style: textTheme.headlineLarge, + ), + Pinput( + onCompleted: (pin) { + if (!provider.isPinCompleted) { + provider.changePin(); + pinInputController.clear(); + } else { + routePush(context, + routeType: RouteType.pushReplace, + page: const RegistrationSuccessView()); + } + }, + keyboardType: TextInputType.number, + obscureText: true, + autofocus: true, + isCursorAnimationEnabled: false, + length: pinInputLength, + controller: pinInputController, + defaultPinTheme: defaultPinTheme, + focusNode: pInputFocusNode, + focusedPinTheme: focusedPinTheme, + submittedPinTheme: submittedPinTheme, + followingPinTheme: followingPinTheme, + ), + ], + ); + }), + ), + ); + }); + } +} diff --git a/lib/application/component/set_pin_view/set_pin_viewmodel.dart b/lib/application/component/set_pin_view/set_pin_viewmodel.dart new file mode 100644 index 0000000..d1142a0 --- /dev/null +++ b/lib/application/component/set_pin_view/set_pin_viewmodel.dart @@ -0,0 +1,9 @@ +import 'package:flutter/material.dart'; + +class SetPinViewModel extends ChangeNotifier { + bool isPinCompleted = false; + void changePin() { + isPinCompleted = !isPinCompleted; + notifyListeners(); + } +} diff --git a/lib/features/auth/registration/view/submission_data/terms_and_condition/terms_and_condition_view.dart b/lib/features/auth/registration/view/submission_data/terms_and_condition/terms_and_condition_view.dart index 88524b6..abe5406 100644 --- a/lib/features/auth/registration/view/submission_data/terms_and_condition/terms_and_condition_view.dart +++ b/lib/features/auth/registration/view/submission_data/terms_and_condition/terms_and_condition_view.dart @@ -1,8 +1,8 @@ import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart'; import 'package:cims_apps/application/component/button/button_view.dart'; +import 'package:cims_apps/application/component/set_pin_view/set_pin_view.dart'; import 'package:cims_apps/application/theme/color_palette.dart'; import 'package:cims_apps/core/route/route.dart'; -import 'package:cims_apps/features/auth/registration/view/submission_data/submission_parent.dart'; import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; @@ -90,7 +90,10 @@ class TermsAndConditionView extends StatelessWidget { onPressed: () { provider.nextSubmission(context); routePush(context, - page: const SubmissionParent()); + page: SetPinView( + currentPin: '', + submitPin: (context, pin) {}, + )); }, marginVertical: 16)) ], diff --git a/lib/main.dart b/lib/main.dart index 2755a41..4d24d24 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -33,6 +33,38 @@ class MyApp extends StatelessWidget { )), fontFamily: 'Manrope', scaffoldBackgroundColor: Colors.white, + textTheme: const TextTheme( + headlineSmall: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: ColorPalette.slate800, + ), + headlineLarge: TextStyle( + fontSize: 28, + fontWeight: FontWeight.bold, + color: ColorPalette.slate800, + ), + displayMedium: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: ColorPalette.slate800, + ), + displayLarge: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: ColorPalette.slate800, + ), + bodyMedium: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: ColorPalette.slate500, + ), + bodyLarge: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: ColorPalette.slate500, + ), + ), colorScheme: const ColorScheme.light().copyWith( primary: const Color(0xff2563EB), onPrimary: const Color(0xFFFF9130),