nekoya/app
nekoya/app
1
0
Fork 0
Code Issues Pull requests Projects Releases5 Packages Wiki Activity

modif otp screen

Browse source
This commit is contained in:
D Shrat 2022-05-13 12:57:43 +07:00
parent 1272270415
commit dfc7ee4c09
2 changed files with 252 additions and 2 deletions
lib
components
otp_body.dart
screens
otp.dart

252
lib/components/otp_body.dart
View file

@ -1,4 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lottie/lottie.dart';
import 'package:nekoya_flutter/screens/login.dart';
class OtpBody extends StatefulWidget {
const OtpBody({Key? key}) : super(key: key);
@ -10,6 +13,253 @@ class OtpBody extends StatefulWidget {
class _OtpBodyState extends State<OtpBody> {
@override
Widget build(BuildContext context) {
return Container();
return Container(
padding: const EdgeInsets.all(25),
child: ListView(children: [
Container(
child: Lottie.asset('assets/lottieanims/otp.json'),
),
Container(
padding: EdgeInsets.only(top: 15),
child: Text(
'A String of OTP Code Has Been Sent to 08080808080808',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 15, color: Colors.white),
),
),
Form(
child: Container(
padding: EdgeInsets.only(top: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
),
child: SizedBox(
height: 50,
width: 50,
child: TextFormField(
onChanged: (value) {
if (value.length == 1) {
FocusScope.of(context).nextFocus();
} else if (value.length == 0) {
FocusScope.of(context).previousFocus();
}
},
onSaved: (pin1) {},
decoration: InputDecoration(
hintText: "0",
focusColor: Colors.white,
hintStyle: TextStyle(color: Colors.white),
),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly,
],
),
),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
),
child: SizedBox(
height: 50,
width: 50,
child: TextFormField(
onChanged: (value) {
if (value.length == 1) {
FocusScope.of(context).nextFocus();
} else if (value.length == 0) {
FocusScope.of(context).previousFocus();
}
},
onSaved: (pin1) {},
decoration: InputDecoration(
hintText: "0",
focusColor: Colors.white,
hintStyle: TextStyle(color: Colors.white),
),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly,
],
),
),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
),
child: SizedBox(
height: 50,
width: 50,
child: TextFormField(
onChanged: (value) {
if (value.length == 1) {
FocusScope.of(context).nextFocus();
} else if (value.length == 0) {
FocusScope.of(context).previousFocus();
}
},
onSaved: (pin1) {},
decoration: InputDecoration(
hintText: "0",
focusColor: Colors.white,
hintStyle: TextStyle(color: Colors.white),
),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly,
],
),
),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
),
child: SizedBox(
height: 50,
width: 50,
child: TextFormField(
onChanged: (value) {
if (value.length == 1) {
FocusScope.of(context).nextFocus();
} else if (value.length == 0) {
FocusScope.of(context).previousFocus();
}
},
onSaved: (pin1) {},
decoration: InputDecoration(
hintText: "0",
focusColor: Colors.white,
hintStyle: TextStyle(color: Colors.white),
),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly,
],
),
),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
),
child: SizedBox(
height: 50,
width: 50,
child: TextFormField(
onChanged: (value) {
if (value.length == 1) {
FocusScope.of(context).nextFocus();
} else if (value.length == 0) {
FocusScope.of(context).previousFocus();
}
},
onSaved: (pin1) {},
decoration: InputDecoration(
hintText: "0",
focusColor: Colors.white,
hintStyle: TextStyle(color: Colors.white),
),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly,
],
),
),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
),
child: SizedBox(
height: 50,
width: 50,
child: TextFormField(
onChanged: (value) {
if (value.length == 1) {
FocusScope.of(context).nextFocus();
} else if (value.length == 0) {
FocusScope.of(context).previousFocus();
}
},
onSaved: (pin1) {},
decoration: InputDecoration(
hintText: "0",
focusColor: Colors.white,
hintStyle: TextStyle(color: Colors.white),
),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly,
],
),
),
),
],
),
)),
Container(
padding: EdgeInsets.only(top: 15, bottom: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"didn't get the code? \t",
style: TextStyle(color: Colors.white),
),
Text(
'Resend code',
style: TextStyle(color: Colors.blue.shade800),
),
],
),
),
ElevatedButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all(const Color(0xff8B0000)),
backgroundColor:
MaterialStateProperty.all(const Color(0xff8B0000)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: const BorderSide(color: Colors.red)))),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => const Login()));
},
child: const Text(
'Verify',
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
]),
);
}
}

2
lib/screens/otp.dart
View file

@ -14,7 +14,7 @@ class _OtpState extends State<Otp> {
return Scaffold(
backgroundColor: const Color(0xff1b1c1e),
appBar: AppBar(
title: const Text('Otp'),
title: const Text('OTP VERIFICATION'),
centerTitle: true,
backgroundColor: const Color(0xff212226),
),