在 Flutter 中导航后显示一个flushbar答案

【问题标题】：Show a flushbar after navigate in Flutter在 Flutter 中导航后显示一个flushbar
【发布时间】：2020-05-07 05:32:47
【问题描述】：

我和Show a snackbar after navigate in Flutter 有同样的问题，但对于https://pub.dev/packages/flushbar

导航后如何显示flushbar？

(在第一条路线中，当我们导航到第二条路线时，我们有一个后台任务，该任务可能会失败，我想通过刷新条向最终用户显示一条消息，UI在第二条路线中（或者可能是另一条路线）在 FiratRout 之后（或之前，无论如何）导航，后台任务运行一段时间后可能会失败

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () async {
            await Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
            Flushbar(
              title: "Hey Ninja",
              message:
                  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
              duration: Duration(seconds: 3),
            )..show(context);
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: Text(
            "I want to show here Flushbar, Flushbar.show called in FirstRoute"),
      ),
    );
  }
}

【问题讨论】：

您是否按照该问题的答案进行了尝试？
同时添加 getSavedThingRoute()。
我在每条路由中都有Scaffold，不可能为所有路由设置GlobalKey，scaffoldKey.currentState也没有flushbar！因为我是新手，所以我不知道！
@VirenVVarasadiya getSavedThingRoute() 是一个假例子，这并不重要，我只想在没有上下文的情况下显示flushbar
您可以尝试将 await 放在 navigator 之前吗？等待导航器.....

标签： flutter

【解决方案1】：

Navigator.push()

是一个Future 类型，所以只要你返回到你推送的小部件，等待它应该是你所需要的。

以常规小吃店为例：

Future routeAndShowSnack() async {
   await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => OtherWidget(param: value))
   );
   _scaffoldKey.currentState.show(SnackBar(content: Text('Heres a snack'));
}

您需要确保调用脚手架的上下文是正确的上下文。如果您在脚手架上方调用上下文，那么它将优雅地失败并且不显示小吃栏。如果您不确定脚手架上下文，请显示Widget build() 代码。

注意：我刚刚从我拥有的存储库中复制了这段代码。您不需要使用材料页面路由构建器小部件进行路由。

下面是您要达到的目标的示例。

class FirstRoute extends StatefulWidget {
  FirstRoute({Key key, this.title}) : super(key: key);

  final String title;

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

class _FirstRouteState extends State<FirstRoute> {
  final  GlobalKey<ScaffoldState> _keyin = GlobalKey();

  void _flush(BuildContext context) async {
    await Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => SecondRoute()),
    );
    Flushbar(
      title: "Hey Ninja",
      message:
          "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      duration: Duration(seconds: 3),
    )..show(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _keyin,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _flush(context),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: OutlineButton(
          child: Text('Back'), 
          onPressed: () => Navigator.of(context).pop()
        ),
      ),
    );
  }
}

正如我在下面评论的那样，您无法使用 pushReplacement 实现此功能，因为这打破了等待路线返回到初始路线的概念。如果您替换导航树中的路线，那么您想要运行的任何内容都已被处理掉。

【讨论】：

如果我不使用Navigator.push而使用pushReplacementNamed怎么办？
你在哪里设置_scaffoldKey？
pushReplacementNamed 可能仅在有返回导航到的路线时才有效。您能否显示您的小部件代码，以便我可以看到用于脚手架的上下文？我也可以向您展示如何使用 GlobalKey for 脚手架
见 flutter.dev/docs/cookbook/navigation/navigation-basics ，在 FirstRoute 的 onPressed 中，我想 pushReplacementNamed 到 SecondRoute 然后显示 Flushbar 而不是 SnackBar
好吧，你不能使用pushReplacement，因为那样你就不能导航回FirstRoute。如果您要替换导航树中的路线，它怎么可能返回到 FirstRoute？上面我已经验证的使用 Navigator.push() 的示例在我的本地计算机上确实有效。

【解决方案2】：

使用导航后可以显示flushbar

SchedulerBinding.instance?.addPostFrameCallback();

所以，您的 onPressed 代码将是这样的。

await Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => SecondRoute()),
);
SchedulerBinding.instance?.addPostFrameCallback((_) {
  Flushbar(
    title: "Hey Ninja",
    message:
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
    duration: Duration(seconds: 3),
  )..show(context);
});

希望它有效。

【讨论】：