Reputation: 825
How to fix black screen in flutter while Navigating?
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.
Upvotes: 33
Views: 14570
Answers (12)
Reputation: 28
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.
Upvotes: 0
Reputation: 163
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.
Upvotes: 0
Reputation: 7413
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'),
),
);
}
}
Upvotes: 8
Reputation: 561
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'),
);
}
}
Upvotes: 3
Reputation: 233
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'),
);
}
}
Upvotes: 23
Reputation: 825
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.
Upvotes: 15
Reputation: 1519
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.
Upvotes: 2
Reputation: 1149
Use ThemeData, along with the parameter scaffoldBackgroundColor.
For example:
ThemeData (
scaffoldBackgroundColor: Colors.black,
)
Upvotes: 2
Reputation: 469
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'),
);
}
}
Upvotes: 3
Reputation: 4289
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'),
);
}
}
Upvotes: 0
Reputation: 1451
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'),
);
}
}
Upvotes: 6
Related Questions
- Black screen after Navigation.push
- Navigator.pop shows me a black screen
- Navigator.popUntil flutter show black screen
- How to solve it when Flutter MaterialPageRoute navigates to a screen with black background?
- Getting a black screen when navigating between two pages in flutter
- Black screen when calling Navigator.popUntil()
- Flutter black screen when switching to other screen
- Getting black screen when doing Navigator.pop. I have tried other links but not getting the solution
- Flutter: Navigation issue
- Navigation to another screen is always blank in flutter