How to fix black screen in flutter while Navigating?
5,635
Solution 1
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.
Solution 2
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'),
);
}
}
Solution 3
Remove the MaterialApp()
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
Solution 4
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'),
);
}
}
Solution 5
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'),
),
);
}
}
Author by
Shahbaz
Updated on December 19, 2022Comments
-
Shahbaz over 1 year
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.
-
Sandeep Sharma about 4 yearson physical device? or simulator? -
Shahbaz about 4 yearsOn physical device
-
Saman Salehi about 4 yearsThe codes that are provided in the question are too minimal... It may be from NewTrip's
buildmethod, But it's not clear! -
Sunit Gautam about 4 yearsPlease provide more code from relevant widgets. Would be happy to help :)
-
Shahbaz about 4 yearsI've updated with the full code.
-
Saman Salehi about 4 yearsRemove
MaterialAppfromNewTripand test again -
Shahbaz about 4 yearsNo..not working
-
Salim Murshed over 3 yearsplease check the recent answer
-
Salim Murshed over 3 yearsDo it fulfil your requirement?
-
Paresh Mangukiya over 3 yearsDoes this answer your question? Flutter Navigator.pop(context) returning a black screen
-
-
Sanket Vekariya almost 4 yearsIf you still want to use floating button, add the property of floating button called "herotag". This works for me. 🙂 -
Taha Malik over 3 yearsYes 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 over 3 yearsAlso, remove your MaterialApp, there is no point of using 2 material Apps in one flutter app.
-
Taha Malik over 3 yearsAlso, Please accept your answer as correct one, so others don't try to answer it.
-
Admin over 2 yearsYour 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.
