메시지 앱은 의외로 만들 기회가 없었기 때문에, Flutter의 공부가 굳이 만들어 보았습니다.
※이번은, 메세지를 표시하는 리스트 UI만입니다.

처리할 메시지 모델

메시지에서 처리하는 정보는 다음 모델을 정의합니다.
이 모델의 목록을 표시합니다. 이 정의가 최상의 것은 아니므로 양해 바랍니다.

class ChatMessageModel {
  final String avatarUrl; //ユーザのアイコンURL
  final String name;      //名前
  final String datetime;  //メッセージの日時
  final String message;   //メッセージ本文
  final bool isMine;      //メッセージの自身のものか?

  ChatMessageModel({this.avatarUrl, this.name, this.datetime, this.message, this.isMine});
}

메시지 UI의 큰 테두리 만들기

이번 만드는 UI의 이미지는 LINE의 토크라는 메시지를 교환하는 UI입니다.
Flutter의 Widget인 ListView와 ListTile을 사용해 보겠습니다.

ListView에서 ListTile을 정렬

ListView란?

자주 사용되는 스크롤 위젯입니다.
자식 요소를 스크롤하는 세로 방향으로 표시할 수 있습니다.
표시하는 자식 요소의 양이나 동적인지 고정인지에 따라 사용해야 할 생성자가 달라집니다. 이번에는 표시할 리스트의 수가 적기 때문에 디폴트인 채로 갑니다.
for문을 사용해 아이 요소를 늘어놓는 구현으로 합니다.

ListTile이란?

아이콘이나 1행에서 3행까지의 텍스트 등을 머티리얼 디자인의 리스트 사양으로 배치할 수 있는 위젯입니다.
기본적으로 디자인이 완성되고 있으므로, 프로퍼티에 표시하는 것을 설정한다고 하는 친절 설계입니다.
속성의 title 에 메시지 본문, subtitle 에 사용자의 아이콘 이름, 메시지 시간을 표시해 봅니다.
ListView의 자식 요소에 이 ListTile을 정렬합니다.

코딩 한 것이 여기

ListView(
  children: [
    for (int index = 0; index < widget.chatMessageList.length; index++)
      Card(
        child:ListTile(
          title:Text(widget.chatMessageList[index].message),
          subtitle: Row(
            children: <Widget>[
               CircleAvatar(
                 backgroundImage:  NetworkImage(widget.chatMessageList[index].avatarUrl),
                 radius: 10.0,
               ),
               Text(widget.messageList[index].name + widget.chatMessageList[index].datetime),
           ]
),),),],)

코드에 Card가 있지만 위젯입니다. 지금은 ListTile의 외부 프레임 디자인을 위해 사용하고 있습니다.

여기까지의 UI는 이런 느낌. 이것이라면 아직 스레 같네요.

토크 같은 UI로 스타일 조정

스타일을 조정하여 토크 같은 UI로 만듭니다.
Card 속성을 margin로 설정합니다.margin는 CSS이기 때문에 요소 주위의 여백을 설정합니다.
모델에서 정의한 isMine를 사용하여 설정할 마진을 전환합니다.

margin: widget.messageList[index].isMine 
  ? EdgeInsets.only(top: 5.0, left: 90.0, bottom: 5.0, right: 8.0) //自分のメッセージであれば右寄せる
  : EdgeInsets.only(top: 5.0, left: 8.0, bottom: 5.0, right: 90.0) //自分以外は左に寄せる

ListTile의 Row에 mainAxisAlignment를 추가합니다.Row는 가로 및 자식 요소를 표시하는 위젯입니다. 사용자 아이콘, 이름, 메시지 시간mainAxisAlignment 는 플렉스 박스와 같은 레이아웃 설정을 할 수 있습니다.
여기도 isMine를 사용하여 설정을 전환합니다.
mainAxisAlignment 는 붙어서는 여기 가 대단히 참고가 되었습니다.

mainAxisAlignment: widget.messageList[index].isMine 
  ? MainAxisAlignment.end   //アイコン・名前、メッセージの時刻を右寄せにする
  : MainAxisAlignment.start //アイコン・名前、メッセージの時刻を左寄せにする

넣은 것이 여기

ListView(
  children: [
    for (int index = 0; index < widget.chatMessageList.length; index++)
      Card(
        margin: widget.messageList[index].isMine 
          ? EdgeInsets.only(top: 5.0, left: 90.0, bottom: 5.0, right: 8.0)
          : EdgeInsets.only(top: 5.0, left: 8.0, bottom: 5.0, right: 90.0),
        child:ListTile(
          title:Text(widget.chatMessageList[index].message),
          subtitle: Row(
            mainAxisAlignment: widget.messageList[index].isMine 
              ? MainAxisAlignment.end
              : MainAxisAlignment.start,
            children: <Widget>[
               CircleAvatar(
                 backgroundImage:  NetworkImage(widget.chatMessageList[index].avatarUrl),
                 radius: 10.0,
               ),
               Text(widget.messageList[index].name + widget.chatMessageList[index].datetime),
           ]
),),),],)

LINE의 토크 같은 UI가 되었습니다. 전혀 멀지 만 웃음
아직 작성중입니다만 코드는 이쪽에 두고 있습니다.
htps : // 기주 b. 코 m / 타카 구에 ゔ ぁ 라 / F

다음 번 예고

메시지 양식과 제출 버튼 주위를 만드십시오.
htps : // 코 m / 구에 め 라네 t / ms / b40f96c1329d239197fd

Firebase나 slack과 연계해 보고 싶다(욕망)