title: How to solve it when Flutter MaterialPageRoute navigates to a screen with black background?
body: <p>I'm using Flutter for first time for one of my projects which is a Newspaper App. </p>
  
  <p>The problem takes place when I try to navigate from <code>main.dart</code> to <code>newsfeed_for_other_category.dart</code> using <code>MaterialPageRoute</code> from my <code>Drawer</code>. In that screen it shows the news but with a black background. But in the screen <code>newsfeed_screen.dart</code> which is called in the body in my <code>main.dart</code> it shows perfectly.</p>
  
  <p>I'm posting the codes below.</p>
  
  <p><strong>main.dart</strong></p>
  
  <pre><code>import 'package:flutter/material.dart';
  import './SizeConfig.dart';
  import './screens/newsfeed_screen.dart';
  import 'package:curved_navigation_bar/curved_navigation_bar.dart';
  import 'factory/widget_factory.dart';
  import 'widgets/top_news_widget.dart';
  import 'package:splashscreen/splashscreen.dart';
  import './widgets/drawer.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Newspaper App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          //backgroundColor: Colors.lightGreenAccent,
        ),
        home: MyHomePage(title: 'The Business Standard'),
        routes: &lt;String, WidgetBuilder&gt; {
          '/screen1': (BuildContext context) =&gt; new NewsFeedScreen(216, 5, "Top News"),
          '/screen2' : (BuildContext context) =&gt; new NewsFeedScreen(4, 7, "National"),
          '/screen3' : (BuildContext context) =&gt; new NewsFeedScreen(13, 70, "International"),
          /*'/screen4' : (BuildContext context) =&gt; new Screen4()*/
        },
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
  
    final String title;
  
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    int _counter = 0;
    final GlobalKey&lt;ScaffoldState&gt; _scaffoldKey = new GlobalKey&lt;ScaffoldState&gt;(debugLabel: '_MainScreenKey');
  
    Widget build(BuildContext context) {
      return SplashScreen(
          seconds: 3,
          navigateAfterSeconds: AfterSplash(),
          title: Text(
            'The Business Standard',
            style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20.0
            ),
          ),
          image: Image.asset(
              'assets/TBS_logo.jpg',
          ),
          backgroundColor: Colors.white,
          styleTextUnderTheLoader: TextStyle(),
          photoSize: 100.0,
          onClick: ()=&gt;print("Flutter Egypt"),
          loaderColor: Colors.red
      );
    }
  }
  
  class AfterSplash extends StatefulWidget {
  
    @override
    _AfterSplashState createState() =&gt; _AfterSplashState();
  }
  
  class _AfterSplashState extends State&lt;AfterSplash&gt; {
    final GlobalKey&lt;ScaffoldState&gt; _scaffoldKey = new GlobalKey&lt;ScaffoldState&gt;(debugLabel: '_MainScreenKey');
  
    @override
    Widget build(BuildContext context) {
      SizeConfig().init(context);
      return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: &lt;Widget&gt;[
              Image.asset(
                'assets/TBS.png',
                fit: BoxFit.cover,
                height: 45,
              )
            ],
          ),
          leading: IconButton(
            icon: Icon(Icons.dehaze),
            color: Colors.black,
            onPressed: () =&gt; _scaffoldKey.currentState.openDrawer(),
          ),
        ),
        drawer: SideDrawer(),
        body: NewsFeedScreen(22, 71, "Sports"),
        bottomNavigationBar: CurvedNavigationBar(
          backgroundColor: const Color(0xFF2b4849),
          items: &lt;Widget&gt;[
            Icon(Icons.bookmark, size: 30,),
            Icon(Icons.perm_identity, size: 30,),
            Icon(Icons.settings, size: 30,),
          ],
          onTap: (index) {
            if(index == 2) {
              _scaffoldKey.currentState.showSnackBar(const SnackBar(
                  content: const Text('Will open Settings menu')));
            } else if(index == 0) {
              _scaffoldKey.currentState.showSnackBar(const SnackBar(
                  content: const Text('Implement Bookmark function')));
            } else {
              _scaffoldKey.currentState.showSnackBar(const SnackBar(
                  content: const Text('Will show User profile and information')));
            }
          },
        ),
      );
    }
  }
  
  </code></pre>
  
  <p><strong>newsfeed_for_other_category.dart</strong>, the page to which I'm navigating and this is where the black background shows up.</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import '../SizeConfig.dart';
  import '../widgets/headlines.dart';
  import '../widgets/secondary_headlines.dart';
  import '../widgets/listed_news.dart';
  import '../models/NewsPost.dart';
  import 'package:http/http.dart' as http;
  import 'dart:convert';
  import 'dart:developer';
  import '../screens/newsPost_details.dart';
  import '../screens/newsfeed_for_specific_category.dart';
  import 'package:flutter_swiper/flutter_swiper.dart';
  import '../transition_animation_routes/ScaleTransitionRoute.dart';
  import '../widgets/top_news_widget.dart';
  
  class NewsfeedForOtherCategory extends StatefulWidget {
    int categoryId;
    int childrenCategoryId;
    String categoryName;
  
    NewsfeedForOtherCategory(this.categoryId, this.childrenCategoryId, this.categoryName);
    @override
    _NewsfeedForOtherCategoryState createState() =&gt; _NewsfeedForOtherCategoryState(this.categoryId, this.childrenCategoryId, this.categoryName);
  }
  
  class _NewsfeedForOtherCategoryState extends State&lt;NewsfeedForOtherCategory&gt; {
    int categoryId;
    int childrenCategoryId;
    String categoryName;
  
    _NewsfeedForOtherCategoryState(this.categoryId, this.childrenCategoryId, this.categoryName);
  
    bool _isRequestSent = false;
    List&lt;NewsPost&gt; newsPostList = [];
  
    @override
    Widget build(BuildContext context) {
      SizeConfig().init(context);
  
      if(!_isRequestSent) {
        _sendRequest();
      }
  
      return Container(
        alignment: Alignment.center,
        child: !_isRequestSent
            ? CircularProgressIndicator()
            : Container(
          child: ListView.builder(
              itemCount: newsPostList.length,
              scrollDirection: Axis.vertical,
              itemBuilder: (BuildContext context, int index) {
                return _getNewsPostWidgets(index);
              }
          ),
        ),
      );
    }
  
    void _sendRequest() async {
      String url = "https://tbsnews.net/json/category/news/"+this.categoryId.toString()+"/"+this.childrenCategoryId.toString()+"";
      http.Response response = await http.get(url);
      List&lt;dynamic&gt; decode = json.decode(response.body);
      log('response: $response');
      List results = decode[0]['items'];
      for (var jsonObject in results) {
        var post = NewsPost.getNewsPostFromAPI(jsonObject);
        newsPostList.add(post);
        print(post);
      }
      setState(() =&gt; _isRequestSent = true);
    }
  
    Widget _getNewsPostWidgets(int index) {
      var newsPost = newsPostList[index];
  
      if(index &lt; this.newsPostList.length) {
        if(index == 0) {
          return GestureDetector(
              onTap: () {
                Navigator.push(
                    context,
                    ScaleTransitionRoute(
                        page: NewsPostDetails(newsPostList, index)
                    )
                );
              },
              child: Column(
                children: &lt;Widget&gt;[
                  Container(
                    padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                    //constraints: BoxConstraints(minWidth: double.infinity, maxWidth: double.infinity),
                    constraints: BoxConstraints.expand(
                        width: double.infinity,
                        height: 40
                    ),
                    color: const Color(0xFF2b4849),
                    child: Text(
                      this.categoryName,
                      style: TextStyle(
                          fontSize: 33,
                          color: Colors.white
                      ),
                    ),
                  ),
                  BlockHeadline(newsPost)
                ],
              )
          );
        }
        else {
          return GestureDetector(
            onTap: () {
              Navigator.push(
                  context,
                  ScaleTransitionRoute(
                      page: NewsPostDetails(newsPostList, index)
                  )
              );
            },
            child: ListedNews(newsPost),
          );
        }
      }
      else {
        return Container(
          color: const Color(0xFF2b4849),
          child: index == 3 ? FlatButton(
            child: Text(
              "Load More",
              style: TextStyle(
                  color: Colors.white
              ),
            ),
            onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (BuildContext context) =&gt; NewsFeedForSpecificCategory(newsPostList)
                  )
              );
            },
          ) : Container(),
        );
      }
    }
  
    openNewsPostDetails(List&lt;NewsPost&gt; newsPostList, int index) {
      Navigator.push(
          context,
          ScaleTransitionRoute(
              page: NewsPostDetails(newsPostList, index)
          )
      );
    }
  }
  </code></pre>
  
  <p><strong>drawer.dart</strong></p>
  
  <pre><code>import 'package:flutter/material.dart';
  import '../SizeConfig.dart';
  import '../screens/newsfeed_for_other_category.dart';
  
  class SideDrawer extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      SizeConfig().init(context);
      return SizedBox(
        width: SizeConfig.safeBlockHorizontal*50,
        child: Theme(
          data: Theme.of(context).copyWith(canvasColor: const Color(0xFF2b4849)),
          child: Drawer(
            child: ListView(
              children: &lt;Widget&gt;[
                ListTile(
                  title: Text(
                    'Top News',
                    style: TextStyle(
                        fontSize: 20,
                        color: Colors.white
                    ),
                  ),
                  onTap: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (BuildContext context) =&gt; NewsfeedForOtherCategory(216, 5, "Top News")
                        )
                    );
                  },
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>In my home screen which is <code>newsfeed_screen.dart</code> called in the body of <code>AfterSplashState</code> widget in <code>main.dart</code> it looks like below, this is what it should look like.</p>
  
  <p><a href="https://i.stack.imgur.com/ZdHXV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZdHXV.jpg" alt="enter image description here"></a></p>
  
  <p>But in the screen <code>NewsfeedForOtherCategory</code> to which I navigate using <code>drawer</code> looks like below with the black background.</p>
  
  <p><a href="https://i.stack.imgur.com/cqkRz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cqkRz.jpg" alt="enter image description here"></a></p>
  
  <p>I have tried using <code>Navigator.of(context, rootNavigator: true).pushNamed('/route')</code> and <code>pushReplacementNamed()</code> also instead of <code>MaterialPageRoute</code>. But of no use.</p>
  
  <p>Here is a related <a href="https://stackoverflow.com/questions/53723294/flutter-navigator-popcontext-returning-a-black-screen">question</a> that I found, I tried the solutions they gave, but did not work for me.</p>
  
  <p>Also to mention, the page I'm navigating to does not have <code>MaterialApp</code> widget, only the <code>main.dart</code> has it. So there should not be an issue. </p>
  
  <p>I'm using a Ubuntu 16.04 machine. </p>
  
  <p>Some clue from you would be priceless. Thanks a lot for your time.</p>