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，则该路由将保留在 Navigator 的历史记录中（该路由预计会弹出一些内部状态；参见例如 LocalHistoryRoute）。否则，此描述的其余部分适用。

如果非空，result 将作为被弹出的路由的结果；从推送弹出的路由返回的未来将完成结果。诸如对话框或弹出菜单之类的路由通常使用此机制将用户选择的值返回给创建其路由的小部件。结果的类型（如果提供）必须与弹出路由 (T) 的类的类型参数匹配。

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

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

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