Flutter:Navigator.of(context).pop()返回黑屏

Question

所以我的代码的问题是，只要我按下提交按钮，屏幕就会空白，然后我就无法保存下一个响应。我希望在我提交表单后，我的表单应该重置为可重复使用，并且应该准备好接受用户的下一个响应，是的，黑屏也应该消失。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MaterialApp(home: MyApp()));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
TextEditingController problemBox = TextEditingController();
final db = FirebaseFirestore.instance;
List _listItem = ["Category 1", "Category 2", "Category 3", "Category 4"];
List _listItem1 = [
"Sub Category 1",
"Sub Category 2",
"Sub Category 3",
"Sub Category 4"
];
List _listItem2 = ["CRIS", "ADMINISTRATION", "ZONE", "DEPARTMENT"];
String dropdownValue;
String holder = '';
void getDropDownItem() async {
setState(() {
holder = dropdownValue;
});
}
String dropdownValue1;
String holder1 = '';
void getDropDownItem1() async {
setState(() {
holder1 = dropdownValue1;
});
}
String dropdownValue2;
String holder2 = '';
void getDropDownItem2() async {
setState(() {
holder2 = dropdownValue2;
});
}
bool autoValidate = true;
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text("Feedback"),
centerTitle: true,
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.home),
),
),
body: Container(
child: Center(
child: SingleChildScrollView(
child: Form(
autovalidateMode: AutovalidateMode.onUserInteraction,
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(child: Text("CATEGORY")),
Flexible(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: '*',
style: TextStyle(color: Colors.red),
),
],
),
)),
SizedBox(width: 30),
Flexible(
child: DropdownButtonFormField<String>(
isExpanded: true,
hint: Text("Select"),
value: dropdownValue,
validator: (value) =>
value == null ? "Please select a value" : null,
items: _listItem
.map<DropdownMenuItem<String>>((valueItem) {
return DropdownMenuItem<String>(
value: valueItem,
child: Text(valueItem),
);
}).toList(),
onChanged: (value) {
setState(() {
dropdownValue = value;
});
},
)),
],
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(child: Text("SUB-CATEGORY")),
Flexible(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: '*',
style: TextStyle(color: Colors.red),
),
],
),
)),
SizedBox(width: 30),
Flexible(
child: DropdownButtonFormField<String>(
isExpanded: true,
hint: Text("Select"),
value: dropdownValue1,
validator: (value) =>
value == null ? "Please select a value" : null,
items: _listItem1
.map<DropdownMenuItem<String>>((valueItem1) {
return DropdownMenuItem<String>(
value: valueItem1,
child: Text(valueItem1),
);
}).toList(),
onChanged: (value) {
setState(() {
dropdownValue1 = value;
});
},
)),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(child: Text("MARKED TO")),
Flexible(
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: '*',
style: TextStyle(color: Colors.red),
),
],
),
)),
SizedBox(width: 30),
Flexible(
child: DropdownButtonFormField<String>(
isExpanded: true,
hint: Text("Select"),
value: dropdownValue2,
validator: (value) =>
value == null ? "Please select a value" : null,
items: _listItem2
.map<DropdownMenuItem<String>>((valueItem2) {
return DropdownMenuItem<String>(
value: valueItem2,
child: Text(valueItem2),
);
}).toList(),
onChanged: (value) {
setState(() {
dropdownValue2 = value;
});
},
)),
],
),
SizedBox(height: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.fromLTRB(70, 00, 70, 00),
child: TextFormField(
validator: (String value) {
if (value.isEmpty) {
return "Description is required";
}
return null;
},
controller: problemBox,
decoration: InputDecoration(
hintText: "Describe your problem here.",
),
maxLength: 1000,
maxLines: 5,
),
)
],
),
SizedBox(height: 10),
ButtonTheme(
child: ElevatedButton(
child: Text("Submit"),
onPressed: () {
if (_formKey.currentState.validate()) {
print(" form is validate");
db.collection("COLLECTION").add(
{
"CATEGORY": dropdownValue,
"SUB-CATEGORY": dropdownValue1,
"MARKED TO": dropdownValue2,
"PROBLEM": problemBox.text,
},
);
Navigator.of(context).pop();
}
},
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
horizontal: 25, vertical: 15),
),
),
),
]),
),
),
)));
}
}

Answer 1

在任何时候，如果您发现弹出堆栈时会出现空白屏幕，这意味着当前屏幕是堆栈的最后一条路径。所以，如果你弹出最后一个可见的屏幕，它就是弹出最后一条路线，并显示空白的黑色画布。

所以，在一些你不确定屏幕弹出的地方，你可以检查，比如

if (Navigator.of(context).canPop()) {
Navigator.of(context).pop();
}

如果你使用的是NavigatorKey，那么你可以试试，

if (navigatorKey.currentState.canPop()) {
navigatorKey.currentState.pop();
}

尽管如此，如果你不知道该做什么，并且想尝试一些变通方法，你可以尝试，比如，

// you will need to import services API
import 'package:flutter/services.dart';
SystemNavigator.pop();

这将管理您的导航堆栈。

Answer 2

Navigator.of(context).pop();从最紧密地包围给定上下文的导航器中弹出最顶部的路由。

首先调用当前路由的route.didPop方法。如果该方法返回false，则该路线将保留在导航器的历史记录中(该路线预计已弹出某些内部状态；请参见例如LocalHistoryRoute(。否则，本说明的其余部分适用。

如果不为null，则结果将作为弹出的路由的结果；推送弹出的路由返回的future将以结果结束。对话框或弹出菜单等路由通常使用此机制将用户选择的值返回到创建其路由的小部件。如果提供结果的类型，则必须与弹出路由(T(的类的类型参数匹配。

你之前没有路线，所以弹出会导致黑屏。

您可以清除字段/重置为默认

`
clearFields(){
problemBox.clear();
dropdownValue="";
...
}