개발하는 두더지

코드를 먼저 살펴보면 아래와 같습니다. 하단에 대화를 입력할 수 있는 TextField와 send 버튼이 있고, send 버튼을 누르면 리스트에 텍스트 내용이 하나씩 저장되는 구조입니다. 하나의 채팅 메시지를 나타내는 위젯이 필요합니다. 아래와 같이 ChatMessage라는 StatelessWidget을 만들어줍니다. 메시지를 보낸 사용자를 나타내는 간단한 그래픽 아바타, 보낸 사람 이름이 들어있는 Column 위젯 및 메시지 텍스트를 표시하는 Row 위젯을 리턴합니다. CircleAvatar 위젯을 커스텀하기 위해서 _name 변수 값의 첫 번째 문자를 텍스트 위젯에 전달하여 사용자의 첫 번째 이니셜로 레이블을 지정합니다. CrossAxisAlignment.start를 row 생성자의 crossAxis..