Flutter导航后新页面Text Widget无法渲染文本问题求助

问题场景 #

在MaterialApp中配置了命名路由：

routes: <String, WidgetBuilder>{
  '/home': (BuildContext context) => Home(),
  '/recipes': (BuildContext context) => const Recetas(),
}

首页功能正常，但跳转到Recetas页面后，body中的Text组件无法正常显示文本，页面代码如下：

// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';
import 'package:naturale_app/constraits.dart';

class Recetas extends StatelessWidget {
  const Recetas({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kSecondaryColor,
      appBar: AppBar(
        backgroundColor: kPrimaryColor,
        title: const Text("Recetas"),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            color: kWhiteColor,
            borderRadius: BorderRadius.circular(10),
          ),
          child: const Text( // 此处文本无法渲染
            "Recetas",
            style: TextStyle(
              color: kBlackColor,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

问题原因 #

核心原因是外层Container没有设置尺寸约束。当Container的父组件是Center时，Container会默认收缩到子组件的大小，但Text组件本身没有额外的内边距或尺寸，导致Container的装饰（背景色、圆角）没有足够空间展开，甚至挤压Text组件导致无法显示。

解决办法 #

方法1：给Container设置固定宽高并居中对齐

body: Center(
  child: Container(
    width: 220,
    height: 80,
    decoration: BoxDecoration(
      color: kWhiteColor,
      borderRadius: BorderRadius.circular(10),
    ),
    alignment: Alignment.center, // 确保文本在容器内居中
    child: const Text(
      "Recetas",
      style: TextStyle(
        color: kBlackColor,
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

方法2：给Container添加内边距

通过padding让容器获得足够空间，同时自然包裹文本：

body: Center(
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
    decoration: BoxDecoration(
      color: kWhiteColor,
      borderRadius: BorderRadius.circular(10),
    ),
    child: const Text(
      "Recetas",
      style: TextStyle(
        color: kBlackColor,
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

方法3：额外排查颜色常量

检查constraits.dart中的颜色定义，确认kBlackColor与kWhiteColor颜色差异明显，避免因颜色重叠导致文本不可见。

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