Receiving a Render OverFlow Error in Flutter Application for Row

Question

I'm having a render overflow error where text goes off the screen..I'm new to flutter and I can't for the life of me figure out how to fix it. Any pointers on how I could resolve it? I've tried a bunch of different things based on other questions but for whatever reason none of them worked.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:save_extra_money/shared/globals/ProjectColors.dart';

import '../../model/Transaction.dart';

class DetailRow extends StatelessWidget {
  final String fieldName;
  final String text;
  final Color textColor;

  const DetailRow({
    Key? key,
    required this.text,
    required this.fieldName,
    this.textColor = ProjectColors.normalText,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(5),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            alignment: Alignment.topLeft,
            color: Colors.white,
            child: Container(
              child: Flexible(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      fieldName,
                      style: TextStyle(color: Colors.black54),
                    ),
                    Text(
                      text,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: 30,
                      color: textColor),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

Main problem here is that child width is larger than its parents beacuse Container widget child get unbounded width from Row widget

you can write your code after return like this:

Container(
        color: Colors.white,
        padding: const EdgeInsets.all(5),
        child: IntrinsicHeight(
          child: Row(
            children: <Widget>[
              Flexible(
                child: Container(
                  alignment: Alignment.topLeft,
                  color: Colors.white,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        fieldName,
                        style: const TextStyle(color: Colors.black54),
                      ),
                      Text(
                        text,
                        style: const TextStyle(fontSize: 30, color: textColor),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

Also, Text widget has property maxLines, so you can also set the exact number of lines.

IntrinsicHeight is a widget that sizes its child to the child's intrinsic height.

https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html