Flutter应用导航至任意页面均黑屏，寻求问题排查帮助

Hey there! Let's figure out why your Flutter app is showing a black screen every time you navigate to a new page. I’ve looked over your code and found a couple of critical issues that are almost certainly causing this problem.

1. Incorrect Widget Hierarchy (The Main Culprit) #

Right now, your MyApp widget is returning a Scaffold with a MaterialApp nested inside it. That’s backwards! The MaterialApp should be the root widget of your entire application—it handles core functionality like routing, theming, and providing the navigation context. When you nest it inside a Scaffold, the navigation system can’t properly resolve the route stack, leading to that black screen when you try to push new pages.

Fixed Hierarchy Example: #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MaterialApp is now the root widget
    return MaterialApp(
      title: 'My Snippets',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(), // Move your Scaffold content to a separate home widget
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Now navigation uses the correct context from MaterialApp's subtree
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

2. Missing Material Wrappers for Route Pages #

Make sure every page you navigate to has a Material or Scaffold widget wrapping its content. Without this, Flutter doesn’t know how to render text, buttons, or other material components properly—and it’ll look like a black screen even if the page is technically loaded.

Example for a second page:

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( // Or wrap with Material if you don't need an AppBar
      appBar: AppBar(title: Text('Second Page')),
      body: Center(child: Text('Hello from the second page!')),
    );
  }
}

Quick Additional Checks #

• Double-check that you’re using the correct context for navigation. The context you pass to Navigator.push must come from a widget that’s a descendant of MaterialApp—using a context from outside that subtree will break routing.
• Ensure there are no blocking async operations in initState of your widgets that might freeze the UI. If you have code that takes time to run, wrap it in a Future.delayed or use async/await to avoid blocking the render pipeline.

Once you fix the widget hierarchy and ensure all pages have proper material wrappers, that black screen should disappear immediately!

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