在颤动中自动在应用程序主屏幕加载上显示警报对话框

Posted 2023-02-23

【中文标题】在颤动中自动在应用程序主屏幕加载上显示警报对话框

【英文标题】：Show alert dialog on app main screen load automatically in flutter

【发布时间】：2019-02-09 08:58:10

【问题描述】：

我想根据条件显示警报对话框。不基于用户交互，例如按钮按下事件。

如果在应用状态数据警报对话框中设置了标志，则显示，否则不显示。

下面是我要显示的示例警报对话框

  void _showDialog() 
    // flutter defined function
    showDialog(
      context: context,
      builder: (BuildContext context) 
        // return object of type Dialog
        return AlertDialog(
          title: new Text("Alert Dialog title"),
          content: new Text("Alert Dialog body"),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            new FlatButton(
              child: new Text("Close"),
              onPressed: () 
                Navigator.of(context).pop();
              ,
            ),
          ],
        );
      ,
    );
  

我试图在主屏幕小部件的构建方法中调用该方法，但它给了我错误 -

 The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.
E/flutter ( 3667): #0      Navigator.of.<anonymous closure> (package:flutter/src/widgets/navigator.dart:1179:9)
E/flutter ( 3667): #1      Navigator.of (package:flutter/src/widgets/navigator.dart:1186:6)
E/flutter ( 3667): #2      showDialog (package:flutter/src/material/dialog.dart:642:20)

问题是我不知道应该从哪里调用 _showDialog 方法？

【问题讨论】：

你试过initState()吗？

我猜在 initState 中上下文将不可用

【参考方案1】：

您必须将内容包装在另一个 Widget 中（最好是无状态的）。

示例：

更改自：

  import 'package:flutter/material.dart';

  void main() 
    runApp(new MyApp());
  

  class MyApp extends StatelessWidget 
    @override
    Widget build(BuildContext context) 
      return MaterialApp(
          title: 'Trial',
          home: Scaffold(
              appBar: AppBar(title: Text('List scroll')),
              body: Container(
                child: Text("Hello world"),
              )));
    
  

对此：

  import 'dart:async';
  import 'package:flutter/material.dart';

  void main() 
    runApp(new MyApp());
  

  class MyApp extends StatelessWidget 
    @override
    Widget build(BuildContext context) 
      return MaterialApp(
          title: 'Trial',
          home: Scaffold(
              appBar: AppBar(title: Text('List scroll')), body: new MyHome()));
    
  

  class MyHome extends StatelessWidget  // Wrapper Widget
    @override
    Widget build(BuildContext context) 
      Future.delayed(Duration.zero, () => showAlert(context));
      return Container(
        child: Text("Hello world"),
      );
    

    void showAlert(BuildContext context) 
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                content: Text("hi"),
              ));
    
  

注意：请参阅 here 以在 Future.delayed(Duration.zero,..) 中包装显示警报

【讨论】：

我似乎是一种黑客，但我喜欢这个解决方案。谢谢

我同意。但我无法找到更好的解决方案。我查看了showDialog 和Navigator.of 的文档/实现。没有运气

把它放在build的问题是，如果这个MyHome小部件被重绘，它会再次触发alert。

@Feu 我在实施上述答案后面临同样的问题

你可以使用 bool var 进入函数一次

【参考方案2】：

只需覆盖initState 并在Future 或Timer 中调用您的_showDialog 方法：

@override
void initState() 
  super.initState();

  // Use either of them. 
  Future(_showDialog);
  Timer.run(_showDialog); // Requires import: 'dart:async'

【讨论】：

这将有助于在整个应用程序中调用对话框，例如在没有连接或任何错误时弹出

【参考方案3】：

我会将它放在initState 的State（StatefulWidget）中。

将它放在Stateless 小部件的build 方法中很诱人，但这会多次触发您的警报。

在下面的示例中，它会在设备未连接到 Wifi 时显示警报，如果未连接到 Wifi，则会显示 [重试] 按钮。

import 'package:flutter/material.dart';
import 'package:connectivity/connectivity.dart';

