Flutter Whatsapp reply widget design

Question

I'm trying to create a whatsapp like chat view, with a reply message box within a chat message...as below

The problem I'm facing is to expand the left brown vertical border box to the height of the Column (with dynamic texts) on its right.

I used the Intrinsic height option as below to make it work

IntrinsicHeight(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Container(
        width: 4,
        // constraints: BoxConstraints.expand(width: 4),
        decoration: BoxDecoration(
          color: _postColor,
          borderRadius: const BorderRadius.only(
              topLeft: const Radius.circular(4.0),
              bottomLeft: const Radius.circular(4.0)),
        ),
      ),
      Expanded(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(6, 4, 8, 4),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(msg?.postByName),
              Text(msg?.message ?? ''),
            ],
          ),
        ),
      ),
    ],
  ),
)

Since the chats can be very long, and the reply boxes many, I'm concerned about using the expensive IntrinsicHeight widget.

What I've tried already:

Expanded on the brown container does not work as all of this is in a scrollable view of the page. so the expanded makes the box full screen.
Constraints on the container don't work, content vanishes.
Adding borderside on the container was an idea, but Containers don't allow curved borderRadius with borderside.

Any other ideas?

user_15215450 · Answer

Using the package https://pub.dev/packages/flutter_chat_bubble

Please refer to below code

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_chat_bubble/bubble_type.dart';
import 'package:flutter_chat_bubble/chat_bubble.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_6.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            ChatBubble(
              padding: EdgeInsets.all(4.0),
              backGroundColor: Colors.greenAccent,
              clipper: ChatBubbleClipper6(
                type: BubbleType.sendBubble,
                nipSize: 5.0,
              ),
              child: Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 5.0,
                  vertical: 4.0,
                ),
                decoration: BoxDecoration(
                  color: Colors.greenAccent,
                  borderRadius: BorderRadius.circular(
                    8.0,
                  ),
                ),
                child: Column(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.lightGreen,
                        borderRadius: BorderRadius.circular(
                          8.0,
                        ),
                      ),
                      child: Column(
                        children: [
                          IntrinsicHeight(
                            child: Row(
                              children: [
                                Container(
                                  decoration: BoxDecoration(
                                    color: Colors.red,
                                    borderRadius: BorderRadius.only(
                                      bottomLeft: Radius.circular(
                                        8.0,
                                      ),
                                      topLeft: Radius.circular(
                                        8.0,
                                      ),
                                    ),
                                  ),
                                  width: 7.0,
                                ),
                                Expanded(
                                  child: Padding(
                                    padding: const EdgeInsets.all(6.0),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          "Title",
                                          style: TextStyle(
                                            fontSize: 18.0,
                                            color: Colors.red,
                                          ),
                                        ),
                                        Text(
                                          "SubTitle Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,",
                                          style: TextStyle(
                                            fontSize: 14.0,
                                            color: Colors.black,
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        children: [
                          Text(
                              "Text message.....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,..........."),
                          SizedBox(
                            height: 5.0,
                          ),
                          Align(
                            alignment: Alignment.bottomRight,
                            child: Text("12:56 PM"),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter Whatsapp reply widget design

1 Answers