gpt4 book ai didi

Flutter 在任何 BuildContext 上绘制 Flushbar

转载 作者:IT王子 更新时间:2023-10-29 07:18:09 24 4
gpt4 key购买 nike

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

我希望能够显示独立于屏幕之间导航的通知,即,如果用户在屏幕之间导航,则通知应保留在所有屏幕上。由于 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 ),即即使在路线导航期间,叠加层也会保留在屏幕上。然而,覆盖解决方案在我的案例中不太优雅,因为它不允许 flushbar 被关闭或动画化(或者至少它不是那么简单)。

相关问题:Flutter - Application Wide Notifications

最佳答案

尝试从根导航器显示您的 Flushbar。

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

例如

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) , 其中rootNavigatorfalse默认。使用它来获取“子根”导航器以显示新屏幕/页面。

例如放置另一个 Navigator就在MaterialApp .

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

如果这有帮助,请告诉我。

关于Flutter 在任何 BuildContext 上绘制 Flushbar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56664760/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com