Navigator.pop(context) showing blank

Question

I was trying to navigate back to the first Screen using Navigator.pop(context), but instead it shows a blank screen instead of going back to the first screen. How do i fix this

MAIN SCREEN

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'GenderButton.dart';
import 'constants.dart';
import 'buttons.dart';
import 'resultpage.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Center(child: Text('')),
          elevation: 0,
          actions: [
            IconButton(
                onPressed: () {},
                icon: Icon(
                  Icons.add_alert_sharp,
                  size: 35,
                ))
          ],
          leading: IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.add,
              size: 35,
            ),
          ),
        ),
        body: HomeScreen());
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Gender SelectedGender = Gender.empty;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        //BMI Calculator Header
        Row(
          children: [
            SizedBox(
              width: 30,
            ),
            Text(
              'BMI Calculator',
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
            ),
          ],
        ),
        SizedBox(
          height: 20,
        ),
        //Gender Text
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            Text(
              'Gender',
              style: TextStyle(fontSize: 17),
            ),
          ],
        ),
        SizedBox(
          height: 10,
        ),
        //Button Widget
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            BoxButton(
              Type: 'MALE',
              BorderColor: SelectedGender == Gender.male
                  ? activeCardColor
                  : inactiveCardColor,
              IconColor:
                  SelectedGender == Gender.male ? activeCardColor : inactiv,
              OnPress: () {
                setState(() {
                  SelectedGender = Gender.male;
                });
              },
            ),
            SizedBox(
              width: 15,
            ),
            BoxButton(
              Type: 'FEMALE',
              BorderColor: SelectedGender == Gender.female
                  ? activeCardColor
                  : inactiveCardColor,
              IconColor:
                  SelectedGender == Gender.female ? activeCardColor : inactiv,
              OnPress: () {
                setState(() {
                  SelectedGender = Gender.female;
                });
              },
            ),
          ],
        ),
        SizedBox(
          height: 20,
        ),
        //Weight Text
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            //Weight Text
            Text(
              'Weight',
              style: TextStyle(fontSize: 15),
            )
          ],
        ),
        SizedBox(
          height: 5,
        ),
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            Container(
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(8)),
              // margin: EdgeInsets.all(15),
              height: 50,
              width: 250,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  RoundedIconButton(
                    icon: FontAwesomeIcons.minus,
                    onPressed: () {
                      setState(() {
                        Weight--;
                      });
                    },
                  ),
                  SizedBox(
                    width: 55,
                  ),
                  Text(
                    Weight.toString(),
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    width: 50,
                  ),
                  RoundedIconButton(
                    icon: FontAwesomeIcons.plus,
                    onPressed: () {
                      setState(() {
                        Weight++;
                      });
                    },
                  )
                ],
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              height: 50,
              width: 100,
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(9)),
            )
          ],
        ),
        SizedBox(
          height: 20,
        ),
        //Height Text
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            Text(
              'Height',
              style: TextStyle(fontSize: 15),
            )
          ],
        ),
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            Container(
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(8)),
              // margin: EdgeInsets.all(15),
              height: 50,
              width: 250,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  RoundedIconButton(
                    icon: FontAwesomeIcons.minus,
                    onPressed: () {
                      setState(() {
                        Height--;
                      });
                    },
                  ),
                  SizedBox(
                    width: 55,
                  ),
                  Text(
                    Height.toString(),
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    width: 50,
                  ),
                  RoundedIconButton(
                    icon: FontAwesomeIcons.plus,
                    onPressed: () {
                      setState(() {
                        Height++;
                      });
                    },
                  )
                ],
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              height: 50,
              width: 100,
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(9)),
            )
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            Text(
              'Age',
              style: TextStyle(fontSize: 18),
            )
          ],
        ),
        SizedBox(
          height: 5,
        ),
        Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(8)),
          height: 50,
          width: 369,
          child: Container(
            // margin: EdgeInsets.all(15),
            height: 50,
            width: 250,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RoundedIconButton(
                  icon: FontAwesomeIcons.minus,
                  onPressed: () {
                    setState(() {
                      Age--;
                    });
                  },
                ),
                SizedBox(
                  width: 100,
                ),
                Text(
                  Age.toString(),
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                ),
                SizedBox(
                  width: 110,
                ),
                RoundedIconButton(
                  icon: FontAwesomeIcons.plus,
                  onPressed: () {
                    setState(() {
                      Age++;
                    });
                  },
                )
              ],
            ),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        GestureDetector(
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return ResultPage();
            }));
          },
          child: Container(
            decoration: BoxDecoration(
                color: Color(0xFF06C46C),
                borderRadius: BorderRadius.circular(8)),
            height: 50,
            width: 369,
            child: Center(
                child: Text(
              'Calculate',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )),
          ),
        ),
      ],
    );
  }
}

SCREEN 2

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ResultPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
          scaffoldBackgroundColor: Colors.black,
          textTheme: TextTheme(
            bodyText2: TextStyle(color: Colors.white),
          ),
          colorScheme: ColorScheme.light(
              primary: Colors.black, secondary: Colors.black)),
      home: Scaffold(
          appBar: AppBar(
            title: Center(child: Text('')),
            elevation: 0,
            actions: [
              IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.add_alert_sharp,
                    size: 35,
                  ))
            ],
            leading: IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.add,
                size: 35,
              ),
            ),
          ),
          body: Results()),
    );
  }
}

class Results extends StatefulWidget {
  @override
  _ResultsState createState() => _ResultsState();
}

class _ResultsState extends State<Results> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Result',
            style: TextStyle(fontSize: 30),
          ),
          Center(
            child: Container(
              decoration: BoxDecoration(
                  color: Color(0xFF333335),
                  borderRadius: BorderRadius.circular(8)),
              margin: EdgeInsets.all(10),
              height: 300,
              width: 350,
            ),
          ),
          Center(
            child: Container(
              margin: EdgeInsets.all(35),
              child: Text('For your height , a normal would be from 48.6 '
                  'to 63.3 kilograms'),
            ),
          ),
          GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Container(
              decoration: BoxDecoration(
                  color: Color(0xFF06C46C),
                  borderRadius: BorderRadius.circular(8)),
              height: 50,
              width: 369,
              child: Center(
                  child: Text(
                'Recalculate BMI',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              )),
            ),
          ),
        ],
      ),
    );
  }
}

and also if you look at how i position all my widget to get same styling of a design i saw on dribble enter link description here am doing it right ? because i feel like i am doing it the wrong way and am still a beginner and i was trying to recreate what i learnt from a course i bought on udemy?

Solution

Try below code hope its help to you. set rootNavigator: true

Refer Naviagtion here , here, here

   Navigator.of(
        context,
        rootNavigator: true,
      ).pop(
        context,
      );

Or try below solution also

Navigator.pop(context);

Full Code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}


class SecondRoute extends StatefulWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  State<SecondRoute> createState() => _SecondRouteState();
}

class _SecondRouteState extends State<SecondRoute> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

Test this code here

Comments

[Olamilekan Adeyemi]

Hello Thanks for the reply i figured why it was returning a blank page , it was because i was using a stateful widget instead of stateless. and if you look at how i style my widgets it it good that way or how do i improve on that

[Ravindra S. Patil]

This is not necessary to used which widget I was try this also Stateful widget also. check my updated answer

[Olamilekan Adeyemi]

It's working fine now