Flutter实现红容器与蓝容器等高及首行居中圆点需求

要实现红色容器随蓝色容器动态高度变化、顶部对齐且首行中间显示圆点的需求，只需对代码做以下关键修改：

• 使用IntrinsicHeight包裹Row，强制两个子容器高度一致，红色容器会自动适配蓝色容器的动态高度
• 移除红色容器的固定height属性，避免硬编码导致的高度不匹配
• 设置Row的crossAxisAlignment: CrossAxisAlignment.start确保顶部对齐
• 给红色容器内的圆点添加与蓝色文本一致的顶部padding，保证圆点在首行文本中间位置

修改后的完整代码 #

import 'package:flutter/material.dart';

class InhaltGesetz extends StatelessWidget {
  final String text;
  const InhaltGesetz({
    Key? key,
    required this.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Container(
              color: Colors.red,
              child: Padding(
                padding: const EdgeInsets.only(top: 8),
                child: const Align(
                  alignment: Alignment.topCenter,
                  child: Text(
                    '•',
                    style: TextStyle(fontSize: 25, color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
          Container(
            width: 340,
            color: Colors.blue,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(4, 8, 8, 8),
              child: Text(
                text,
                style: const TextStyle(
                  fontSize: 15.5,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

若蓝色文本需支持滚动的适配方案 #

如果蓝色容器内的文本可能过长需要滚动，只需在蓝色容器内添加SingleChildScrollView并设置shrinkWrap: true（配合IntrinsicHeight使用），代码如下：

// 蓝色容器部分替换为：
Container(
  width: 340,
  color: Colors.blue,
  child: SingleChildScrollView(
    shrinkWrap: true,
    child: Padding(
      padding: const EdgeInsets.fromLTRB(4, 8, 8, 8),
      child: Text(
        text,
        style: const TextStyle(
          fontSize: 15.5,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ),
),

内容的提问来源于stack exchange，提问作者LEGACY