Flutter将自定义Widget放入TabBarView的children后页面白屏如何解决

你的代码存在两个核心布局逻辑错误，直接导致白屏：

• 控制器不匹配：顶部的TabBar被包裹在DefaultTabController中，而底部的TabBarView绑定的是你手动初始化的自定义tabController，两者属于完全独立的控制器，状态无法同步，触发布局渲染异常。
• TabBarView无明确高度约束：TabBarView默认会填充父容器的可用高度，但你将它放在了Column+SingleChildScrollView的无边界垂直高度结构中，TabBarView无法计算自身有效高度，最终渲染失败。

1. 统一控制器：删除包裹TabBar的DefaultTabController组件，给TabBar也绑定你已经初始化的自定义tabController，保证两者状态同步。
2. 给TabBarView添加明确高度：给包裹TabBarView的父容器设置固定高度，高度值可以根据你的页面布局调整，比如用屏幕高度减去顶部容器高度和边距即可。
3. 可选校验：如果修改后仍有异常，可以单独校验LoginPage、Sign_up组件是否存在资源引用错误、布局语法错误。

修改TabBar部分 #

// 删掉原来的DefaultTabController包裹层，直接写TabBar并绑定controller
TabBar(
  controller: tabController,
  labelColor: Colors.black,
  indicatorColor: const Color(0xffFA4A0C),
  indicatorPadding: const EdgeInsets.only(left: 38, right: 38),
  labelStyle: GoogleFonts.lato(
      fontSize: 20, fontWeight: FontWeight.w600),
  tabs: const [
    Tab(
      text: "Login",
    ),
    Tab(
      text: "Sign-Up",
    ),
  ],
)

修改TabBarView部分 #

Container(
  margin: const EdgeInsets.only(top: 40),
  padding: const EdgeInsets.symmetric(horizontal: 50),
  // 新增明确高度，数值可根据实际布局调整
  height: MediaQuery.of(context).size.height - 340,
  child: TabBarView(
    controller: tabController,
    children: const [LoginPage(), Sign_up()],
  ),
)

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