update: improve login and verif otp screen
This commit is contained in:
parent
cbcb250be3
commit
1785fbceb7
|
@ -1,4 +1,5 @@
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:gap/gap.dart';
|
||||||
import 'package:provider/provider.dart';
|
import 'package:provider/provider.dart';
|
||||||
import 'package:rijig_mobile/core/router.dart';
|
import 'package:rijig_mobile/core/router.dart';
|
||||||
import 'package:rijig_mobile/core/utils/guide.dart';
|
import 'package:rijig_mobile/core/utils/guide.dart';
|
||||||
|
@ -20,14 +21,30 @@ class LoginScreenState extends State<LoginScreen> {
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
body: Consumer<LoginViewModel>(
|
body: Consumer<LoginViewModel>(
|
||||||
builder: (context, viewModel, child) {
|
builder: (context, viewModel, child) {
|
||||||
return Padding(
|
return SafeArea(
|
||||||
|
child: Center(
|
||||||
|
child: Padding(
|
||||||
padding: PaddingCustom().paddingHorizontalVertical(15, 40),
|
padding: PaddingCustom().paddingHorizontalVertical(15, 40),
|
||||||
child: Column(
|
child: Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
|
children: [
|
||||||
|
Column(
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
"Selamat datang di aplikasi",
|
||||||
|
style: Tulisan.subheading(),
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
"Rijig",
|
||||||
|
style: Tulisan.heading(color: primaryColor),
|
||||||
|
),
|
||||||
|
Gap(60),
|
||||||
|
Column(
|
||||||
children: [
|
children: [
|
||||||
FormFieldOne(
|
FormFieldOne(
|
||||||
controllers: phoneController,
|
controllers: phoneController,
|
||||||
hintText: 'Phone Number',
|
hintText: 'Masukkan nomor whatsapp anda!',
|
||||||
|
placeholder: "cth.62..",
|
||||||
isRequired: true,
|
isRequired: true,
|
||||||
textInputAction: TextInputAction.done,
|
textInputAction: TextInputAction.done,
|
||||||
keyboardType: TextInputType.phone,
|
keyboardType: TextInputType.phone,
|
||||||
|
@ -42,18 +59,26 @@ class LoginScreenState extends State<LoginScreen> {
|
||||||
SizedBox(height: 20),
|
SizedBox(height: 20),
|
||||||
CardButtonOne(
|
CardButtonOne(
|
||||||
textButton:
|
textButton:
|
||||||
viewModel.isLoading ? 'Sending OTP...' : 'Send OTP',
|
viewModel.isLoading
|
||||||
|
? 'Sending OTP...'
|
||||||
|
: 'Send OTP',
|
||||||
fontSized: 16,
|
fontSized: 16,
|
||||||
colorText: whiteColor,
|
colorText: whiteColor,
|
||||||
|
color: primaryColor,
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
horizontal: double.infinity,
|
horizontal: double.infinity,
|
||||||
vertical: 50,
|
vertical: 50,
|
||||||
onTap: () async {
|
onTap: () async {
|
||||||
if (phoneController.text.isNotEmpty) {
|
if (phoneController.text.isNotEmpty) {
|
||||||
debugPrint("send otp dipencet");
|
debugPrint("send otp dipencet");
|
||||||
await viewModel.loginOrRegister(phoneController.text);
|
await viewModel.loginOrRegister(
|
||||||
|
phoneController.text,
|
||||||
|
);
|
||||||
if (viewModel.loginResponse != null) {
|
if (viewModel.loginResponse != null) {
|
||||||
router.go("/verif-otp", extra: phoneController.text);
|
router.go(
|
||||||
|
"/verif-otp",
|
||||||
|
extra: phoneController.text,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -62,6 +87,12 @@ class LoginScreenState extends State<LoginScreen> {
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
|
|
@ -23,9 +23,12 @@ class VerifOtpScreenState extends State<VerifOtpScreen> {
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
body: Consumer<OtpViewModel>(
|
body: Consumer<OtpViewModel>(
|
||||||
builder: (context, viewModel, child) {
|
builder: (context, viewModel, child) {
|
||||||
return Padding(
|
return SafeArea(
|
||||||
|
child: Center(
|
||||||
|
child: Padding(
|
||||||
padding: PaddingCustom().paddingHorizontalVertical(15, 40),
|
padding: PaddingCustom().paddingHorizontalVertical(15, 40),
|
||||||
child: Column(
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
Text("OTP has been sent to ${widget.phoneNumber}"),
|
Text("OTP has been sent to ${widget.phoneNumber}"),
|
||||||
SizedBox(height: 20),
|
SizedBox(height: 20),
|
||||||
|
@ -41,12 +44,12 @@ class VerifOtpScreenState extends State<VerifOtpScreen> {
|
||||||
borderRadius: BorderRadius.circular(5),
|
borderRadius: BorderRadius.circular(5),
|
||||||
fieldHeight: 50,
|
fieldHeight: 50,
|
||||||
fieldWidth: 50,
|
fieldWidth: 50,
|
||||||
activeFillColor: Colors.white,
|
activeFillColor: whiteColor,
|
||||||
inactiveFillColor: Colors.white,
|
inactiveFillColor: whiteColor,
|
||||||
selectedFillColor: Colors.white,
|
selectedFillColor: whiteColor,
|
||||||
activeColor: Colors.black,
|
activeColor: blackNavyColor,
|
||||||
inactiveColor: Colors.black,
|
inactiveColor: blackNavyColor,
|
||||||
selectedColor: Colors.blue,
|
selectedColor: primaryColor,
|
||||||
),
|
),
|
||||||
onChanged: (value) {},
|
onChanged: (value) {},
|
||||||
onCompleted: (value) {},
|
onCompleted: (value) {},
|
||||||
|
@ -55,9 +58,12 @@ class VerifOtpScreenState extends State<VerifOtpScreen> {
|
||||||
|
|
||||||
CardButtonOne(
|
CardButtonOne(
|
||||||
textButton:
|
textButton:
|
||||||
viewModel.isLoading ? 'Verifying OTP...' : 'Verify OTP',
|
viewModel.isLoading
|
||||||
|
? 'Verifying OTP...'
|
||||||
|
: 'Verify OTP',
|
||||||
fontSized: 16,
|
fontSized: 16,
|
||||||
colorText: Colors.white,
|
colorText: whiteColor,
|
||||||
|
color: primaryColor,
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
horizontal: double.infinity,
|
horizontal: double.infinity,
|
||||||
vertical: 50,
|
vertical: 50,
|
||||||
|
@ -79,10 +85,12 @@ class VerifOtpScreenState extends State<VerifOtpScreen> {
|
||||||
if (viewModel.errorMessage != null)
|
if (viewModel.errorMessage != null)
|
||||||
Text(
|
Text(
|
||||||
viewModel.errorMessage!,
|
viewModel.errorMessage!,
|
||||||
style: TextStyle(color: Colors.red),
|
style: TextStyle(color: redColor),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
|
Loading…
Reference in New Issue