Black Screen when I click on Navigator.pop() - flutter

Question

So I have this app I want it to open a new page when I click on a button. It was working before when my second page is a stateless widget. But when I changed it to Stateful Widget , and clicked on the button , my entire screen turns black.
Problem :
The Problem (PICTURE)
And here is my code :
class _MainBodyState extends State<MainBody> {
Color lol = Colors.red;
showMsg(msg) {
return ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(msg.toString()),
),
);
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10),
child: SingleChildScrollView(
child: Column(
children: [
Text(
"Welcome to",
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
),
),
Text(
"I d k what it is tbh",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.grey,
),
),
Divider(
color: Colors.black,
thickness: 1,
),
Padding(
padding: const EdgeInsets.all(10),
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Container(
child: Image.asset(
'assets/images/3.jpg',
alignment: Alignment.bottomCenter,
fit: BoxFit.cover,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 8,
),
),
Divider(
color: Colors.black,
thickness: 1,
),
Padding(
padding: const EdgeInsets.only(bottom: 10, top: 10),
child: Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 20,
letterSpacing: 1.4,
height: 1.4,
),
),
),
Divider(
color: Colors.black,
thickness: 1,
),
Text(
"Images",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
for (int i = 1; i <= 3; i++)
GestureDetector(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(10),
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Container(
width: 200,
height: 200,
color: Colors.accents[i],
child: Image.asset(
"assets/images/$i.jpg",
alignment: Alignment.bottomCenter,
fit: BoxFit.cover,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 5,
),
),
Padding(
padding: const EdgeInsets.only(top: 5, bottom: 5),
child: Center(
child: Text(
i.toString(),
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
],
),
),
Divider(
color: Colors.black,
thickness: 1,
),
TextButton(
child: Text(
"CLICK FOR MAGIK",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
onPressed: () {
setState(() {
lol = Color(Random().nextInt(0xffffffff));
});
},
style: TextButton.styleFrom(
backgroundColor: lol,
),
),
TextButton(
child: Text(
"CLICK FOR NEW PAGE",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
onPressed: () {
showMsg("Open new page");
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()), <== The Open Second Page
);
},
style: TextButton.styleFrom(
backgroundColor: Colors.red,
),
),
Divider(
color: Colors.black,
thickness: 1,
),
],
),
),
);
}
}
And This is my Second Screen code :
class SecondRoute extends StatefulWidget {
#override
_SecondRouteState createState() => _SecondRouteState();
}
class _SecondRouteState extends State<SecondRoute> {
#override
Widget build(BuildContext context) {
return Container(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
ElevatedButton(
onPressed: () {
// Navigate back to first route when tapped.
Navigator.pop(context);
},
child: Text('Go back!'),
),
],
),
),
);
}
}
Both of my widget is Stateful ( Before that my second widget was Stateless and it works fine )
Any help is appreciated , thanks !
UPDATE : When I change my second widget back to stateless , It shows black screen and isn't working either