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<Page0> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Color(0xFF493597),
          body: ListView(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 15.0, left: 10.0),
              ),
              SizedBox(
                height: 25.0,
              ),
              Padding(
                padding: EdgeInsets.only(left: 40.0),
                child: Row(
                  children: <Widget>[
                    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: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 30.0,
                      ),
                      child: Column(
                        children: <Widget>[
                          //greeting text
                          Row(
                            children: <Widget>[
                              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: <Widget>[
                            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: <Widget>[
                              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.

The codes that are provided in the question are too minimal... It may be from NewTrip's `build` method, But it's not clear! — Saman Salehi, Apr 24 '20 at 09:25
Please provide more code from relevant widgets. Would be happy to help :) — Sunit Gautam, Apr 24 '20 at 10:09

score 22 · Answer 1 · edited Jul 09 '21 at 07:08

22

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'),
    );
  }
}

edited Jul 09 '21 at 07:08

MaNDOOoo

1,347
1
5
19

answered Apr 30 '20 at 07:22

Shreyas C R

223
1
5

score 14 · Accepted Answer · edited May 24 '21 at 02:43

14

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.

edited May 24 '21 at 02:43

answered Apr 25 '20 at 12:37

Shahbaz

805
2
8
20

3

If you still want to use floating button, add the property of floating button called "herotag". This works for me. – Sanket Vekariya May 03 '20 at 12:06
1

Yes that is the problem, FloatingActionButton is a hero widget with a default hero tag, you are using 2 floatingActionButtons in your screen without explicitly giving them a heroTag. By doing so, Flutter cannot tell which hero to move forward to next screen, as there are 2 hero widget with same tag. So, add a unique heroTag to both of you FloatingActionButtons like this to your FloatingActionButton. – Taha Malik Nov 28 '20 at 02:08
2

Also, remove your MaterialApp, there is no point of using 2 material Apps in one flutter app. – Taha Malik Nov 28 '20 at 02:10
1

Also, Please accept your answer as correct one, so others don't try to answer it. – Taha Malik Nov 28 '20 at 02:11

score 7 · Answer 3 · answered Feb 13 '22 at 14:01

Before:

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

So to Solve this problem we wrap the new navigate widget with scaffold widget

Solution After:

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

score 6 · Answer 4 · answered Sep 09 '20 at 08:30

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'),
    );
  }
}

score 3 · Answer 5 · edited Feb 06 '21 at 11:04

3

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'),
    );
  }
}

edited Feb 06 '21 at 11:04

Kab Agouda

6,309
38
32

answered Nov 21 '20 at 21:06

Akshit Ostwal

451
3
14

score 3 · Answer 6 · edited Sep 22 '21 at 06:37

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'),
        );
      }
    }

score 2 · Answer 7 · edited Feb 07 '21 at 16:54

2

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

ThemeData (
   scaffoldBackgroundColor: Colors.black,
)

edited Feb 07 '21 at 16:54

Kab Agouda

6,309
38
32

answered Jan 18 '21 at 18:58

Felipe Sales

1,037
1
11
15

score 2 · Answer 8 · answered Apr 01 '21 at 07:44

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.

score 0 · Answer 9 · edited Feb 06 '21 at 06:52

0

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'),
    );
  }
}

edited Feb 06 '21 at 06:52

Kab Agouda

6,309
38
32

answered Dec 24 '20 at 07:18

Rasel Khan

2,976
19
25

score 0 · Answer 10 · answered Oct 04 '21 at 04:58

0

simply just put scaffold in next page that's it.

answered Oct 04 '21 at 04:58

Meet Patel

189
9

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 04 '21 at 06:06

score 0 · Answer 11 · answered Mar 11 '22 at 20:39

0

If the page you navigate does not contain Scaffold the page will be black since Scaffold Implements the basic material design visual layout structure so apply Scaffold and the parent widget material app.

answered Mar 11 '22 at 20:39

Suretion

113
1
2
11

This is not true, you can not use a scaffold in flutter without getting this black screen issue. – alfietap Dec 16 '22 at 20:00

score 0 · Answer 12 · answered May 11 '22 at 13:16

0

The problem you are facing because the widget you are navigating does not have any material widget.

Just wrap the navigated screen's return widget with Scaffold as a parent.

answered May 11 '22 at 13:16

Bhoomika Harkhani

28
2

How to fix black screen in flutter while Navigating?

12 Answers12

Solution After: