Pixel overflow to the right

Question

---

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:wound/Themes/Themes.dart';

class LineItem extends StatelessWidget {
  const LineItem({
    Key key,
    @required this.title,
    @required this.icon,
    @required this.name,
    @required this.iconColor,
  }) : super(key: key);

  final String title;
  final IconData icon;
  final String name;
  final Color iconColor;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          height: 48,
          width: 2,
          decoration: BoxDecoration(
            color: Themes.darkGreen.withOpacity(0.5),
            borderRadius: BorderRadius.all(Radius.circular(4.0)),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  FaIcon(
                    icon,
                    size: 21,
                    color: iconColor,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 4, bottom: 2),
                    child: Text(
                      title,
                      textAlign: TextAlign.left,
                      softWrap: true,
                      style: TextStyle(
                        fontFamily: Themes.fontName,
                        fontWeight: FontWeight.w500,
                        fontSize: 14,
                        letterSpacing: -0.1,
                        color: Themes.grey.withOpacity(0.5),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 2,
              ),
              Container(
                child: Padding(
                  padding: const EdgeInsets.only(left: 4, bottom: 3),
                  child: Row(
                    children: [
                      Text(
                        name,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontFamily: Themes.fontName,
                          fontWeight: FontWeight.w400,
                          fontSize: 16,
                          color: Themes.darkerText,
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ],
    );
  }
}

the Text name overflows to the right whenever the text gets to long however i tried using an expanded but it causes an error saying incorrect parent and the revevant widget causing the error is the row at the start, anyone know how to fix this ive tried everything but it still causes and error thank you

Answer 1

Replace this:

Container(
            child: Padding(
              padding: const EdgeInsets.only(left: 4, bottom: 3),
              child: Row(
                children: [
                  Text(
                    name,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontFamily: Themes.fontName,
                      fontWeight: FontWeight.w400,
                      fontSize: 16,
                      color: Themes.darkerText,
                    ),
                  ),
                ],
              ),
            ),
          )

with:

SizedBox(
            width: MediaQuery.of(context).size.width*0.9,
            child: Padding(
              padding: const EdgeInsets.only(left: 4, bottom: 3),
              child: Text(
                name,
                textAlign: TextAlign.center,
                softWrap: true,
                maxLines: 3,
                style: TextStyle(
                  fontFamily: Themes.fontName,
                  fontWeight: FontWeight.w400,
                  fontSize: 16,
                  color: Themes.darkerText,
                ),
              ),
            ),
          )

Answer 2

You can Use my code here i added Expanded in both Rows main Row and sub Row. I think yo tried with 1 row Expanded so i gives error.

class LineItem extends StatelessWidget {
  const LineItem({
    Key key,
    @required this.title,
    @required this.icon,
    @required this.name,
    @required this.iconColor,
  }) : super(key: key);

  final String title;
  final IconData icon;
  final String name;
  final Color iconColor;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          height: 48,
          width: 2,
          decoration: BoxDecoration(
            color: Themes.darkGreen.withOpacity(0.5),
            borderRadius: BorderRadius.all(Radius.circular(4.0)),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    FaIcon(
                      icon,
                      size: 21,
                      color: iconColor,
                    ),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 4, bottom: 2),
                        child: Text(
                          title,
                          textAlign: TextAlign.left,
                          softWrap: true,
                          style: TextStyle(
                            fontFamily: Themes.fontName,
                            fontWeight: FontWeight.w500,
                            fontSize: 14,
                            letterSpacing: -0.1,
                            color: Themes.grey.withOpacity(0.5),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 2,
                ),
                Container(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 4, bottom: 3),
                    child: Row(
                      children: [
                        Text(
                          name,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: Themes.fontName,
                            fontWeight: FontWeight.w400,
                            fontSize: 16,
                            color: Themes.darkerText,
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    );
  }
}