Flutter Whatsapp 回复小部件设计

Question

我正在尝试创建一个类似whatsapp 的聊天视图，在聊天消息中带有回复消息框...如下所示

我面临的问题是将左侧棕色垂直边框框扩展到其右侧列（带有动态文本）的高度。

我使用下面的固有高度选项使其工作

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 ?? ''),
            ],
          ),
        ),
      ),
    ],
  ),
)

由于聊天可能很长，而且回复框很多，我担心使用昂贵的 IntrinsicHeight 小部件。

我已经尝试过的：

• 在棕色容器上展开不起作用，因为所有这些都在页面的可滚动视图中。因此展开后的框会全屏显示。
• 容器上的约束不起作用，内容消失。
• 在容器上添加边框是一个想法，但容器不允许带有边框的弯曲边框半径。

还有其他想法吗？

Answer 1

使用包https://pub.dev/packages/flutter_chat_bubble

请参考以下代码

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"),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}