Flutter Web桌面渲染正常，移动端模式刷新后仅显示AppBar无游戏内容

问题现象 #

• 桌面浏览器中应用渲染完全正常，设置了类似竖屏移动端的窄条布局（未使用全屏宽度）
• 通过F12切换到移动端尺寸并刷新后，仅AppBar正常显示，游戏其余内容全部消失
• 从桌面窗口尺寸逐步缩小到移动端尺寸时，布局可正常自适应调整，但刷新移动端模式就会出现内容丢失问题
• 已尝试过相关解决方案但无效，调试日志中无报错或像素溢出提示

相关代码 #

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  app = await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  auth = FirebaseAuth.instanceFor(app: app);

  runApp(const ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'WORDSUITE',
        theme: ThemeData(
          primaryColor: const Color(0xffc3e1f3),
          textTheme: GoogleFonts.interTextTheme(),
        ),
        home: const FrontPage(),
        routes: {
          '/result': (context) => const ResultScreen(),
        });
  }
}

class _FrontPageState extends ConsumerState<FrontPage> {

...
...
@override
  Widget build(context) {
    return Scaffold(
      backgroundColor: Colors.black54,
      appBar: const CustomAppBar(),
      body: (userScore.isInit)
          ? const Center(child: Loading())
          : Center(
              child: Container(
                width: userScore.boxwidth,
                alignment: Alignment.center,
                decoration: const BoxDecoration(color: Color(0xffe5e1da)),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    const SizedBox(height: 20),
                    Consumer(builder: (BuildContext context, WidgetRef ref, _) {
                      return const Hints();
                    }),
                    const SizedBox(height: 20),
                    FittedBox(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const SizedBox(width: 10),
                          GestureDetector(
                              onTap: () {
                                setState(() {
                                  userScore.setActiveBoxValue(0);
                                });
                              },
                              child: WordBox(
                                wordList.todaysword?.firstpuzzle ?? [],
                                userScore.activeBox[0],
                                0,
                                refresh,
                              )),
                          const SizedBox(width: 5),
                          GestureDetector(
                              onTap: () {
                                setState(() {
                                  userScore.setActiveBoxValue(1);
                                });
                              },
                              child: WordBox(
                                  wordList.todaysword?.secondpuzzle ?? [],
                                  userScore.activeBox[1],
                                  1,
                                  refresh)),
                          const SizedBox(width: 5),
                          GestureDetector(
                              onTap: () {
                                setState(() {
                                  userScore.setActiveBoxValue(2);
                                });
                              },
                              child: WordBox(
                                  wordList.todaysword?.thirdpuzzle ?? [],
                                  userScore.activeBox[2],
                                  2,
                                  refresh)),
                          const SizedBox(width: 10),
                        ],
                      ),
                    ),
                    const SizedBox(height: 20),
                    SizedBox(
                      width: userScore.boxwidth * 0.95,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(12.0),
                        child: Container(
                          padding: const EdgeInsets.all(20.0),
                          alignment: Alignment.bottomCenter,
                          decoration:
                              const BoxDecoration(color: Color(0xfffbf9f1)),
                          child: FlexiText(
                              wordList.todaysword?.fourthpuzzle ?? '',
                              userScore.activeBox[3],
                              3,
                              refresh),
                        ),
                      ),
                    ),
                    const SizedBox(height: 30),
                    FittedBox(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          TextButton(
                            onPressed: () => activateHint(HintType.sp),
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                Image.asset('assets/images/btn.png'),
                                const Text(
                                  '#L',
                                  style: TextStyle(
                                      fontSize: 28, color: Colors.black),
                                )
                              ],
                            ),
                          ),
                          TextButton(
                            onPressed: () => activateHint(HintType.ltr),
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                Image.asset('assets/images/btn.png'),
                                const Text(
                                  'LTR',
                                  style: TextStyle(
                                      fontSize: 28, color: Colors.black),
                                )
                              ],
                            ),
                          ),
                          TextButton(
                            onPressed: () => activateHint(HintType.ba),
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                Image.asset('assets/images/btn.png'),
                                const Text(
                                  'B/A',
                                  style: TextStyle(
                                      fontSize: 28, color: Colors.black),
                                )
                              ],
                            ),
                          ),
                          TextButton(
                            onPressed: () => rvlHint(),
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                Image.asset('assets/images/btn.png'),
                                const Text(
                                  'RVL',
                                  style: TextStyle(
                                      fontSize: 28, color: Colors.black),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(height: 80),
                    MyKeyboard(
                      onTextInput: (myText) {
                        _insertText(myText);
                      },
                      onBackspace: () {
                        _backspace();
                      },
                      onEnter: () {
                        _onEnter();
                      },
                    ),
                  ],
                ),
              ),
            ),
    );
}

排查建议 #

1. 检查userScore.boxwidth的初始化逻辑
   这个宽度值很可能是在桌面尺寸下一次性初始化的，刷新移动端时没有重新计算。建议在build方法中根据当前屏幕尺寸动态生成，比如替换为MediaQuery.of(context).size.width * 0.85这类相对值，或者用LayoutBuilder监听容器尺寸变化，实时更新宽度。

2. 给Column添加滚动或高度限制
   移动端屏幕高度有限，Column的内容可能超出可视区域被隐藏。给Column外层套上SingleChildScrollView，或者用LayoutBuilder获取父容器高度，设置Column的mainAxisSize: MainAxisSize.min并配合Expanded调整子组件高度。

3. 优化FittedBox的适配逻辑
   多个FittedBox嵌套可能在小尺寸下导致布局压缩异常。可以给FittedBox指定fit: BoxFit.scaleDown，或者检查内部Row的子组件是否有固定宽度，导致在移动端无法收缩。

4. 验证userScore.isInit状态
   确认移动端刷新时userScore.isInit是否正确切换为false，避免内容被Loading组件覆盖（虽然日志没提示，但异步初始化在移动端可能有延迟）。

5. 使用Flutter Web调试工具
   打开浏览器DevTools的Flutter标签，查看Widget树，确认内容是否存在但被隐藏或偏移，检查各个容器的尺寸和位置，定位具体哪个组件没有渲染。

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