154 lines
6.3 KiB
Dart
154 lines
6.3 KiB
Dart
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/custom_app_bar/custom_app_bar.dart';
|
||
import 'package:cims_apps/application/component/image/image_view.dart';
|
||
import 'package:cims_apps/application/component/otp/otp_view.dart';
|
||
import 'package:cims_apps/application/component/text_caption/text_caption.dart';
|
||
import 'package:cims_apps/application/component/text_form/text_form_view.dart';
|
||
import 'package:cims_apps/application/theme/color_palette.dart';
|
||
import 'package:cims_apps/core/utils/size_config.dart';
|
||
import 'package:cims_apps/features/auth/registration/viewmodel/registration_viewmodel.dart';
|
||
import 'package:flutter/gestures.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:flutter/services.dart';
|
||
import 'package:provider/provider.dart';
|
||
|
||
class RegistrationView extends StatelessWidget {
|
||
static const routName = '/RegistrationView';
|
||
const RegistrationView({Key? key}) : super(key: key);
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
showOtpWidget() {
|
||
Navigator.of(context).pop();
|
||
showModalBottomSheet(
|
||
context: context,
|
||
isScrollControlled: true,
|
||
enableDrag: false,
|
||
shape: const RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.vertical(
|
||
top: Radius.zero,
|
||
),
|
||
),
|
||
builder: (BuildContext context) {
|
||
return Padding(
|
||
padding: EdgeInsets.only(
|
||
top: MediaQueryData.fromView(
|
||
WidgetsBinding.instance.window,
|
||
).padding.top,
|
||
),
|
||
child: const OtpView(
|
||
title: 'Sign Up',
|
||
contentTitle: 'Check your SMS',
|
||
contentSubtitle:
|
||
'Enter 4 digit code We’ve sent to verify your phone number',
|
||
),
|
||
);
|
||
},
|
||
);
|
||
}
|
||
|
||
return ChangeNotifierProvider(
|
||
create: (context) => RegistrationViewModel(),
|
||
builder: (context, child) {
|
||
return Scaffold(
|
||
appBar:
|
||
CustomAppBar(height: SizeConfig.height * .1, title: 'Sign Up'),
|
||
body: SingleChildScrollView(
|
||
padding: const EdgeInsets.all(24.0),
|
||
child: Consumer<RegistrationViewModel>(
|
||
builder: (context, provider, child) {
|
||
return Form(
|
||
key: provider.formKeyPhone,
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
const TextCaption(
|
||
title: 'Enter your phone number',
|
||
subtitle: 'Input your registered phone number',
|
||
),
|
||
TextFormView(
|
||
name: 'Phone Number',
|
||
keyboardType: TextInputType.number,
|
||
inputFormatters: [
|
||
FilteringTextInputFormatter.deny(RegExp(r'^0'))
|
||
],
|
||
contentPadding: EdgeInsets.zero,
|
||
prefixIcon: Container(
|
||
width: SizeConfig.width * .23,
|
||
padding:
|
||
const EdgeInsets.symmetric(horizontal: 16.0),
|
||
margin: const EdgeInsets.only(right: 16),
|
||
decoration: const BoxDecoration(
|
||
color: ColorPalette.grey,
|
||
borderRadius: BorderRadius.only(
|
||
topLeft: Radius.circular(8),
|
||
bottomLeft: Radius.circular(8),
|
||
)),
|
||
child: const Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
ImageView(
|
||
image: PathAssets.iconFlag,
|
||
fit: BoxFit.contain,
|
||
width: 24,
|
||
height: 24,
|
||
),
|
||
Text(
|
||
'+62',
|
||
style: TextStyle(
|
||
fontWeight: FontWeight.w600,
|
||
color: ColorPalette.slate800,
|
||
),
|
||
)
|
||
],
|
||
)),
|
||
ctrl: provider.phoneNumberCtrl,
|
||
validator: (value) {
|
||
if (value!.isEmpty) {
|
||
return 'Phone number must be filled';
|
||
} else {
|
||
return null;
|
||
}
|
||
},
|
||
),
|
||
ButtonView(
|
||
name: 'Next',
|
||
onPressed: () {
|
||
if (provider.formKeyPhone.currentState!.validate()) {
|
||
showOtpWidget();
|
||
}
|
||
},
|
||
),
|
||
Align(
|
||
alignment: Alignment.center,
|
||
child: RichText(
|
||
textAlign: TextAlign.center,
|
||
text: TextSpan(children: [
|
||
const TextSpan(
|
||
text: 'Already have an account? ',
|
||
style: TextStyle(
|
||
color: Colors.black,
|
||
decoration: TextDecoration.none,
|
||
),
|
||
),
|
||
TextSpan(
|
||
recognizer: TapGestureRecognizer()..onTap = () {},
|
||
text: ' Sign In',
|
||
style: const TextStyle(
|
||
color: Colors.blue,
|
||
),
|
||
),
|
||
]),
|
||
),
|
||
)
|
||
],
|
||
),
|
||
);
|
||
}),
|
||
),
|
||
);
|
||
});
|
||
}
|
||
}
|