void main() => runApp(MaterialApp(title: "Wifi Check", home: MyPage()));

class MyPage extends StatefulWidget 
    @override
    _MyPageState createState() => _MyPageState();


class _MyPageState extends State<MyPage> 
    bool _tryAgain = false;

    @override
    void initState() 
      super.initState();
      _checkWifi();
    

    _checkWifi() async 
      // the method below returns a Future
      var connectivityResult = await (new Connectivity().checkConnectivity());
      bool connectedToWifi = (connectivityResult == ConnectivityResult.wifi);
      if (!connectedToWifi) 
        _showAlert(context);
      
      if (_tryAgain != !connectedToWifi) 
        setState(() => _tryAgain = !connectedToWifi);
      
    

    @override
    Widget build(BuildContext context) 
      var body = Container(
        alignment: Alignment.center,
        child: _tryAgain
          ? RaisedButton(
              child: Text("Try again"),
              onPressed: () 
                _checkWifi();
            )
          : Text("This device is connected to Wifi"),
      );

      return Scaffold(
        appBar: AppBar(title: Text("Wifi check")),
        body: body
      );
    

    void _showAlert(BuildContext context) 
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text("Wifi"),
            content: Text("Wifi not detected. Please activate it."),
          )
      );
    

【讨论】：

你是如何在_showAlert 方法中传递context 的？

与StatelessWidget 不同，State<...> 类提供了一个context property。所以这是有效的。我猜上下文将指向根小部件。尽管如此，我没有测试这个编辑过的代码，但我有一个类似的代码，它的工作原理是这样的。

我收到此错误inheritedFromWidgetOfExactType(_InheritedTheme) was called before MainScreen.initState() completed

有什么想法吗？

@Fue 是的，我做到了。我发现解决方案你的方法一定是async。

【参考方案4】：

这就是我以简单的方式实现这一点的方法：

添加https://pub.dev/packages/shared_preferences

在主屏幕（或任何所需的小部件）的构建方法之上：

Future checkFirstRun(BuildContext context) async 
 SharedPreferences prefs = await SharedPreferences.getInstance();
 bool isFirstRun = prefs.getBool('isFirstRun') ?? true;

 if (isFirstRun) 
   // Whatever you want to do, E.g. Navigator.push()
   prefs.setBool('isFirstRun', false);
  else 
   return null;
 

然后在您的小部件的 initState 上：

@override
void initState() 
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) => checkFirstRun(context));

这可确保在构建小部件后运行该函数。

【讨论】：

WidgetsBinding.instance.addPostFrameCallback((_) => checkFirstRun(context)); == 魔法酱！

【参考方案5】：

我使用 Flutter Community 开发的包解决了这个问题。这里https://pub.dev/packages/after_layout

将此添加到您的 pubspec.yaml

after_layout: ^1.0.7+2

然后试试下面的例子

import 'package:after_layout/after_layout.dart';
import 'package:flutter/material.dart';

class DialogDemo extends StatefulWidget 
  @override
  _DialogDemoState createState() => _DialogDemoState();


class _DialogDemoState extends State<DialogDemo>
    with AfterLayoutMixin<DialogDemo> 
  @override
  void initState() 
    super.initState();
  

  @override
  void afterFirstLayout(BuildContext context) 
    _neverSatisfied();
  

  @override
  Widget build(BuildContext context) 
    return SafeArea(
      child: Container(
        decoration: BoxDecoration(color: Colors.red),
      ),
    );
  

  Future<void> _neverSatisfied() async 
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) 
        return AlertDialog(
          title: Text('Rewind and remember'),
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text('You will never be satisfied.'),
                Text('You\’re like me. I’m never satisfied.'),
              ],
            ),
          ),
          actions: <Widget>[
            FlatButton(
              child: Text('Regret'),
              onPressed: () 
                Navigator.of(context).pop();
              ,
            ),
          ],
        );
      ,
    );
  

【讨论】：

这在布局之后自动工作，但不是在布局之前

【参考方案6】：

如果您使用的是集团，请使用 @mirkancal 在此答案中建议的 BlocListener：Flutter: bloc, how to show an alert dialog