fcs/lib/pages/message_detail.dart

import 'package:fcs/model_fcs/message_model.dart';
import 'package:fcs/fcs/common/helpers/theme.dart';
import 'package:fcs/vo/message.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';

class Bubble extends StatelessWidget {
  Bubble({this.message, this.time, this.delivered, this.isMe});

  final String message, time;
  final delivered, isMe;

  @override
  Widget build(BuildContext context) {
    final bg = isMe ? Colors.white : Colors.greenAccent.shade100;
    final align = isMe ? CrossAxisAlignment.start : CrossAxisAlignment.end;
    final icon = delivered ? Icons.done_all : Icons.done;
    final radius = isMe
        ? BorderRadius.only(
            topRight: Radius.circular(5.0),
            bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(5.0),
          )
        : BorderRadius.only(
            topLeft: Radius.circular(5.0),
            bottomLeft: Radius.circular(5.0),
            bottomRight: Radius.circular(10.0),
          );
    return Column(
      crossAxisAlignment: align,
      children: <Widget>[
        Container(
          margin: const EdgeInsets.all(3.0),
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  blurRadius: .5,
                  spreadRadius: 1.0,
                  color: Colors.black.withOpacity(.12))
            ],
            color: bg,
            borderRadius: radius,
          ),
          child: Stack(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(right: 48.0),
                child: Text(message),
              ),
              Positioned(
                bottom: 0.0,
                right: 0.0,
                child: Row(
                  children: <Widget>[
                    Text(time,
                        style: TextStyle(
                          color: Colors.black38,
                          fontSize: 10.0,
                        )),
                    SizedBox(width: 3.0),
                    Icon(
                      icon,
                      size: 12.0,
                      color: Colors.black38,
                    )
                  ],
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}

class MessageDetail extends StatelessWidget {
  final Message msg;
  const MessageDetail({Key key, this.msg}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    DateFormat dateFormat = DateFormat("HH:mm");
    MessageModel messageModel = Provider.of<MessageModel>(context);
    List<Message> messages = messageModel.getMessage(msg.receiverName);
    List<Bubble> bubbles = messages
        .map((e) => Bubble(
            message: e.message,
            time: dateFormat.format(e.date),
            delivered: true,
            isMe: !(e.isMe != null ? e.isMe : true)))
        .toList();

    return Scaffold(
      appBar: AppBar(
        backgroundColor: primaryColor,
        elevation: .9,
        title: Text(
          msg.receiverName,
        ),
        actions: <Widget>[],
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: bubbles,
          // children: <Widget>[
          //   Bubble(
          //     message: 'Hi there, this is a message',
          //     time: '12:00',
          //     delivered: true,
          //     isMe: false,
          //   ),
          //   Bubble(
          //     message: 'Whatsapp like bubble talk',
          //     time: '12:01',
          //     delivered: true,
          //     isMe: true,
          //   ),
          //   Bubble(
          //     message: 'Nice one, Flutter is awesome',
          //     time: '12:00',
          //     delivered: true,
          //     isMe: true,
          //   ),
          //   Bubble(
          //     message: 'I\'ve told you so dude!',
          //     time: '12:00',
          //     delivered: true,
          //     isMe: false,
          //   ),
          // ],
        ),
      ),
    );
  }
}