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.