fix: sign up feature

This commit is contained in:
Dian Bayu Nugroho 2024-02-06 19:21:41 +07:00
parent 7ec266cded
commit e538fa5927
6 changed files with 151 additions and 89 deletions

BIN
assets/icons/icon-flag.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -11,6 +11,7 @@ class PathAssets {
static const String icon1 = 'assets/icons/icon-1.png';
static const String iconConnect = 'assets/icons/icon-connect.png';
static const String iconShield = 'assets/icons/icon-shield.png';
static const String iconFlag = 'assets/icons/icon-flag.png';
/// IMAGE
static const String imgSplashLogo = 'assets/images/splash-logo.png';

View File

@ -14,7 +14,7 @@ class TextFormView extends StatelessWidget {
final String? hintText, errorText;
final TextEditingController? ctrl;
final Widget? suffixIcon, suffixLable;
final Widget? prefixIcon;
final Widget? prefixIcon, prefix;
final TextInputType? keyboardType;
final FormFieldValidator<String>? validator;
final bool obscureText;
@ -70,7 +70,8 @@ class TextFormView extends StatelessWidget {
this.disableColor = false,
this.enableInteractiveSelection = true,
this.focusNode,
this.isTextAlignCenter = false})
this.isTextAlignCenter = false,
this.prefix})
: super(key: key);
@override
@ -148,46 +149,47 @@ class TextFormView extends StatelessWidget {
enableInteractiveSelection: enableInteractiveSelection,
textAlign: isTextAlignCenter ? TextAlign.center : TextAlign.left,
decoration: InputDecoration(
helperText: helperText,
errorStyle: errorStyle,
errorText: errorText,
errorMaxLines: 2,
hintStyle: hintTextStyle ??
const TextStyle(
fontSize: 14,
color: ColorPalette.greyFont,
fontWeight: FontWeight.normal,
helperText: helperText,
errorStyle: errorStyle,
errorText: errorText,
errorMaxLines: 2,
hintStyle: hintTextStyle ??
const TextStyle(
fontSize: 14,
color: ColorPalette.greyFont,
fontWeight: FontWeight.normal,
),
isDense: true,
hintText: hintText,
filled: true,
fillColor: enabled && disableColor == false
? Colors.white
: const Color.fromARGB(255, 233, 236, 239),
disabledBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: disabledborderColor ?? ColorPalette.greyBorder,
),
isDense: true,
hintText: hintText,
filled: true,
fillColor: enabled && disableColor == false
? Colors.white
: const Color.fromARGB(255, 233, 236, 239),
disabledBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: disabledborderColor ?? ColorPalette.greyBorder,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: enabledborderColor ?? ColorPalette.greyBorder,
enabledBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: enabledborderColor ?? ColorPalette.greyBorder,
),
),
),
focusedBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: focusedBorderColor ?? ColorPalette.greyBorder,
focusedBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: focusedBorderColor ?? ColorPalette.greyBorder,
),
),
),
border: OutlineInputBorder(borderRadius: _borderRadius),
suffixIcon: suffixIcon,
prefixIcon: prefixIcon,
suffixIconConstraints: suffixIconConstraints,
prefixIconConstraints: preffixIconConstraints,
),
border: OutlineInputBorder(borderRadius: _borderRadius),
suffixIcon: suffixIcon,
prefixIcon: prefixIcon,
suffixIconConstraints: suffixIconConstraints,
prefixIconConstraints: preffixIconConstraints,
prefix: prefix,
contentPadding: EdgeInsets.zero),
)
],
);

View File

@ -55,7 +55,7 @@ class RegistrationPasswordView extends StatelessWidget {
},
child: Icon(
provider.showPassword
? Icons.visibility_off_outlined
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
color: ColorPalette.greyDarker,
),

View File

@ -1,9 +1,16 @@
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/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';
@ -11,7 +18,7 @@ class RegistrationView extends StatelessWidget {
@override
Widget build(BuildContext context) {
_showOtpWidget() {
showOtpWidget() {
Navigator.of(context).pop();
showModalBottomSheet(
context: context,
@ -35,56 +42,106 @@ class RegistrationView extends StatelessWidget {
);
}
return Scaffold(
appBar: AppBar(
title: const Text('Sign Up'),
),
body: Container(
padding: const EdgeInsets.all(24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const TextCaption(
title: 'Enter your phone number',
subtitle: 'Input your registered phone number',
return ChangeNotifierProvider(
create: (context) => RegistrationViewModel(),
builder: (context, child) {
return Scaffold(
appBar: AppBar(
title: const Text('Sign Up'),
),
TextFormView(name: 'Phone Number'),
ButtonView(
name: 'Next',
onPressed: () {
_showOtpWidget();
// routePush(context, page: const RegistrationPasswordView());
},
body: Container(
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'))
],
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,
),
),
]),
),
)
],
),
);
}),
),
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 = () {
print('object');
},
text: ' Sign In',
style: const TextStyle(
color: Colors.blue,
),
),
]),
),
)
],
),
),
);
);
});
}
}

View File

@ -3,7 +3,9 @@ import 'package:flutter/material.dart';
class RegistrationViewModel extends ChangeNotifier {
TextEditingController passwordCtrl = TextEditingController();
TextEditingController confirmPasswordCtrl = TextEditingController();
TextEditingController phoneNumberCtrl = TextEditingController();
var formKey = GlobalKey<FormState>();
var formKeyPhone = GlobalKey<FormState>();
bool showPassword = false;
bool showPasswordConfirm = false;