6. 인터페이스 개발 기초 및 위젯 활용 (4)

1. 사용자 입력 처리 

* TextField - 사용자에게 글을 입력받는 위젯

# 텍스트 필드(Do it! 깡샘 플러터&다트 p. 262)
TextField(
  style: TextStyle(fontSize: 15),
  textAlign: TextAlign.center
)

 

* TextEditingController - 입력된 데이터 얻기

* InputDecoration - 꾸미기 

* textInputAction - 액션 버튼 

* keyboardType - 키보드 유형

* obstureText - 텍스트 감추기

* maxLines, misLines - 여러 줄 입력     

---

  ★ 사용자 이름 & 이메일 주소 입력 받기

• 2개의 TextField (사용자 이름, 이메일 주소)
• 각 TextField위에 라벨 표시하고, 힌트 텍스트 추가
• 입력 완료 후 제출 버튼을 누르면 입력된 값이 콘솔에 출력되어야 함

즉, 라벨은 사용자가 어떤 정보를 입력해야 하는지 - 사용자 이름, 이메일 주소

     힌트 텍스트는 TextField에 입력하기 전 사용자가 어떤 형식의 데이터를 입력해야 하는지 - 이름을 입력하세요:

---

 

* Checkbox - 체크박스 

* Radio - 라디오 버튼

* Slider - 슬라이더

* Switch - 스위치

* 폼 이용 - 폼에 키값 대입, 유효성 검증 및 데이터 저장

---

  ★ 사용자 옵션 화면 만들기

• "다크 모드"와 "알림 받기" 옵션을 토글할 수 있는 설정 화면
• 다크 모드는 Switch, 알림 받기는 Checkbox 사용
• 각 옵션의 상태가 변경될 때마다 현재 상태를 콘솔에 출력

※ 토글(toggle)은 사용자가 두 가지 상태(일반적으로 켜기/끄기 또는 활성화/비활성화)를 전환할 수 있도록 하는 UI 요소

SettingsPage 클래스: 사용자가 설정할 수 있는 옵션 화면
_darkMode와 _notificationsEnabled는 각각 다크 모드와 알림 받기 옵션의 상태를 나타내는 변수
_toggleDarkMode와 _toggleNotifications는 각 옵션의 상태를 변경하는 함수(상태 변경 시 콘솔에 현재 상태 출력)

---