Flutter中如何去除Text组件右侧的空白区域？

如图所示，Text组件右侧存在空白区域，已知通过CustomPainter计算文本宽度可以解决，但有没有无需计算宽度的更简便方法？

以下是三种无需计算文本宽度的解决方案：

方案一：关闭Text的软换行 #

默认情况下Text会自动换行，容器会预留换行所需的额外空间。关闭软换行后，容器会贴合文本的实际单行宽度：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              Flexible(
                child: Container(
                  color: Colors.green,
                  child: Text(
                    "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT",
                    style: TextStyle(fontSize: 20),
                    softWrap: false, // 关闭软换行
                    overflow: TextOverflow.visible, // 控制文本溢出行为，可根据需求替换为ellipsis等
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

方案二：用FittedBox包裹Text #

FittedBox会自动根据子组件的尺寸调整自身大小，完美贴合文本的实际宽度，同时支持通过fit参数控制文本的缩放逻辑：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              Container(
                color: Colors.green,
                child: FittedBox(
                  fit: BoxFit.contain, // 保持文本原始比例，不会拉伸变形
                  child: Text(
                    "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT",
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

方案三：使用IntrinsicWidth约束容器 #

IntrinsicWidth会根据子组件的固有宽度来约束父容器，让容器严格贴合文本的实际宽度，不会产生额外留白：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              IntrinsicWidth(
                child: Container(
                  color: Colors.green,
                  child: Text(
                    "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT",
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

各方案适用场景 #

• 方案一：适合需要单行展示文本，允许文本溢出屏幕（或通过overflow处理溢出）的场景。
• 方案二：适合需要文本自适应容器空间，同时保持排版比例的场景，不会出现溢出问题。
• 方案三：适合需要容器严格贴合文本宽度的场景，但由于需要计算子组件固有尺寸，性能上略逊于前两种。

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