How to fix black screen in flutter while Navigating?

Question

I am creating a multi-paged app on flutter. When I am using the navigation in it, I am getting a black screen.

    import 'package:flutter/material.dart';
    
    
    void main() => runApp(MyHomePage());
    
    class MyHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Page0(),
        );
      }
    }
    
    class Page0 extends StatefulWidget {
      @override
      _Page0State createState() => _Page0State();
    }
    
    class _Page0State extends State {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Color(0xFF493597),
          body: ListView(
            children: [
              Padding(
                padding: EdgeInsets.only(top: 15.0, left: 10.0),
              ),
              SizedBox(
                height: 25.0,
              ),
              Padding(
                padding: EdgeInsets.only(left: 40.0),
                child: Row(
                  children: [
                    Text(
                      'Expense',
                      style: TextStyle(
                          fontFamily: 'Montserrat',
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 25.0),
                    ),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text(
                      'What',
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        color: Colors.white,
                        fontSize: 25.0,
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 60.0),
              Container(
                margin: EdgeInsets.only(
                  left: 10.0,
                  right: 10.0,
                ),
                height: MediaQuery.of(context).size.height - 150,
                decoration: BoxDecoration(
                  color: Color(0xFFFCFCFC),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(75.0),
                    topRight: Radius.circular(75.0),
                  ),
                ),
                child: ListView(
                  primary: false,
                  padding: EdgeInsets.only(
                    left: 15.0,
                    right: 20.0,
                    top: 25.0,
                  ),
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 30.0,
                      ),
                      child: Column(
                        children: [
                          //greeting text
                          Row(
                            children: [
                              Expanded(
                                child: Center(
                                  child: Text(
                                    'Hello! :)',
                                    style: TextStyle(
                                      fontFamily: 'Permanent-Marker',
                                      color: Colors.black,
                                      fontSize: 30.0,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
    
                          SizedBox(
                            height: 30.0,
                          ),
    
                          //add button
                          Row(children: [
                            Expanded(
                              flex: 1,
                              child: Container(
                                height: 100.0,
                                width: 100.0,
                                child: FittedBox(
                                  child: FloatingActionButton(
                                    elevation: 10.0,
                                    backgroundColor: Colors.white,
                                    child: Icon(
                                      Icons.add,
                                      color: Colors.black,
                                    ),
                                    onPressed: () {
                                       Navigator.push(context,MaterialPageRoute(builder: (context) => NewTrip()),);
                                    },
                                  ),``
                                ),
                              ),
                            ),
    
                            //add text
                            Expanded(
                              flex: 1,
                              child: Text(
                                'New trip',
                                style: TextStyle(
                                  fontFamily: 'Nanum',
                                  fontSize: 30.0,
                                ),
                              ),
                            ),
                          ]),
    
                          SizedBox(
                            height: 30.0,
                          ),
    
                          //previous trip button
                          Row(
                            children: [
                              Expanded(
                                flex: 1,
                                child: Container(
                                  height: 100.0,
                                  width: 100.0,
                                  child: FittedBox(
                                    child: FloatingActionButton(
                                      elevation: 10.0,
                                      backgroundColor: Colors.white,
                                      onPressed: () {},
                                      child: Icon(
                                        Icons.assessment,
                                        color: Colors.black,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
    
                              //previous trip text
                              Expanded(
                                flex: 1,
                                child: Text(
                                  'Previous trips',
                                  style: TextStyle(
                                    fontFamily: 'Nanum',
                                    fontSize: 30.0,
                                  ),
                                ),
                              )
                            ],
                          ),
    
                          SizedBox(
                            height: 50.0,
                          ),  
                          
    
                         
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }
    }

And the NewTrip widget is as follows

    class NewTrip extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(      
                  body: Text('NEW TRIP'),
                ),
        );
      }
    }

The home page is loading fine but as soon as I click the new trip button, it shows a black screen. Probably there is an issue with MaterialApp or Scaffold but I am not able to fix it yet. Can anyone tell me what's the problem and how to fix it?

Updated the full code as requested in the comments.

Answer 1

So in NewTrip() remove MaterialApp since it inherits from the parent. Just return Scaffold.

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(      
       body: Text('NEW TRIP'),
    );
  }
}

Answer 2

Remove the MaterialApp()

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(      
       body: Text('NEW TRIP'),    
    );
  }
}

Answer 3

Please check the full code edit from your code. Actually you are using two FloatingActionButton. So you need to use two heroTag with different name. I already added in the code. No problem with NewTrip class.

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page0(),
    );
  }
}

class Page0 extends StatefulWidget {
  @override
  _Page0State createState() => _Page0State();
}

class _Page0State extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF493597),
      body: ListView(
        children: [
          Padding(
            padding: EdgeInsets.only(top: 15.0, left: 10.0),
          ),
          SizedBox(
            height: 25.0,
          ),
          Padding(
            padding: EdgeInsets.only(left: 40.0),
            child: Row(
              children: [
                Text(
                  'Expense',
                  style: TextStyle(
                      fontFamily: 'Montserrat',
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 25.0),
                ),
                SizedBox(
                  width: 10.0,
                ),
                Text(
                  'What',
                  style: TextStyle(
                    fontFamily: 'Montserrat',
                    color: Colors.white,
                    fontSize: 25.0,
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 60.0),
          Container(
            margin: EdgeInsets.only(
              left: 10.0,
              right: 10.0,
            ),
            height: MediaQuery.of(context).size.height - 150,
            decoration: BoxDecoration(
              color: Color(0xFFFCFCFC),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(75.0),
                topRight: Radius.circular(75.0),
              ),
            ),
            child: ListView(
              primary: false,
              padding: EdgeInsets.only(
                left: 15.0,
                right: 20.0,
                top: 25.0,
              ),
              children: [
                Padding(
                  padding: const EdgeInsets.only(
                    top: 30.0,
                  ),
                  child: Column(
                    children: [
                      //greeting text
                      Row(
                        children: [
                          Expanded(
                            child: Center(
                              child: Text(
                                'Hello! :)',
                                style: TextStyle(
                                  fontFamily: 'Permanent-Marker',
                                  color: Colors.black,
                                  fontSize: 30.0,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),

                      SizedBox(
                        height: 30.0,
                      ),

                      //add button
                      Row(children: [
                        Expanded(
                          flex: 1,
                          child: Container(
                            height: 100.0,
                            width: 100.0,
                            child: FittedBox(
                              child: FloatingActionButton(
                                heroTag: "btn",
                                elevation: 10.0,
                                backgroundColor: Colors.white,
                                child: Icon(
                                  Icons.add,
                                  color: Colors.black,
                                ),
                                onPressed: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => NewTrip()),
                                  );
                                },
                              ),
                            ),
                          ),
                        ),

                        //add text
                        Expanded(
                          flex: 1,
                          child: Text(
                            'New trip',
                            style: TextStyle(
                              fontFamily: 'Nanum',
                              fontSize: 30.0,
                            ),
                          ),
                        ),
                      ]),

                      SizedBox(
                        height: 30.0,
                      ),

                      //previous trip button
                      Row(
                        children: [
                          Expanded(
                            flex: 1,
                            child: Container(
                              height: 100.0,
                              width: 100.0,
                              child: FittedBox(
                                child: FloatingActionButton(
                                  heroTag: "btn1",
                                  elevation: 10.0,
                                  backgroundColor: Colors.white,
                                  onPressed: () {},
                                  child: Icon(
                                    Icons.assessment,
                                    color: Colors.black,
                                  ),
                                ),
                              ),
                            ),
                          ),

                          //previous trip text
                          Expanded(
                            flex: 1,
                            child: Text(
                              'Previous trips',
                              style: TextStyle(
                                fontFamily: 'Nanum',
                                fontSize: 30.0,
                              ),
                            ),
                          )
                        ],
                      ),

                      SizedBox(
                        height: 50.0,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

NewTrip class

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('NEW TRIP'),
    );
  }
}

Answer 4

Okay so after some research on the internet, I found out that it's the FloatingActionButton that is causing the trouble.

I replaced the FloatingActionButton with MaterialButton and this fixed my issue.

Answer 5

The issue is that you are using a materialApp inside another materialApp

Navigator just changes the pages and we don't need separate materialApp in NewTrip().

So the NewTrip should be as follow

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('NEW TRIP'),
    );
  }
}

Answer 6

Use ThemeData, along with the parameter scaffoldBackgroundColor.
For example:

ThemeData (
   scaffoldBackgroundColor: Colors.black,
)

Answer 7

In my case, it is caused by:

// to set portait screen orientation 
SystemChrome.setPreferredOrientation([
   DeviceOrientation.portraitUp,
   DeviceOrientation.portraitDown,
]);
// Instead i use `android:screenOrientation="portrait"` on my AndroidManifest.xml.

That I declared when the page widget render. Removed it solve my black screen issue.

Answer 8

FloatingActionButton is the problem so if you really want to use the floating action button you should add each of them to unique heroTag. Now you will be able to use FloatingActionButton without any problem. Never use more than one floating action button without using HeroTag on the same page.

Answer 9

I believe there can only be one MaterialApp Widget in the entire Flutter application because MaterialApp Widget is likely to be the main or core component of Flutter. So when you try to navigate to a new screen try returning Scaffold Widget instead of MaterialApp Widget.

class NewTrip extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(      
                  body: Text('NEW TRIP'),
        );
      }
    }

Answer 10

Change scaffoldBackgroundColor

theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,  //here
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('NEW TRIP'),
    );
  }
}