Flutter：如何根据组件宽度自动缩放文本组件

我开发了一个带全屏PageView的Flutter应用，每个页面包含图片和底部文本。页面滑动时，下一页从当前页后方出现，宽度逐渐增大到全屏。目前的问题是，下一页宽度较小时，内部文本会自动重排版，我希望文本能根据宽度自动缩放，避免这种情况。

组件代码 #

@override
Widget build(BuildContext context) {
  launchURL(String readMoreURL) async {
    await FlutterWebBrowser.openWebPage(url: readMoreURL);
  }

  cardModel.read = true;

  return Container(
      color: Colors.white,
      child: Column(
        children: [
          Expanded(
            flex: 35,
            child: Image.network(
              cardModel.imageUrl,
              fit: BoxFit.cover,
              errorBuilder: (context, error, stackTrace) {
                return Container(
                    color: const Color(0xFFF3D2BB),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(
                          Icons.error_outline,
                          color: Color(0xFFB42D1E),
                          size: 50,
                        ),
                        const SizedBox(height: 10),
                        Text(
                          'Failed to load image',
                          style: GoogleFonts.sarabun(
                              fontSize: 16, color: const Color(0xFFB42D1E)),
                        ),
                      ],
                    ));
              },
            ),
          ),
          Expanded(
            flex: 65,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    cardModel.title,
                    style: GoogleFonts.sarabun(
                        fontSize: 20, fontWeight: FontWeight.bold, height: 1.4),
                  ),
                  const SizedBox(height: 5),
                  Text(
                    cardModel.body,
                    style: GoogleFonts.sarabun(fontSize: 19, height: 1.4),
                  ),
                  const SizedBox(height: 10),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        cardModel.formattedTimestamp,
                        style: const TextStyle(
                          fontSize: 14,
                          color: Colors.grey,
                        ),
                      ),
                      const Text(
                        " • ",
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.grey,
                        ),
                      ),
                      InkWell(
                        onTap: () => launchURL(cardModel.url),
                        child: const Text(
                          "Source",
                          style: TextStyle(
                              fontSize: 14,
                              color: Colors.blue,
                              decoration: TextDecoration.underline,
                              decorationColor: Colors.blue),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ));
}

已尝试方法 #

试过用FittedBox包裹文本列，但文本整体缩放过度，布局变形，不符合预期。

可行解决方案 #

方案1：使用AutoSizeText组件（推荐） #

auto_size_text包可以自动调整文本字号以适配容器宽度，同时保持文本布局结构不变，不会出现重排版。

1. 添加依赖到pubspec.yaml：

dependencies:
  auto_size_text: ^3.0.0

2. 替换原Text组件为AutoSizeText，设置最大行数和最小字号：

// 标题部分替换为
AutoSizeText(
  cardModel.title,
  style: GoogleFonts.sarabun(
      fontSize: 20, fontWeight: FontWeight.bold, height: 1.4),
  maxLines: 2, // 根据页面布局需求设置最大行数
  minFontSize: 16, // 限制最小字号，避免文本过小
),

// 正文部分替换为
AutoSizeText(
  cardModel.body,
  style: GoogleFonts.sarabun(fontSize: 19, height: 1.4),
  maxLines: 10, // 根据页面高度设置合理的最大行数
  minFontSize: 14,
),

方案2：基于页面宽度动态计算字号 #

通过监听PageView的滑动偏移，计算当前页面的缩放比例，动态调整文本字号。

1. 初始化PageController并监听偏移：

final PageController _pageController = PageController();
double _scaleFactor = 1.0;

@override
void initState() {
  super.initState();
  _pageController.addListener(() {
    final screenWidth = MediaQuery.of(context).size.width;
    final offset = _pageController.offset;
    // 计算缩放比例，可根据动画效果调整系数0.2
    _scaleFactor = 1 - (offset % screenWidth) / screenWidth * 0.2;
    setState(() {});
  });
}

2. 在文本组件中应用缩放后的字号：

Text(
  cardModel.title,
  style: GoogleFonts.sarabun(
      fontSize: 20 * _scaleFactor, fontWeight: FontWeight.bold, height: 1.4),
),
Text(
  cardModel.body,
  style: GoogleFonts.sarabun(fontSize: 19 * _scaleFactor, height: 1.4),
),

方案3：用Transform.scale整体缩放文本区域 #

将整个文本列用Transform.scale包裹，根据页面宽度动态调整缩放比例，实现文本区域整体缩放，避免重排版。

Expanded(
  flex: 65,
  child: Padding(
    padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
    child: Transform.scale(
      scale: _scaleFactor, // 同方案2中计算的缩放比例
      alignment: Alignment.topLeft, // 保持文本左上角对齐，防止偏移
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          // 原有的标题、正文、时间等组件
        ],
      ),
    ),
  ),
),

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