flutter - 如何在表单小部件内导航？

Question

现在我正在制作一个应用程序，其中有一个表单，其中有一个按钮，当按下该按钮时应该验证并将用户导航到堆栈下方的页面，但是每当我使用 Navigator.pop(context) 它时，屏幕就会变黑，或者即使我使用Navigator.pushedName(context, *name of route*) 它也会显示无效的。

为什么会发生这种情况，有没有办法解决这个问题。

编辑

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();
                    }
                  },
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

您可以看到我在表单小部件中有一个按钮arrow_back和一个按钮，但它们的目的是执行相同的任务，即仍然弹回前一个屏幕。虽然后一个按钮不起作用并且每当我按下它时屏幕变黑而前者正在工作。还有一件事，即使我正在使用Navigator.pushedName 它，也没有显示该名称的路线。

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

这是main.dart中命名路由的列表

标签： flutter