7일차 과제 링크 👉 7일차 과제

TextField 위젯

• 사용자에게 입력을 받을 수 있다 예시) 로그인시 필요한 이메일, 패스워드 입력창 등 사용자의 입력이 필요할 때 사용

  TextField(
  
  )

  

데코레이션 하기

• InputDecoration을 사용해 TextField를 꾸며줄 수 있다

  TextField(
    cursorColor: Colors.green,
    decoration: InputDecoration(
      label: Text('이메일 입력'),  // Label 추가
      labelStyle: TextStyle(color: Colors.green),
      hintText: 'example@email.com',  // 입력 전 힌트 보여주기(텍스트 입력하면 사라짐)
      fillColor: Colors.black12,  // 배경 색
      filled: true, // TextField는 원래 투명하기 때문에 fillColor만 설정해주면 
  									// 색상이 적용되지 않음. 같이 설정해주기
    ),
  )

  
  

입력값 받기

• 방법1) 입력될 때마다 변수에 저장한다.
• 방법2) Controller를 붙인다.

---

Event

• 개발자에게 핸들링할 수 있는 기회를 주는 것
• 이벤트 : 어떠한 동작이 발생하는 것
• 이벤트 핸들러 : 개발자가 처리 방식을 알려주는
• 이벤트와 핸들러는 한 세트로 묶어(Bind)줘야 한다.

이벤트 종류

• 보통 프론트엔드에서 이벤트들은 ‘on’이라는 키워드가 앞에 붙는다.
• 값을 입력함 → onChanged, onInserted
• 누름 → onPressed, onTap
• 두번 누름 → onDoubleTap
• 실패함 → onFailed, onError

TextField 위젯의 입력값 이벤트 받기

• TextField의 onChanged 속성
• onChanged == event
• Event Handler == 함수
• onChanged: 함수

  TextField(
  	onChanged: (value) {
  	  print(value);
  	},
  )

• 텍스트를 입력하면 입력할 때마다 value 값이 계속 갱신되고, 갱신된 value 값이 출력됨
  

---

함수

• 어떤 행동을 하고 결과를 나한테 남겨주는 것
• 코드블록{ } 에 이름을 붙여주고 언제든 갖다 쓴다.

void main() {

}

• 이름을 안 붙일 수도 있다.

함수의 선언과 호출

• 선언(정의) : 함수를 만드는 것
• 호출(실행) : 함수를 실행하는 것
• 아무리 함수를 만들어놔도 호출을 안하면 무용지물

함수 선언(정의)

리턴타입 함수명() {
	실행영역(코드)
}

반환값(리턴값) 타입을 지정해준다 → 리턴(return)

• void : 반환 X (실행만 하고 결과를 안 줌)
  • return 불필요
• void 외에 다른 타입으로 지정 시 해당 타입을 반드시 리턴해주어야함
  • int, String, List … → return 반드시 필요
• 예제

  // 로그인 시 인사하는 함수 (결과를 받을 필요가 없기 때문에 void)
  void printWelcomeMsg() {
    print("새로운 유저가 입장했습니다");
    print("반겨");
  }
  
  // 내 나이를 넘겨주는 함수 (결과를 int로 받아야 함)
  int getMyAge() {
    return 20;
  }
  
  // 내 닉네임을 받는 함수 (결과를 String으로 받아야 함)
  String getMyNickName() {
  	var user = //서버통신해서 유저정보 가져오기..//;
  	return user.name;
  }
  
  // 내 팔로워들을 받는 함수 (결과를 List<String>로 받아야 함)
  List<String> getMyFollwers(){
  	var followers = //서버통신해서 팔로워 가져오기//;
  	return followers;
  }
  
  // 팔로우를 거는 함수 (결과를 bool로 받아야 함)
  bool tryFollow() {
  	var res = //..서버에서 팔로우 걸어보고 결과받기..//;
  	return res;
  }

함수 호출(실행)

• 함수명()

  printWelcomeMsg();
  var myAge = getMyAge();
  var myNickName = getMyNickName();
  var myFollowers = getMyFollowers();
  var isFollowed = tryFollow();

함수 기본 특성

• 함수는 특수한 임무/목표를 가지고 있게 만들어준다
  • 로그인, 로그아웃 함수
  • 사진 업로드 함수
  • 새로고침 함수
• 미리 정의해놓으면, 언제든 불러와서 사용하기 쉬움
• 독립적인 메모리 공간 사용

  List<String> getMyFollwers(){
    var followers = ['aaa', 'bbb', 'ccc'];
    return followers;
  }
  
  void main() {
    var res = getMyFollwers();
    print(followers); // 에러 발생
  										// 함수 안에 선언되어 있는 지역변수는 다른 함수에서 사용할 수 없다.
  }

• 함수에 데이터를 전달할 수 있다

  // 로그인 시 이름과 함께 인사하는 함수
  void printWelcomeMsg(String myName) {  // 데이터 받기, 매개변수(Parameter)
    print('$myName 새로운 유저가 입장');
    print('반겨~');
  }
  
  void main() {
  	printWelcomeMsg('이름');   // 데이터 전달, 인자(Argument)
  }

  • 매개변수는 함수 선언의 변수 목록, 인자는 함수가 호출될 때 전달되는 실제 값

TextField: onChanged에 이벤트 핸들러(함수) 묶기(Bind)

1. onChanged에 바로 함수명 없이 묶어버리기

TextField(
	onChanged: (value) {
	  print(value);
	},
)

2. 함수를 선언한 뒤에 함수명을 묶어버리기

void _handleOnChanged(String value) {
  print(value);
}

...

TextField(
	onChanged: _handleOnChanged,
)

---

7일차 끝