Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design: Apply new design to welcome screen and authentication screen #24

Merged
merged 2 commits into from
Aug 30, 2024
Merged

Design: Apply new design to welcome screen and authentication screen #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a70546
design: New welcome screen animation and design
boroboro01 Aug 30, 2024
5907772
design: Apply new desgin to signup and otp screen
boroboro01 Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed assets/images/LogoBig.png
View file
Open in desktop
Binary file not shown.
7 changes: 7 additions & 0 deletions assets/images/LogoBig.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions assets/images/LogoFixed.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
222 changes: 141 additions & 81 deletions lib/screens/welcome/otp_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:saphy/utils/colors.dart';
import 'package:saphy/utils/log.dart';
import 'package:saphy/utils/otp_form.dart';
Expand Down Expand Up @@ -44,93 +45,152 @@ class _OtpScreenState extends State<OtpScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: newGray,
resizeToAvoidBottomInset: false,
body: Form(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'안전한 중고거래를 위해서!',
style: TextStyle(
fontFamily: 'Pretendard-Bold',
fontSize: 30.0,
fontWeight: FontWeight.w800,
color: altBlack,
body: Stack(
children: [
Positioned(
top: 100,
left: -240,
child: Opacity(
opacity: 0.5,
child: SvgPicture.asset(
'assets/images/LogoFixed.svg',
width: MediaQuery.of(context).size.width + 500.0,
),
),
const SizedBox(
height: 10.0,
),
Text(
'${widget.phoneNumber}로 인증번호가 전송되었습니다.',
style: const TextStyle(
fontFamily: 'Pretendard-Medium',
fontSize: 20.0,
fontWeight: FontWeight.w400,
color: altBlack,
),
Form(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const SizedBox(height: 10.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'안전한 중고거래를 위해서!',
style: TextStyle(
fontFamily: 'Pretendard-Bold',
fontSize: 35.0,
fontWeight: FontWeight.w800,
color: white,
),
),
const SizedBox(
height: 10.0,
),
Text(
'${widget.phoneNumber}로 인증번호가 전송되었습니다.',
style: const TextStyle(
fontFamily: 'Pretendard-Medium',
fontSize: 20.0,
fontWeight: FontWeight.w400,
color: gray100,
),
),
const SizedBox(
height: 10.0,
),
OtpForms(
controller1: _controller1,
controller2: _controller2,
controller3: _controller3,
controller4: _controller4,
controller5: _controller5,
controller6: _controller6),
],
),
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: NormalButton(
title: "인증하기",
bgColor: mainPrimary,
txtColor: black,
flag: true,
onTap: () async {
logger.i(smsCode);
try {
final credential = PhoneAuthProvider.credential(
verificationId: widget.verificationId,
smsCode: smsCode);
await FirebaseAuth.instance
.signInWithCredential(credential)
.then((_) {
widget.onVerificationSuccess();
Navigator.of(context).pop();
});
} catch (e) {
print(e);
}
},
),
),
],
),
),
const SizedBox(
height: 10.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
OtpForm(
controller: _controller1,
lastNode: false,
),
OtpForm(
controller: _controller2,
lastNode: false,
),
OtpForm(
controller: _controller3,
lastNode: false,
),
OtpForm(
controller: _controller4,
lastNode: false,
),
OtpForm(
controller: _controller5,
lastNode: false,
),
OtpForm(
controller: _controller6,
lastNode: true,
),
],
),
const SizedBox(
height: 20.0,
),
NormalButton(
title: "인증하기",
bgColor: mainPrimary,
txtColor: black,
flag: true,
onTap: () async {
logger.i(smsCode);
try {
final credential = PhoneAuthProvider.credential(
verificationId: widget.verificationId, smsCode: smsCode);
await FirebaseAuth.instance
.signInWithCredential(credential)
.then((_) {
widget.onVerificationSuccess();
Navigator.of(context).pop();
});
} catch (e) {
print(e);
}
},
),
],
),
],
),
);
}
}

class OtpForms extends StatelessWidget {
const OtpForms({
super.key,
required TextEditingController controller1,
required TextEditingController controller2,
required TextEditingController controller3,
required TextEditingController controller4,
required TextEditingController controller5,
required TextEditingController controller6,
}) : _controller1 = controller1,
_controller2 = controller2,
_controller3 = controller3,
_controller4 = controller4,
_controller5 = controller5,
_controller6 = controller6;

final TextEditingController _controller1;
final TextEditingController _controller2;
final TextEditingController _controller3;
final TextEditingController _controller4;
final TextEditingController _controller5;
final TextEditingController _controller6;

@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
OtpForm(
controller: _controller1,
lastNode: false,
),
OtpForm(
controller: _controller2,
lastNode: false,
),
OtpForm(
controller: _controller3,
lastNode: false,
),
OtpForm(
controller: _controller4,
lastNode: false,
),
OtpForm(
controller: _controller5,
lastNode: false,
),
OtpForm(
controller: _controller6,
lastNode: true,
),
)),
],
);
}
}
Loading
Loading