chat_bubbles_test.dart

import 'dart:math';

import 'package:flutter/material.dart';

const double _kMaxWidthRatio = 0.90;
const double _kMinWidthRatio = 0.45;
const int _kMaxCharRow = 25;

void main() => runApp(MaterialApp(home: Screen()));

class Screen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScreenState();
  }
}

class ScreenState extends State<Screen> {
  final List<String> msgs = [
    'Hi, this is a test. How are you?',
    'Hey!',
    'I\'m fine, and you? Did you see me playing in the yesterday\'s game?',
    'Yes! Why don\'t we catch up later? I would really like to talk about it with you. You were great!',
    'When?',
    '9 PM I\'ll pick you at home!',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return index.isEven ? ChatMessageLeft(msg: msgs[index]) : ChatMessageRight(msg: msgs[index]);
        },
        itemCount: msgs.length,
      ),
    );
  }
}

class ChatMessageLeft extends StatelessWidget {
  ChatMessageLeft({@required this.msg});
  final String msg;

  Widget build(BuildContext context) {
    double widthFactor = ((msg.length * _kMinWidthRatio) / _kMaxCharRow);
    
    return FractionallySizedBox(
      widthFactor: min(_kMinWidthRatio + widthFactor, _kMaxWidthRatio),
      alignment: Alignment.centerLeft,
      child: Container(
        padding: EdgeInsets.all(16.0),
        margin: EdgeInsets.only(
          right: 40.0,
          top: 8.0,
          bottom: 8.0,
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(
            20.0,
          ),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(right: 8.0),
              child: CircleAvatar(
                backgroundColor: Colors.red,
                foregroundColor: Colors.black,
                child: Text(
                  'Test',
                ),
              ),
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    "You",
                    style: Theme.of(context).textTheme.caption,
                  ),
                  Text(
                    msg,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Text(
                        'Test',
                        style: TextStyle(
                          fontSize: 12.0,
                          fontWeight: FontWeight.bold,
                          fontStyle: FontStyle.italic,
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ChatMessageRight extends StatelessWidget {
  ChatMessageRight({@required this.msg});
  final String msg;

  Widget build(BuildContext context) {
    double widthFactor = ((msg.length * _kMinWidthRatio) / _kMaxCharRow);

    return FractionallySizedBox(
        widthFactor: min(_kMinWidthRatio + widthFactor, _kMaxWidthRatio),
        alignment: Alignment.centerRight,
        child: Container(
          padding: EdgeInsets.all(16.0),
          margin: EdgeInsets.only(
            left: 40.0,
            top: 8.0,
            bottom: 8.0,
          ),
          decoration: BoxDecoration(
            color: Colors.black12.withOpacity(0.05),
            borderRadius: BorderRadius.circular(
              20.0,
            ),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Text(
                      "You",
                      style: Theme.of(context).textTheme.caption,
                    ),
                    Text(
                      msg,
                      textAlign: TextAlign.start,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          'Test',
                          style: TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.bold,
                            fontStyle: FontStyle.italic,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
              SizedBox(
                width: 20.0,
              ),
              Container(
                margin: const EdgeInsets.only(right: 16.0),
                child: CircleAvatar(
                  backgroundColor: Colors.red,
                  foregroundColor: Colors.white,
                  child: Text(
                    'Test',
                  ),
                ),
              ),
            ],
          ),
        )
        //),
        );
  }
}