如何实现Flutter文本全屏幕适配？容器尺寸调整求助

你的问题核心是外层Container用了固定宽度350，这在不同尺寸的设备上必然会出现排版问题——小屏幕会溢出，大屏幕则留白过多。以下是针对性的修改方案，让布局完全适配所有屏幕：

修改步骤及核心优化点 #

• 移除固定宽度，改用自适应布局匹配屏幕尺寸
• 添加内边距避免文本贴边
• 确保RTL文本自动换行正常

修改后的完整代码 #

Container(
  // 替换固定宽度为屏幕宽度的百分比，这里取90%留边距，可根据需求调整
  width: MediaQuery.of(context).size.width * 0.9,
  // 添加内边距，让文本和容器边缘有间距，提升可读性
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  child: FutureBuilder(
    future: GetJuz(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return Center(child: CircularProgressIndicator());
      } else if (snapshot.hasError) {
        // 新增错误状态处理，避免空指针崩溃
        return Center(child: Text('加载失败'));
      } else {
        var ayat = snapshot.data!;
        
        return Container(
          child: RichText(
            textDirection: TextDirection.rtl,
            // 显式开启自动换行，确保RTL文本在任何屏幕上都能正常折行
            softWrap: true,
            overflow: TextOverflow.visible,
            text: TextSpan(
              children: [
                for (var element in ayat) ...[
                  if (element.page == "5")
                    TextSpan(
                      text: element.codes.toString().replaceAll(" ", ""),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          print(element.text);
                        },
                      style: TextStyle(
                        fontFamily: 'Schyler',
                        fontSize: MediaQuery.of(context).size.width * 0.05,
                        color: Colors.black,
                      ),
                    ),
                ],
              ],
            ),
          ),
        );
      }
    },
  ),
),

额外优化建议 #

1. 如果希望布局更灵活，可以把外层的Container换成Expanded（放在Row/Column里时），让它自动填充可用空间，无需手动计算宽度。
2. 字体大小用宽度比例是对的，但可以用Clamp限制最小/最大字号，避免在极小或极大屏幕上字体异常：

   fontSize: clampDouble(
     MediaQuery.of(context).size.width * 0.05,
     16, // 最小字号
     24, // 最大字号
   ),
   

   记得先导入import 'dart:math';。

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