forked from baron/baron-sso
fix: 회원가입 화면(Userfront) 모바일 뷰에서 인증 입력창 사라지는 반응형 레이아웃 버그 수정
This commit is contained in:
@@ -156,4 +156,4 @@
|
||||
"authorizer": { "handler": "allow" },
|
||||
"mutators": [{ "handler": "noop" }]
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
@@ -22,9 +22,9 @@ class _SignupScreenState extends State<SignupScreen> {
|
||||
static const _signupMuted = Color(0xFF6B7280);
|
||||
static const _signupDone = Color(0xFF0F766E);
|
||||
static const _signupDoneSurface = Color(0xFFECFDF5);
|
||||
static const _agreementDesktopBreakpoint = 960.0;
|
||||
static const _agreementDesktopBreakpoint = 1024.0;
|
||||
static const _agreementCardMaxWidth = 880.0;
|
||||
static const _stepIndicatorDesktopBreakpoint = 720.0;
|
||||
static const _stepIndicatorDesktopBreakpoint = 1024.0;
|
||||
static const _stepIndicatorMaxWidth = 880.0;
|
||||
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
@@ -1254,43 +1254,84 @@ class _SignupScreenState extends State<SignupScreen> {
|
||||
],
|
||||
),
|
||||
SizedBox(height: isDesktop ? 20 : 16),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(minHeight: 56),
|
||||
child: TextFormField(
|
||||
controller: controller,
|
||||
onChanged: onChanged,
|
||||
decoration: InputDecoration(
|
||||
labelText: label,
|
||||
border: const OutlineInputBorder(),
|
||||
errorText: errorText,
|
||||
hintText: hintText,
|
||||
isDesktop
|
||||
? Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(minHeight: 56),
|
||||
child: TextFormField(
|
||||
controller: controller,
|
||||
onChanged: onChanged,
|
||||
decoration: InputDecoration(
|
||||
labelText: label,
|
||||
border: const OutlineInputBorder(),
|
||||
errorText: errorText,
|
||||
hintText: hintText,
|
||||
),
|
||||
readOnly: readOnly,
|
||||
keyboardType: keyboardType,
|
||||
),
|
||||
),
|
||||
),
|
||||
readOnly: readOnly,
|
||||
keyboardType: keyboardType,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
SizedBox(
|
||||
height: 52,
|
||||
width: 108,
|
||||
child: FilledButton(
|
||||
onPressed: buttonEnabled ? onRequestCode : null,
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: _signupInk,
|
||||
foregroundColor: Colors.white,
|
||||
disabledBackgroundColor: const Color(0xFFE5E7EB),
|
||||
disabledForegroundColor: const Color(0xFF9CA3AF),
|
||||
),
|
||||
child: Text(
|
||||
buttonLabel,
|
||||
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
ConstrainedBox(
|
||||
constraints: const BoxConstraints(minHeight: 56),
|
||||
child: TextFormField(
|
||||
controller: controller,
|
||||
onChanged: onChanged,
|
||||
decoration: InputDecoration(
|
||||
labelText: label,
|
||||
border: const OutlineInputBorder(),
|
||||
errorText: errorText,
|
||||
hintText: hintText,
|
||||
),
|
||||
readOnly: readOnly,
|
||||
keyboardType: keyboardType,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
SizedBox(
|
||||
height: 52,
|
||||
child: FilledButton(
|
||||
onPressed: buttonEnabled ? onRequestCode : null,
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: _signupInk,
|
||||
foregroundColor: Colors.white,
|
||||
disabledBackgroundColor: const Color(0xFFE5E7EB),
|
||||
disabledForegroundColor: const Color(0xFF9CA3AF),
|
||||
),
|
||||
child: Text(
|
||||
buttonLabel,
|
||||
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
SizedBox(
|
||||
height: 52,
|
||||
width: isDesktop ? 108 : null,
|
||||
child: FilledButton(
|
||||
onPressed: buttonEnabled ? onRequestCode : null,
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: _signupInk,
|
||||
foregroundColor: Colors.white,
|
||||
disabledBackgroundColor: const Color(0xFFE5E7EB),
|
||||
disabledForegroundColor: const Color(0xFF9CA3AF),
|
||||
),
|
||||
child: Text(buttonLabel),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
AnimatedSize(
|
||||
duration: const Duration(milliseconds: 180),
|
||||
curve: Curves.easeOut,
|
||||
@@ -1299,11 +1340,36 @@ class _SignupScreenState extends State<SignupScreen> {
|
||||
children: [
|
||||
if (verificationVisible) ...[
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: ConstrainedBox(
|
||||
isDesktop
|
||||
? Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(minHeight: 56),
|
||||
child: TextFormField(
|
||||
controller: verificationController,
|
||||
decoration: InputDecoration(
|
||||
labelText: tr(
|
||||
'ui.userfront.signup.auth.code_label',
|
||||
),
|
||||
suffixText: verificationCountdown,
|
||||
border: const OutlineInputBorder(),
|
||||
),
|
||||
keyboardType: TextInputType.number,
|
||||
inputFormatters: [
|
||||
FilteringTextInputFormatter.digitsOnly,
|
||||
LengthLimitingTextInputFormatter(6),
|
||||
],
|
||||
onChanged: onVerificationChanged,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
const SizedBox(width: 108),
|
||||
],
|
||||
)
|
||||
: ConstrainedBox(
|
||||
constraints: const BoxConstraints(minHeight: 56),
|
||||
child: TextFormField(
|
||||
controller: verificationController,
|
||||
@@ -1322,11 +1388,6 @@ class _SignupScreenState extends State<SignupScreen> {
|
||||
onChanged: onVerificationChanged,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
SizedBox(width: isDesktop ? 108 : 0),
|
||||
],
|
||||
),
|
||||
],
|
||||
if (verified) ...[
|
||||
const SizedBox(height: 12),
|
||||
|
||||
Reference in New Issue
Block a user