如何在 Flutter 中的 navigator.pop(context) 之后显示一个 snackbar？

Question

我们需要关闭一个屏幕并打开第二个屏幕。并在第一个屏幕的第二个屏幕上显示 snackbar。

我尝试使用 Navigator.push，但是这个屏幕已经打开，我们有这个错误

Bad state: Stream has already been listened to.

Answer 1

我建议您使用 Flushbar 插件而不是 Snackbar，它易于使用，它会处理所有事情，您可以在很大程度上自定义它。 Snackbar 需要脚手架祖先才能工作，但是 Flushbar 不会，它会自己处理所有额外的东西，并提供大量很酷的功能。

Flushbar Plugin here

Answer 2

showSubmitRequestSnackBar(BuildContext context) async {

  Flushbar(
    flushbarPosition: FlushbarPosition.BOTTOM,
    message: "Request Successfully Saved",
    icon: Icon(
      Icons.info_outline,
      size: 28.0,
      color: Colors.red,
    ),
    backgroundColor: Colors.red,
    duration: Duration(seconds: 5),
    leftBarIndicatorColor: Colors.red,

  )
    ..show(context).then((r)=> Navigator.push(
        context, MaterialPageRoute(builder: (context) => ListPage(""))));
}

Answer 3

我不确定我是否 100% 理解您的用例，但是通过 return 从屏幕中获取结果并将参数传递给新路由，您基本上可以解决任何情况。

我们举个例子。 A 是原始屏幕，然后你推屏幕 B。现在你看到 B，在那里执行一些操作，弹出它，你回到屏幕 A，你想显示一个小吃店。

当您 pop 时，您可以 return 一个结果并按照 "Return data from a screen" 食谱中所述从 "parent" 屏幕处理该结果。

当您收到结果时，您可以显示小吃栏通知，或者（如果有第三个屏幕），您可以 pass that result to another screen as argument。

Answer 4

屏幕 A

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => BScreen(
      callbackFunction: (String resMessage){
        print(resMessage);
      },
    ),
  ),
);

屏幕 B

class BScreen extends StatefulWidget {
  final Function callbackFunction;

  BScreen({required this.callbackFunction});

  @override
  _BScreenState createState() => _BScreenState();
}


class _BScreenState extends State<BScreen> {
  // 
  _performTask(){
    // add your task here
    // ..........
    String msg = 'Task has been added';
    widget.callbackFunction(msg);
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _performTask();
          },
          child: Text('Click Here'),
        ),
      ),
    );
  }
}

这个解决方案对我有用。乐于帮助他人 :) 感谢您提出这个问题。

Answer 5

请阅读 Flutter 的 documentation，它通过示例回答了您的问题。

您要做的是，当您要 Navigator.pop 时，您可以传递一条消息，然后根据该消息，您可以在之前的屏幕中显示 SnackBar [=14] =]

所以当你弹出时做这样的事情：

Navigator.pop(context, 'Yes');
Navigator.pop(context, 'No');

在这里，您正在传递一条消息，并且根据这条消息，您可以在之前的屏幕中显示 Snackbar，就像这样：

final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const SelectionScreen()),
  );

  // After the Selection Screen returns a result, hide any previous snackbars
  // and show the new result.
  ScaffoldMessenger.of(context)
    ..removeCurrentSnackBar()
    ..showSnackBar(SnackBar(content: Text('$result')));

如何在 Flutter 中的 navigator.pop(context) 之后显示一个 snackbar？

How can I show a snackbar after navigator.pop(context) in Flutter?

navigator

dart

snackbar

flutter