面对Flutter 中的行和列问题

作为Flutter 翼的初学者，我正在努力实现绿色微件上下两侧的动态调整，以及右侧微件部件的上下两侧的动态调整.此外，我正在寻求如何解决图像中显示的溢出问题的指导.

先谢谢你

我已经将我的代码包含在下面，并try 了各种方法来实现所需的设计.然而，我并没有成功地完成它.有没有人能给我详细解释一下如何实现这个设计？

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  const IomHistory2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return history();
  }

  Widget history() {
    return Container(
      color: Colors.lightBlue,
      child: Row(
        //crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          leftContainer("1", Colors.green),
          Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                rightContainer(
                    "Forgot to attendance punch, i was in the office from 8.30 to 6.20",
                    null,
                    false),
                rightContainer("23/01/2023-23/01/2023", Icons.date_range, true),
                rightContainer("08:30-18:20", Icons.access_time, true),
                rightContainer("Accepted", Icons.done, true),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget leftContainer(String totalDays, Color color) {
    return Container(
      padding: const EdgeInsets.only(top: 16, bottom: 16, left: 8, right: 8),
      decoration: BoxDecoration(
          color: color,
          borderRadius: const BorderRadius.only(
              topLeft: Radius.zero,
              topRight: Radius.circular(8.0),
              bottomLeft: Radius.zero,
              bottomRight: Radius.circular(8.0))),
      child: Column(
        //crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: [
          customTextLeftContainer(totalDays),
          customTextLeftContainer("Day"),
        ],
      ),
    );
  }

  Widget rightContainer(String value, IconData? iconData, bool iconShowed) {
    return Container(
      margin: const EdgeInsets.only(left: 8),
      child: Row(
        children: [
          iconShowed ? Icon(size: 14, iconData) : Container(),
          customTextRightContainer(value, iconShowed)
        ],
      ),
    );
  }

  Widget customTextLeftContainer(String value) {
    return Text(value,
        style: const TextStyle(
            fontFamily: 'Rubik', fontSize: 12, fontWeight: FontWeight.bold));
  }

  Widget customTextRightContainer(String value, bool iconShowed) {
    return Container(
      margin: iconShowed
          ? const EdgeInsets.only(left: 8)
          : const EdgeInsets.only(left: 0),
      child: Text(
        value,
        style: const TextStyle(
          fontFamily: 'Rubik',
        ),
      ),
    );
  }

}

100