How to navigate inside a form widget?

Question

Now I am making an app where there is form and within it a button which when pressed should validate and navigate the user to some to the page below the stack but whenever I am using Navigator.pop(context) it screen is turning black or even if I use Navigator.pushedName(context, *name of route*) it is showing null.

Why is this happening and is there a way to solve this.

EDIT

class Diary extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(

        appBar: AppBar(
         elevation: 0,
          leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: (){
              Navigator.pop(context);
            },
          ),
        ),
        body: DiaryForm(),
      ),
    );
  }
}

class DiaryForm extends StatefulWidget {
  @override
  _DiaryFormState createState() => _DiaryFormState();
}

class _DiaryFormState extends State<DiaryForm> {

  final _diaryKey=GlobalKey<FormState>();
  String title;
  String diary;



  @override
  Widget build(BuildContext context) {
    final serviceViewModelProvider=Provider.of<ServiceViewModel>(context,listen:false);
    return Form(
      key: _diaryKey,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: <Widget>[
            Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                  keyboardType: TextInputType.text,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Title',
                  ),
                    maxLength: 50,
                    validator: (value){
                    if(value.length<=3){
                      return 'Title should be atleast three character long';
                    }
                     return null;
                    },
                    onChanged: (value){
                    setState(() {
                      title=value;
                    });

                    },
                  ),
                ),
                Flexible(
                  fit: FlexFit.loose,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      keyboardType: TextInputType.multiline,
                      maxLines: null,
                      maxLength: 800,
                      maxLengthEnforced: true,
                      minLines: 13,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Tell me what happened ...',
                        helperText: 'Try to follow in character length limit'
                      ),
                      validator: (value){
                        if(value.length<=20){
                          return 'Atleast write 20 words ';
                        }
                        return null;
                      },
                      onChanged: (value){
                        setState(() {
                          diary=value;
                        });
                      },
                    ),

                  ),
                ),
                FlatButton(
                  child:Text('Validate'),
                  onPressed: (){
                    print(diary);
                    if(_diaryKey.currentState.validate()){
                      print('Validate');
                      serviceViewModelProvider.setData(title, diary, DateTime.now());
                      Navigator.pop(context);

                     // if(Provider.of<User>(context,listen: false) != null){print(Provider.of<User>(context,listen: false).uid);}

                      _diaryKey.currentState.reset();
                    }
                  },
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

You can see I have one button arrow_back and one button in the form widget but are meant to perform the same task of poping back to previous screen still. While the latter button is not working and whenever I pressed it screen turns black and the former is working. And one more thing even if I am using Navigator.pushedName it showing there id no route with the this name.

initialRoute: '/wrapper',
     routes: {
       '/wrapper':(context)=>Wrapper(),
       '/signIn' :(context)=>SignIn(),
       '/signUp' :(context)=>SignUp(),
       '/diary'  :(context)=>Diary(),
       '/home'   :(context)=>Home()
     },

This is the list of named routes in main.dart

Answer 1

@Ashu left in the comments a link for a related questions that also answers this.

But to leave it clear in here:

1. MaterialApp creates a Navigator object, so do not use 2 Material Apps, what you probably want is a Scaffold.
2. Scafold is mandatory when using an MaterialApp, so accordingly to how someone is doing their screens it is likle that they whant to use it.
3. Pop actually removes your screen, so you shoul prevent it usage in the 1º page. A WillPopScope widget can be used for adding functionality like an Alert Dialog

Other may have other beneficial mentions regarding this. This were the one that came my mind. Hope it helps.