如何關閉特定的 Flutter AlertDialog？

Question

重現步驟：

1. 將以下代碼復制粘貼到 DartPad.dev/flutter

2. 命中運行

3. 單擊Do Api Call按鈕

4. 你應該看到兩個彈出窗口，一個在下面，一個在上面

5. 5秒后，希望下方關閉而不是上方關閉，而是上方關閉

如何關閉下面的並保持上面的打開？

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: CloseSpecificDialog(),
        ),
      ),
    );
  }
}

class CloseSpecificDialog extends StatefulWidget {
  @override
  _CloseSpecificDialogState createState() => _CloseSpecificDialogState();
}

class _CloseSpecificDialogState extends State<CloseSpecificDialog> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: RaisedButton(
        child: Text('Do API call'),
        onPressed: () async {
          showDialogBelow();
          showDialogAbove();
          await Future.delayed(Duration(seconds: 5));
          closeDialogBelowNotAbove();
        },
      )),
    );
  }

  void showDialogBelow() {
    showDialog(
        context: context,
        builder: (BuildContext contextPopup) {
          return AlertDialog(
            content: Container(
              width: 350.0,
              height: 150.0,
              child: Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    CircularProgressIndicator(),
                    Text('I am below (you should not see this after 5 sec)'),
                  ],
                ),
              ),
            ),
          );
        });
  }

  void showDialogAbove() {
    showDialog(
        context: context,
        builder: (BuildContext contextPopup) {
          return AlertDialog(
            content: Container(
              height: 100.0,
              child: Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    CircularProgressIndicator(),
                    Text('I am above (this should not close)'),
                  ],
                ),
              ),
            ),
          );
        });
  }

  /// This should close the dialog below not the one above
  void closeDialogBelowNotAbove() {
    Navigator.of(context).pop();
  }
}

Answer 1

彈出將刪除添加最新的路由，並且showDialog只是推送一個帶有dialogue的新路由，您可以直接使用堆棧中的Dialog小部件並使用 boolean 變量管理 state 以實現相同的效果，

class _MyHomePageState extends State<MyHomePage> {
  bool showBelow = true;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
      await Future.delayed(Duration(seconds: 5));
      setState(() {
        showBelow = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          if(showBelow) AlertDialog(
            title: Text('Below..'),
            content: Text('Beyond'),
          ),
          AlertDialog(
            title: Text('Above..'),
          ),
        ],
      ),
    );
  }
}

Answer 2

消除

 await Future.delayed(Duration(seconds: 5));
 closeDialogBelowNotAbove();

添加Future.delayed

void showDialogAbove() {
    showDialog(
        context: context,
        builder: (BuildContext contextPopup) {
          Future.delayed(Duration(seconds: 5), () {
            closeDialogBelowNotAbove();
          });
          return AlertDialog(
            content: Container(
              height: 100.0,
              child: Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    CircularProgressIndicator(),
                    Text('I am above (this should not close)'),
                  ],
                ),
              ),
            ),
          );
        });
  }

注意： Navigator.pop() 方法總是彈出在屏幕上可用的警報/小部件上方，因為它與小部件當前具有的BuildContext一起使用。