채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
https://www.youtube.com/watch?v=aBeJb3gZQZY&t=4711s
유튜브채널 더코딩파파님의 90분 채팅앱 만들기 - Flutter | Lv.2(초중급) 영상을 참고하면서 공부했다.
메시지를 입력할때마다 애니메이션이 생기도록 코드를 추가했다.
애니메이션변수 => 변화하는 값을 전해줌 => 기본값 0.3초
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
https://www.youtube.com/watch?v=aBeJb3gZQZY&t=4711s
유튜브채널 더코딩파파님의 90분 채팅앱 만들기 - Flutter | Lv.2(초중급) 영상을 참고하면서 공부했다.
메시지를 입력할때마다 새 채팅내용이 UI에 생기도록 코드를 추가했다.
채팅목록들을 저장할 리스트 배열 변수인 _chats 를 만들어주었다.
그리고 앞서 임의로 설정해주었던 “testing message”와 “this is the message” 텍스트를 지우고 사용자로부터 채팅내용을 입력받아 return을 해주었다.
reverse:true는 오래된 채팅이 올라가도록 설정을 해주었고 itemCount는 채팅의 개수이다.
다음은 _handleSubmitted함수를 수정했는데 사용자로부터 메시지를 입력받는 변수인 newChat 변수를 선언해주었고
setState에서 사용자로부터 새로 입력을 받을때마다 배열의 인덱스0 위치에 그 채팅 내용을 넣게 해주었다.
여기서 setState는 StatefulWidget한테 위젯 상태 바뀌었으니까 바뀐 위젯상태에 따라서 다시 빌드를 요청하는 함수이다.
실행결과
마지막에 입력해준 “ssss”가 가장 하단 부분에 위치하는 것을 볼 수 있다.
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
https://www.youtube.com/watch?v=aBeJb3gZQZY&t=4711s
유튜브채널 더코딩파파님의 90분 채팅앱 만들기 - Flutter | Lv.2(초중급) 영상을 참고하면서 공부했다.
메시지 입력창과 send 버튼을 밑으로 내리고 그동안 채팅을 보낸 내역을 보여주기 위해 몇가지 코드를 추가하였다.
우선 채팅을 보낸 사람의 이름과 채팅 내용을 보여주는 chat_message.drat 파일을 생성했다.
채팅을 보낸 사람의 아이콘을 CircleAvatar로 표현을 했고 이름을 우선 “ID or Name”이라 임의로 지정을 했고 채팅 내용인 txt를 보이게끔 하였다.
다음은 home_page.dart 파일 코드의 일부분이다.
앞선 코드에서 ListView위젯을 추가해줘서 채팅 목록들이 상단부분에 위치하고 메시지입력창과 send버튼을 하단부분에 위치하게 하였다.
채팅내용을 임의로 “testing message”와 “this is the message”라고 설정을 해주었다.
실행결과
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
https://www.youtube.com/watch?v=aBeJb3gZQZY&t=4711s
유튜브채널 더코딩파파님의 90분 채팅앱 만들기 - Flutter | Lv.2(초중급) 영상을 참고하면서 공부했다.
채팅어플에서 사용자가 텍스트를 입력하고 send 버튼을 눌렀을 때 해당 내용이 터미널에 출력되고 해당 텍스트들이 없어지게 clear하게끔 하기 위해 몇가지 코드를 추가하였다.
우선 Expanded안에 있는 TextField위젯안에 컨트롤러를 설정해줘서 우리가 적은 텍스트를 터미널에 출력하게끔 컨트롤링해주기 위해서 텍스트 에디팅컨트롤러 객체를 생성해준다.
그리고 코드 하단 부분의 FlatButton의 onPressed에서 버튼을 눌렀을 때 아까 설정해준 컨트롤러의 텍스트를 출력하게 해주었다.
버튼 말고도 자판기의 OK버튼을 눌렀을 때도 터미널에 텍스트를 출력하게 해주기 위해서 Textfield위젯 안에 있는 onSubmitted에 역시 텍스트를 받아 출력하게 해주었다.
FlatButton과 onSubmitted 안에 있는 코드의 내용들이 비슷하기 때문에 따로 _handleSubmitted 함수를 만들어줘서 함수를 대입해주면 코드가 더 간결해진다.
그리고 send 버튼을 눌렀을 때 해당 텍스트들을 클리어하기위해 컨트롤러에 clear함수를 지정해주었다. 최종 코드이다.
실행결과
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
https://www.youtube.com/watch?v=aBeJb3gZQZY&t=4711s
유튜브채널 더코딩파파님의 90분 채팅앱 만들기 - Flutter | Lv.2(초중급) 영상을 참고하면서 공부했다.
지금 만들고 있는 어플은 채팅어플로 메시지를 입력할때마다 상태가 바뀐다.
따라서 StatelessWidget을 StatefulWidget으로 변경했다.
그 다음 Container안에서 padding을 통해 왼쪽과 오른쪽의 공간을 만들어 주었고,
FlatButton을 생성해주었다.
FlatButton은 가로 세로 기본값이 설정되어 있고 TextField는 가로 세로 기본값이 설정이 안돼어 있기 때문에
Expanded 위젯을 통해서 Row안에있는 FlatButton을 제외한 나머지 내용물들을 다 차지하게끔 설정을 해주었다.
실행결과
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
채팅앱 만들기(Flutter)
https://www.youtube.com/watch?v=aBeJb3gZQZY&t=4711s
유튜브채널 더코딩파파님의 90분 채팅앱 만들기 - Flutter | Lv.2(초중급) 영상을 참고하면서 공부했다.
우선 lib폴더에 home_page.dart 파일을 만들어주었다.
home_page.dart 파일은 앱을 실행시켰을때 보여주는 화면이다.
안드로이드는 material.dart 패키지를 import 해주고 iOS는 cupertino.dart 패키지를 import 해준다.
StatelessWidget은 변경 가능한 상태가 필요하지 않은 widget이다.
Scaffold는 해석하면 발판이라는 뜻으로, API 문서에 적힌 클래스 설명은 서랍, 스낵바, 하단 시트를 보여주고 플로팅 버튼을 보여준다.
즉, 가장 최 상단, 중간 영역, 최하단, 그리고 떠 있는 버튼을 지원해주는 클래스다.
그림을 보면 AppBar의 title을 Chat App으로 변경했다.
다음은 main.dart 파일이다.
StatelessWidget 안에 있는 코드를 보면 primarySwatch 를통해 테마칼러를 지정해준다.
그리고 home : HomePage()를 통해서 앞선 home_page.dart파일에 있는 HomePage()클래스를 어플 화면에 나타냄을 알 수 있다.
실행결과
