Flutter Android应用Navigator.push后出现黑屏问题求助

核心问题分析 #

1. Dashboard类未完整定义：代码中仅实现了_DashboardState状态类，但缺少对应的Dashboard StatefulWidget类；同时_DashboardState的build方法仅返回空Container，直接导致跳转后页面无内容显示（黑屏）。
2. Register组件嵌套MaterialApp：在Register的build方法中返回MaterialApp，而主应用（main.dart）应已有顶层MaterialApp，嵌套会破坏导航上下文一致性，可能引发导航异常。

修复步骤 #

1. 完整定义Dashboard组件

在dashboard.dart中补充Dashboard StatefulWidget定义，并修改_DashboardState的build方法，返回带实际内容的页面结构：

import 'package:flutter/material.dart';

// 补充Dashboard StatefulWidget定义
class Dashboard extends StatefulWidget {
  final String title;
  const Dashboard({super.key, required this.title});

  @override
  State<Dashboard> createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    // 替换空Container，返回带内容的Scaffold
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: const Center(
        child: Text('Dashboard页面内容'),
      ),
    );
  }
}

2. 移除Register中的MaterialApp嵌套

修改Register组件，直接返回Scaffold即可，主应用的顶层MaterialApp已提供导航和主题配置：

import 'package:flutter/material.dart';

class Register extends StatelessWidget {
  Register({super.key});
  @override
  Widget build(BuildContext context) {
    Widget title = Row(children: [
      Container(
        child: TextButton(onPressed: () {}, child: const Text("culo")),
      )
    ]);
    // 移除外层MaterialApp，直接返回Scaffold
    return Scaffold(
      body: ListView(children: [title]),
    );
  }
}

3. 确保main.dart的顶层MaterialApp配置

确认main.dart中仅有一个顶层MaterialApp，作为应用的入口导航容器：

import 'package:flutter/material.dart';
import 'dashboard.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        scaffoldBackgroundColor: const Color(0xffffffff),
        primarySwatch: Colors.deepOrange,
      ),
      home: const Register(), // 主入口指向Register
    );
  }
}

验证跳转逻辑 #

此时执行原导航代码：

Navigator.push(context, MaterialPageRoute(builder: (context) => const Dashboard(title: 'dashboard')));

跳转后即可正常显示Dashboard页面内容，不会再出现黑屏问题。

内容的提问来源于stack exchange，提问作者Paulo Murineddu Meow