Flutter: Navigator.of(context).pop() return 黑屏
Flutter: Navigator.of(context).pop() return black screen
所以我的代码的问题是，只要我按下提交按钮，我的屏幕就会变黑，然后我就无法保存下一个回复。我希望一旦我提交我的表单就应该重置以供重用，并且应该准备好接受用户的下一次响应，是的，黑屏也应该消失。
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),
),
),
),
]),
),
),
)));
}
}
在任何时候，如果您发现弹出堆栈时会出现空白屏幕，这意味着当前屏幕是堆栈的最后一个路由。因此，如果您弹出最后一个可见屏幕，它会弹出最后一条路线并显示空白黑色 canvas。
所以，在一些不确定弹屏的地方，你可以检查一下，
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();
这将管理您的导航堆栈。
Navigator.of(context).pop();
从导航器中弹出最紧密包围给定上下文的最顶部路线。
首先调用当前路由的Route.didPop方法。如果该方法 returns 为 false，那么路由将保留在导航器的历史记录中（路由应该弹出一些内部状态；参见例如 LocalHistoryRoute）。否则，此说明的其余部分适用。
如果非空，result将作为出栈路由的结果；通过推送弹出路由 returned 的未来将完成结果。对话框或弹出菜单等路由通常使用此机制将用户选择的值 return 传递给创建其路由的小部件。结果的类型（如果提供）必须与弹出路由 (T) 的 class 的类型参数相匹配。
你之前没有路由，所以弹出会导致黑屏。
您可以清除字段/重置为默认值
`
clearFields(){
problemBox.clear();
dropdownValue="";
...
}
所以我的代码的问题是，只要我按下提交按钮，我的屏幕就会变黑，然后我就无法保存下一个回复。我希望一旦我提交我的表单就应该重置以供重用，并且应该准备好接受用户的下一次响应，是的，黑屏也应该消失。
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),
),
),
),
]),
),
),
)));
}
}
在任何时候，如果您发现弹出堆栈时会出现空白屏幕，这意味着当前屏幕是堆栈的最后一个路由。因此，如果您弹出最后一个可见屏幕，它会弹出最后一条路线并显示空白黑色 canvas。
所以，在一些不确定弹屏的地方，你可以检查一下，
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();
这将管理您的导航堆栈。
Navigator.of(context).pop();
从导航器中弹出最紧密包围给定上下文的最顶部路线。
首先调用当前路由的Route.didPop方法。如果该方法 returns 为 false，那么路由将保留在导航器的历史记录中（路由应该弹出一些内部状态；参见例如 LocalHistoryRoute）。否则，此说明的其余部分适用。
如果非空，result将作为出栈路由的结果；通过推送弹出路由 returned 的未来将完成结果。对话框或弹出菜单等路由通常使用此机制将用户选择的值 return 传递给创建其路由的小部件。结果的类型（如果提供）必须与弹出路由 (T) 的 class 的类型参数相匹配。
你之前没有路由，所以弹出会导致黑屏。
您可以清除字段/重置为默认值
`
clearFields(){
problemBox.clear();
dropdownValue="";
...
}