[flutter] 로그인 창 만들기(UI)

Tip

키보드가 컨텐츠를 가리는 이슈

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class SignupPage extends StatefulWidget {
  const SignupPage({super.key});

  @override
  State<SignupPage> createState() => _SignupPageState();
}

class _SignupPageState extends State<SignupPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30),
          child: ListView(
            shrinkWrap: true, // 컨텐츠 크기만큼만 자리 차지. 정가운데 위치하게 됨.
            reverse: true, //로고를 아래, 폼을 위에 띄움
            children: [
            // ... formFiled들 생략
              const SizedBox(height: 40),
              ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  textStyle: const TextStyle(fontSize: 20),
                  padding: const EdgeInsets.symmetric(vertical: 15),
                ),
                child: const Text('회원가입'),
              ),
              const SizedBox(height: 10),
              TextButton(
                onPressed: () {},
                child: const Text(
                  '이미 회원이신가요? 로그인하기',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ].reversed.toList(), //다시 리버스해서 키보드가 올라왔을 때 form을 가리지 않게 됨
          ),
        ),
      ),
    );
  }
}

텍스트필드 외부 클릭시 비활성화하기

1. 포커스된 영역을 찾아서 (FocusScope.of(context))
2. 언포커스 해준다.(.unfocus())

GestureDetector(
  onTap: () => FocusScope.of(context).unfocus(),
  child: ...
)

이전 페이지로 돌아갈 수 없도록 막기(뒤로가기 기능 블락)

WillPopScope(
  onWillPop: () async => false,
  child: ...
)

validation 검증로직 시점 조정하기

버튼을 눌렀을때를 기점으로 할지 등 검증 로직 시점을 조정할 수 있다.

Flutter doc

AutovalidateMode.onUserInteraction 인 경우 이 FormField는 콘텐츠가 변경된 후에만 자동 유효성 검사를 수행합니다. AutovalidateMode.always 인 경우 사용자 상호 작용 없이도 자동 유효성 검사가 수행됩니다. AutovalidateMode.disabled 인 경우 자동 유효성 검사가 비활성화됩니다.

AutovalidateMode _autovalidateMode = AutovalidateMode.disabled;

...
Form(
  key: _globalKey,
  autovalidateMode: _autovalidateMode,
  child: ...
)

disabled

버튼의 경우 onPressed 등 콜백함수가 들어갈 자리에 null을 주면 disabled된다.
텍스트 필드의 경우, enabled 속성에 값을 주어 조정 가능하다.

TextFormField(
  enabled: _isEnabled,
  keyboardType: TextInputType.emailAddress,
)

Signup 텍스트필드 키보드 타입들

text
multiline
number
phone
datetime
TextInputType.emailAddress
url
visiblePassword
name
streetAddress
none

push 대신 pushReplacement를 써서 페이지 이동

push를 써서 페이지이동하다보면 같은 페이지인데도 계속 쌓여버린다.
pushReplacement를 써서 이동하면 전 화면의 위치에 현재 화면을 덮어쓰게된다.