Flutter在任何BuildContext上绘制Flushbar

时间:2019-06-19 09:46:46

标签: flutter

我使用flushbar向用户显示应用内通知,但我认为此问题适用于任何要覆盖在当前屏幕上的小部件,例如快餐栏。

我希望能够显示与屏幕之间的导航无关的通知,即,如果用户在屏幕之间进行导航,则通知应保留在所有屏幕上。由于刷新条通知仅在当前BuildContext上绘制,因此用户关闭当前屏幕后,通知也会消失(因为通知小部件是该屏幕小部件子树的一部分)。

无论导航如何,是否都可以在整个应用程序顶部显示小部件(例如通知)?

EDIT1 :添加了示例代码。

import 'package:flushbar/flushbar_route.dart' as route;
import 'package:flushbar/flushbar.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('go to second screen'),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (BuildContext context) => SecondScreen())
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {

  final Flushbar _flushbar = Flushbar(message: 'Flushbar Notification');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('show flushbar'),
          onPressed: () {
            showFlushbar(_flushbar, context);
          },
        ),
      ),
    );
  }
}

Future showFlushbar(Flushbar instance, BuildContext context) {
  final _route = route.showFlushbar(
    context: context,
    flushbar: instance,
  );

  return Navigator.of(context, rootNavigator: true).push(_route);
}

结果将如下所示(返回第一个屏幕时,我希望通知保留在屏幕上):

example app demo

EDIT2 :George的解决方案有效。另外,使用叠加层可能也适用于其他叠加层(请参见this blog post),即,即使在路线导航期间,叠加层仍会显示在屏幕上。但是,在我的情况下,overlay解决方案不太好用,因为它不允许将冲洗栏设置为不可用或不使用动画(或者至少不那么简单)。

相关问题:Flutter - Application Wide Notifications

2 个答案:

答案 0 :(得分:1)

尝试从根导航器显示Flushbar。

查看 flushbar 库中的the sources,我们可以通过从showFlushbar导入package:flushbar/flushbar_route.dart方法来创建自己的Flushbar路由。

例如

import 'package:flushbar/flushbar_route.dart' as route;

// ...

Future showFlushbar(Flushbar instance) {
  final _route = route.showFlushbar(
    context: context,
    flushbar: instance,
  );

  return Navigator.of(context, rootNavigator: true).push(_route);
}

更新

感谢您在问题中添加的代码。

我认为,最终的解决方案是在Navigator内部创建另一个MaterialApp-某种第二个“子根”导航器。

现在,您将可以根据需要在Navigator的2层之间进行选择。

Navigator.of(context, rootNavigator: true)将返回顶级导航器-将其用于Flushbar或要在所有屏幕上方保持不变的任何其他模式弹出窗口。

Navigator.of(context),其中rootNavigator默认为false。使用它来获取“子根”导航器以显示新的屏幕/页面。

例如在Navigator中再放置一个MaterialApp

MaterialApp(
  home: Navigator( // 'sub-root' navigator. Second in the hierarchy.
    onGenerateRoute: (_) => MaterialPageRoute(
      builder: (_) => FirstScreen(),
      settings: RouteSettings(isInitialRoute: true),
    ),
  ),
);

让我知道这是否有帮助。

答案 1 :(得分:-1)

这对我有用。

当我弹出上一屏幕时,刷新消息将显示在前一屏幕上。

onPressed: () {
   Navigator.pop(context);
   Flush.showGoodFlushbar(context, 'login successful!');
}