如何在Flutter中实现图片旁剩余空间文本居中并避免溢出？

Got it, let's tweak your code to get the exact behavior you want—text centered vertically in the space left by the avatar, with no overflow issues. Here's how to do it:

Modified Code #

Widget build(BuildContext context) {
  return Card(
    color: Theme.of(context).scaffoldBackgroundColor,
    elevation: 0,
    child: Column(
      children: [
        Divider(
          thickness: 2,
          color: Colors.white,
          height: 0,
        ),
        Row(
          children: [
            // Avatar container (keeps fixed size, no extra padding needed)
            Container(
              width: 100,
              height: 100,
              child: CircleAvatar(
                radius: 50,
                backgroundImage: NetworkImage(imageUrl),
              ),
            ),
            // Expanded takes all remaining space in the Row
            Expanded(
              child: Padding(
                // Replace rigid all-around padding with horizontal spacing
                padding: EdgeInsets.symmetric(horizontal: 16),
                child: Column(
                  // Vertically center text within the expanded space
                  mainAxisAlignment: MainAxisAlignment.center,
                  // Align text to the left (adjust to Center if you want horizontal centering)
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      name,
                      style: TextStyle(
                        fontSize: 30,
                        color: Colors.white,
                      ),
                      // Prevent overflow with ellipsis if text is too long
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                    ),
                    // Add clean space between the two text widgets
                    SizedBox(height: 8),
                    Text(
                      modalityText,
                      style: TextStyle(
                        fontSize: 10,
                        color: Colors.white,
                      ),
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

Key Changes Explained #

• Expanded for dynamic space: Wrapping the text container with Expanded ensures it automatically fills all the space left after the avatar. No more fixed widths or content spilling off-screen.
• Controlled padding: Replaced EdgeInsets.all(40) with EdgeInsets.symmetric(horizontal:16) to avoid wasting vertical space and keep the layout tight but readable.
• Text overflow protection: Added overflow: TextOverflow.ellipsis and maxLines:1 to both Text widgets. If the text is longer than the available space, it'll truncate with an ellipsis instead of breaking the layout.
• Vertical centering: mainAxisAlignment: MainAxisAlignment.center on the Column keeps the text perfectly aligned vertically with the avatar.
• Intentional spacing: Used SizedBox(height:8) instead of container padding to create space between the two text lines—this is more flexible and easier to adjust than padding a container.

Optional Tweaks #

• If you want the text to be centered horizontally instead of left-aligned, change crossAxisAlignment: CrossAxisAlignment.start to CrossAxisAlignment.center.
• If name might need to wrap to two lines, adjust maxLines:2 and keep overflow: TextOverflow.ellipsis to handle extra-long text.

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