Navigation drawer doesn't bring me to second screen - flutter

Question

I am making a bus app to learn more about flutter and dart language. So, i came across this problem with the navigation drawer where it doesn't go to the screen it's supposed to go to when I clicked on it. It just stays the same.
This is my code for the main screen.
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() {
return MainScreen();
}
}
class MainScreen extends State<MyApp> {
final currentTime = DateTime.now();
final busStopController = TextEditingController();
//To customise the greeting according to the time
String greeting() {
var hour = DateTime.now().hour;
if (hour < 12) {
return 'Morning';
}
if (hour < 17) {
return 'Afternoon';
}
return 'Evening';
}
//Strings for user input and busStop
String name = '';
String busStop = '';
//Strings for different bus timings
String sb1timing = '';
String sb2timing = '';
String sb3timing = '';
String sb4timing = '';
//Different icon colors for bus capacity
final Color _iconColorEmpty = Colors.green;
final Color _iconColorHalf = Colors.orange;
final Color _iconColorFull = Colors.red;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.transparent,
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.black45,
),
child: Text(
'WaitLah! bus services',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20),
),
),
ListTile(
leading: const Icon(
Icons.directions_walk_outlined,
color: Colors.black,
),
title: const Text(
'Plan Your Journey',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PlanJourneyScreen()));
},
),
And this is my code for the second screen (PlanJourneyScreen)
class PlanJourneyScreen extends StatelessWidget {
const PlanJourneyScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
const Backgroundimage(),
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
centerTitle: true,
title: Text(
'Plan Your Journey s10194266d',
style: GoogleFonts.kalam(
textStyle: const TextStyle(
fontSize: 24, fontWeight: FontWeight.bold)),
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 30,
),
Text(
'Please state your source and destination.',
textAlign: TextAlign.center,
style: GoogleFonts.montserrat(
textStyle: const TextStyle(
fontSize: 17,
color: Colors.white,
fontWeight: FontWeight.bold)),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 10, 10),
child: Text(
'Source',
textAlign: TextAlign.left,
style: GoogleFonts.montserrat(
textStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 10, 10),
child: Text(
'Destination',
style: GoogleFonts.montserrat(
textStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
TextField(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(10.0)),
),
onTap: () {},
),
Container(
padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.white54,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(90, 40)),
onPressed: () {},
child: Text(
'Calculate!',
style: GoogleFonts.montserrat(
textStyle: const TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
),
),
),
),
Container()
],
),
),
],
);
}
}

Answer 1

onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => PlanJourneyScreen(),
),
),

Answer 2

In your PlanJourneyScreen() you return Stack please Wrap it with Scaffold, try below code its working well, refer navigation
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.black45,
),
child: Text(
'WaitLah! bus services',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20),
),
),
ListTile(
leading: const Icon(
Icons.directions_walk_outlined,
color: Colors.black,
),
title: const Text(
'Plan Your Journey',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const PlanJourneyScreen()),
);
},
),
],
),
),
);
}
}
//PlanJourneyScreen Code
class PlanJourneyScreen extends StatelessWidget {
const PlanJourneyScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
centerTitle: true,
title: Text(
'Plan Your Journey s10194266d',
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 30,
),
Text(
'Please state your source and destination.',
textAlign: TextAlign.center,
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 10, 10),
child: Text(
'Source',
textAlign: TextAlign.left,
),
),
TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 10, 10),
child: Text(
'Destination',
),
),
TextField(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(10.0)),
),
onTap: () {},
),
Container(
padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.white54,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(90, 40)),
onPressed: () {},
child: Text(
'Calculate!',
),
),
),
Container()
],
),
),
],
),
);
}
}