<Flutter> authentication

yezee·2024년 4월 14일
0

Flutter

목록 보기
5/15
post-thumbnail

회원가입과 로그인에서 input을 만들고 사용자가 넣은 값을 받고 validation하는 방법에 대해 공부!

당연할수있겠지만 사용자가 이메일이나 비밀번호를 input창에 입력하고 등록하기 위해서는 입력창과 버튼이 있어야한다

widget

사용자 입력창 위젯

TextField()
 TextFormField() //주로 여러개의 입력으로 이루어진 폼을 만들때 사용

TextFormField()을 사용하면 메서드를 만들고, state를 호출하고 컨트롤러에 이벤트리스너를 달고, 값을 추적하는 과정을 생략하고 쉽게 유효성검사을 할 수 있다
=> form을 사용함으로서 모든 입력값을 한번에 유효성검사를 할수있다

material design 버튼위젯

TextButton(onPressed:(){}, child:const Text("button"))

또는 직접구현하는 방법(커스텀 다양해져서 이걸 선호)

controller class

user interaction을 받아들이고 state를 관리하는데 용이한 클래스

  1. satefullwidget 상태에서 사용가능
  2. 컨트롤러를 생성
final TextEditingController _userController = TextEditingController();
  1. 컨트롤하고자하는 위젯에 컨트롤러 추가
//textfield에 컨트롤러를 줘서 사용자가 입력한 값을 받아볼수있다
 TextField(
              controller: _userController,
              )
  1. initstate에서 controller에 이벤트리스너 추가하고 state값에 저장하여 컨트롤 가능
    메모리효율을 위해 버튼을 계속 컨트롤하지 않고 dispose로 정리
class _UsernameScreenState extends State<UsernameScreen> {
  final TextEditingController _userController = TextEditingController();
  
  String _username = "";
  
  void initState() {
    super.initState();
    _userController.addListener(() {
      setState(() {
        _username = _userController.text;
      });
    });
  }
   
  void dispose() {
    _userController.dispose();
    super.dispose();
  }
//ex) TextField를 제어하고 싶을때


class _UsernameScreenState extends State<UsernameScreen> {
  final TextEditingController _userController = TextEditingController();
  String _username = "";

  
  void initState() {
    super.initState();
    _userController.addListener(() {
      setState(() {
        _username = _userController.text;
      });
    });
  }

TextField(
              controller: _userController,
              cursorColor: Theme.of(context).primaryColor,
              decoration: InputDecoration(
                hintText: "Username",
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey.shade400,
                  ),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey.shade400,
                  ),
                ),
              ),
            ),

Textfield에 icon넣는방법

icon
suffix, suffixIcon, prefix, prefixIcon

decoration: InputDecoration(
prefixIcon:Icon(Icons.ac_unit) //아이콘이 전방에 위치
sufixIcon:Icon(Icons.ac_unit) //아이콘이 후방에 위치


// Row로 묶어서 사용
 suffix: const Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      FaIcon(FontAwesomeIcons.circleXmark),
                      Gaps.h5,
                      FaIcon(FontAwesomeIcons.circleXmark),
                    ],
                  ),

)

su

버튼을 만드는 방법들

애플, 안드로이드를 벗어나 나만의 버튼을 만드는 방법

Container(
            padding: const EdgeInsets.symmetric(vertical: Sizes.size20),
            decoration: BoxDecoration(
              color: Theme.of(context).primaryColor,
            ),
            child: const Text(
              "next",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: Sizes.size16,
              ),
            ),
          ),
   

애플느낌의 버튼을 만드는 방법은
CupertinoButton()

 CupertinoButton(
            onPressed: () {},
            color: Theme.of(context).primaryColor,
            child: const Text("next"),
          ),

안드로이드 느낌의 버튼을 만드는 방법은

TextButton(
            onPressed: () {},
            color: Theme.of(context).primaryColor,
            child: const Text("next"),
          ),

버튼에 애니메이션 넣는방법

AnimatedDefaultTextStyle
필수값으로 duration을 받는다
text style의 에니메이션을 만들어준다

AnimatedContainer
필수값으로 duration, child, style을 받는다
container의 에니메이션을 만들어준다

datepicker

//현재 날짜,시간을 initailDate변수에 넣기
  DateTime initialDate = DateTime.now();

//input value에 현재날짜 지정
  
  void initState() {
    super.initState();
    _setTextFieldDate(initialDate);
  }

 void _setTextFieldDate(DateTime date) {
    final textDate = date.toString().split(" ").first;
    _birthdayController.value = TextEditingValue(text: textDate);
  }

  bottomNavigationBar: BottomAppBar(
        child: SizedBox(
          height: 300,
          child: CupertinoDatePicker(
            mode: CupertinoDatePickerMode.date, //시간을 제외하고 날짜만 조정할수있도록 변경
            maximumDate: initialDate, //오늘날짜이후를 선택할수없도록 설정
            initialDateTime: initialDate, //오늘날짜를 오늘날짜로 설정
            onDateTimeChanged:
                _setTextFieldDate, //CupertinoDatePicker로 선택한 날짜가 input에서 나타나도록 설정
          ),
        ),
      ),
profile
아 그거 뭐였지?

0개의 댓글