Flutter中点击Tab跳转至SecondRoute出现黑屏问题求助

嘿，我之前也碰到过一模一样的问题！你遇到的黑屏根源并不是替换MaterialApp为Scaffold的问题，核心原因是你的FirstMain组件没有被MaterialApp包裹——MaterialApp是Flutter路由管理的核心容器，它为Navigator提供了必要的上下文环境，没有它的话，路由系统根本没法正确渲染新页面。

解决步骤 #

• 把MaterialApp作为你的应用根组件，将FirstMain设置为它的首页或者初始路由页面
• 确保所有需要使用Navigator的组件，都处在MaterialApp的子树范围内

修正后的完整代码示例 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const FirstMain(), // 将FirstMain作为MaterialApp的首页
    );
  }
}

class FirstMain extends StatelessWidget {
  const FirstMain({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const TabviewWidget(),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SecondRoute()),
                );
                // 导航后记得关闭抽屉，提升用户体验
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  const SecondRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton( // 注意：RaisedButton已被废弃，推荐用ElevatedButton
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

// 补充TabviewWidget的基础实现（如果你的还没完成）
class TabviewWidget extends StatelessWidget {
  const TabviewWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('First Page Content'));
  }
}

额外小提示 #

1. 我顺手把你代码里的RaisedButton换成了ElevatedButton，因为前者在Flutter新版本中已经被官方废弃了
2. 点击列表项导航后，记得调用Navigator.pop(context)关闭抽屉，避免用户回到首页后抽屉还处于展开状态

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