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

Question

so the problem with my code is that as soon as I press the submit button my screen blanks out and then I'm unable to save the next response. I want that as soon as I submit my form should reset for reuse and should be ready for taking next response from user and yes that black screen too should disappear.

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

At any point, if you find that on popping your stack gives you blank screen which means the current screen is the last route of your stack. So, if you pop your last visible screen it's popping the last route and showing blank black canvas.

So, at some places where you are uncertain about the screen popping you can check like,

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

If you are using NavigatorKey then you can try like,

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

Still if you can't figure out what to do and want to try some workaround at last you can try like,

// you will need to import services API
import 'package:flutter/services.dart';

SystemNavigator.pop();

This will manage your navigation stack.

Answer 2

Navigator.of(context).pop(); Pop the top-most route off the navigator that most tightly encloses the given context.

The current route's Route.didPop method is called first. If that method returns false, then the route remains in the Navigator's history (the route is expected to have popped some internal state; see eg LocalHistoryRoute). Otherwise, the rest of this description applies.

If non-null, result will be used as the result of the route that is popped; the future that had been returned from pushing the popped route will complete with result. Routes such as dialogs or popup menus typically use this mechanism to return the value selected by the user to the widget that created their route. The type of result, if provided, must match the type argument of the class of the popped route (T).

you dont have a route previous route, so popping leads to a black screen.

you can clear the fields / reset to defaults

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