Issue
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.
Solution
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.
Answered By – Shahbaz
Answer Checked By – Terry (FlutterFixes Volunteer)