회원가입과 로그인에서 input을 만들고 사용자가 넣은 값을 받고 validation하는 방법에 대해 공부!
당연할수있겠지만 사용자가 이메일이나 비밀번호를 input창에 입력하고 등록하기 위해서는 입력창과 버튼이 있어야한다
사용자 입력창 위젯
TextField()
TextFormField() //주로 여러개의 입력으로 이루어진 폼을 만들때 사용
TextFormField()을 사용하면 메서드를 만들고, state를 호출하고 컨트롤러에 이벤트리스너를 달고, 값을 추적하는 과정을 생략하고 쉽게 유효성검사을 할 수 있다
=> form을 사용함으로서 모든 입력값을 한번에 유효성검사를 할수있다
material design 버튼위젯
TextButton(onPressed:(){}, child:const Text("button"))
또는 직접구현하는 방법(커스텀 다양해져서 이걸 선호)
user interaction을 받아들이고 state를 관리하는데 용이한 클래스
final TextEditingController _userController = TextEditingController();
//textfield에 컨트롤러를 줘서 사용자가 입력한 값을 받아볼수있다
TextField(
controller: _userController,
)
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,
),
),
),
),
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의 에니메이션을 만들어준다
//현재 날짜,시간을 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에서 나타나도록 설정
),
),
),