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:
Any other ideas?
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<MyHomePage>
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"),
)
],
),
),
],
),
),
),
],
),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.