Chris
Chris

Reputation: 2274

Flutter text is not wrapping inside Row

I have a simple Widget with a Row and Text inside of it. If the Text is longer it should simply go in the next line but right now it is staying in one line and giving me an overflow:

enter image description here

This is my code for it:

class HintKeyPoint extends StatelessWidget {
  final String text;

  const HintKeyPoint({
    required this.text,
  });
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          width: scaleWidth(10),
        ),
        Container(
          height: scaleWidth(16),
          width: scaleWidth(16),
          decoration: BoxDecoration(
              color: AppColors.primaryLight, shape: BoxShape.circle),
        ),
        SizedBox(
          width: scaleWidth(10),
        ),
        Text(
          text,
          style: AppTextStyles.h7,
        ),
      ],
    );
  }
}

Why is the Text not taking the vertical space? What am I doing wrong here?

Upvotes: 0

Views: 115

Answers (2)

Moaid ALRazhy
Moaid ALRazhy

Reputation: 1744

You need to wrap the Text Widget with Expanded Widget.

Example:

Expanded(
    child: Text(
    "lorem10 lorem10 lorem10lorem10lorem10lorem10lorem10 lorem10lorem10lorem10lorem10lorem10 lorem10lorem10lorem10lorem10lorem10 lorem10",
    ),
),

Upvotes: 1

Alex Radzishevsky
Alex Radzishevsky

Reputation: 3768

Wrap Text widget with Expanded.

Upvotes: 1

Related Questions