[英]Flutter Whatsapp reply widget design
I'm trying to create a whatsapp like chat view, with a reply message box within a chat message...as below我正在尝试创建一个类似whatsapp的聊天视图,在聊天消息中有一个回复消息框......如下
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.由于聊天可能很长,而且回复框很多,我担心使用昂贵的 IntrinsicHeight 小部件。
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"),
)
],
),
),
],
),
),
),
],
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.