如何通过单击 Flutter 中屏幕的其他区域来管理警报对话框？

Question

我的应用程序中有一项活动。 我正在使用警报对话框。 当我到达此活动并且警报对话框打开时，当我单击屏幕的其他区域时它会消失，但问题是当我想单击任何文本字段的内部时它会一遍又一遍地重新出现。 我想要这样，一旦它消失，新的再次出现，直到我去其他活动并再次返回到这个活动。 我是 Flutter 的新手我从几天来就面临这个问题，我多次搜索了这个问题，但没有找到解决它的方法，任何可以帮助我的人，在此先感谢。 代码

    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'bottomnavigationbar.dart';

class Contact extends StatefulWidget {
  @override
  _ContactState createState() => _ContactState();
}

class _ContactState extends State<Contact> {
  @override
  Widget build(BuildContext context) {
    AlertDialog dialog = new AlertDialog(
      content: Container(
        width: 260.0,
        height: 187.0,
        decoration: new BoxDecoration(
          shape: BoxShape.rectangle,
          //  color: const Color(0xFFFFFF),
          borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
        ),
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(1),
            ),
            Container(
              child: GestureDetector(
                onTap: () {
//                Route route =
//                    MaterialPageRoute(builder: (context) => Payment1());
//                Navigator.pushReplacement(context, route);
                  //  Navigator.pushNamed(context, "myRoute");
                },
                child: new Text(
                  "For Bikes-979578-6541",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 18,
                    //  fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(1),
            ),
            Divider(
              thickness: 1.5,
            ),
            Padding(
              padding: EdgeInsets.all(1),
            ),
            Container(
              child: GestureDetector(
                onTap: () {
//                Route route =
//                    MaterialPageRoute(builder: (context) => Payment1());
//                Navigator.pushReplacement(context, route);
                  //  Navigator.pushNamed(context, "myRoute");
                },
                child: new Text(
                  "For Boats-979-541-3607",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 18,
                    //fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(1),
            ),
            Divider(
              thickness: 1.5,
            ),
            Padding(
              padding: EdgeInsets.all(1),
            ),
            Container(
              child: GestureDetector(
                onTap: () {
//                Route route =
//                    MaterialPageRoute(builder: (context) => Payment1());
//                Navigator.pushReplacement(context, route);
                  //  Navigator.pushNamed(context, "myRoute");
                },
                child: new Text(
                  "redtiderentals@yahoo.com",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 18,
                    // fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(1),
            ),
            Divider(
              thickness: 1.5,
            ),
            Padding(
              padding: EdgeInsets.all(1),
            ),
            Container(
              child: GestureDetector(
                onTap: () {
//                Route route =
//                    MaterialPageRoute(builder: (context) => Payment1());
//                Navigator.pushReplacement(context, route);
                  //  Navigator.pushNamed(context, "myRoute");
                },
                child: new Text(
                  "Follow Us on Facebook!",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 18,
                    //  fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(1),
            ),
            Divider(
              thickness: 1.5,
            ),
            Padding(
              padding: EdgeInsets.all(1),
            ),
            Container(
              child: GestureDetector(
                onTap: () {
                  //    Navigator.pop(dialog);
//                Route route =
//                    MaterialPageRoute(builder: (context) => Payment1());
//                Navigator.pushReplacement(context, route);
                  //  Navigator.pushNamed(context, "myRoute");
                  //   Navigator.of(context).pop(false),
                },
                child: new Text(
                  "Done",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 18,
                    //fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
    Future.delayed(
      Duration.zero,
      () => showDialog(
          context: context, builder: (BuildContext context) => dialog),
    );

    TextStyle style = TextStyle(
        fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);

    return Scaffold(
      appBar: AppBar(
        title: Text("Contact"),
        centerTitle: true,
        actions: <Widget>[
          new IconButton(
            icon: new Icon(
              Icons.more_horiz,
              size: 35,
              color: Colors.white,
            ),
            //  tooltip: 'Closes application',
            //   onPressed: () => exit(0),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(1),
          color: Colors.black,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.width / 1.6,
                //  constraints: BoxConstraints.expand(),
                decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage("images/contactpage.png"),
                      fit: BoxFit.cover),
                ),
              ),
              Padding(
                padding: EdgeInsets.all(8),
              ),
              Text(
                "Contact Info",
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 20,
                  fontWeight: FontWeight.w400,
                ),
              ),
              Padding(
                padding: EdgeInsets.all(8),
              ),
              Divider(
                color: Colors.white,
                indent: 40,
                endIndent: 40,
              ),
              Padding(
                padding: EdgeInsets.all(8),
              ),
              Container(
                  padding: EdgeInsets.all(16),
                  child: Column(
                    //mainAxisAlignment: MainAxisAlignment.center,

                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "We are a locally owned. family run business providing equipment rentals in Matagorda Country. We are dedicated to making your experience with us go as smoothly as possible. Fill out the form below or call us if you have any questions or concerns.",
                        style: TextStyle(
                          color: Colors.white70,
                          fontSize: 15,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                      Text(
                        "Mobile No:",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.w400),
                      ),
                      TextField(
                        style: style,
                        maxLength: 30,
                        cursorColor: Colors.red,
                        textAlign: TextAlign.left,
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          hintText: 'Enter your mobile number',
                          hintStyle:
                              TextStyle(fontSize: 16, color: Colors.white),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                            borderSide: BorderSide(
                              width: 0,
                              style: BorderStyle.none,
                            ),
                          ),
                          filled: true,
                          fillColor: Color(0xFF1E1E1E),
                          contentPadding: EdgeInsets.all(16),
                        ),
                      ),
                      Text(
                        "Email:",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.w400),
                      ),
                      TextField(
                        style: style,
                        maxLength: 16,
                        cursorColor: Colors.red,
                        textAlign: TextAlign.left,
                        keyboardType: TextInputType.emailAddress,
                        decoration: InputDecoration(
                          hintText: 'Enter your email',
                          hintStyle:
                              TextStyle(fontSize: 16, color: Colors.white),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                            borderSide: BorderSide(
                              width: 0,
                              style: BorderStyle.none,
                            ),
                          ),
                          filled: true,
                          fillColor: Color(0xFF1E1E1E),
                          contentPadding: EdgeInsets.all(16),
                        ),
                      ),
                      Text(
                        "Description:",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.w400),
                      ),
                      TextField(
                        keyboardType: TextInputType.text,
                        maxLines: 8,
                        maxLength: 1000,
                        style: style,
                        cursorColor: Colors.red,
                        textAlign: TextAlign.left,
                        decoration: InputDecoration(
                          hintText: 'Enter Description Here',
                          hintStyle:
                              TextStyle(fontSize: 16, color: Colors.white),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                            borderSide: BorderSide(
                              width: 0,
                              style: BorderStyle.none,
                            ),
                          ),
                          filled: true,
                          fillColor: Color(0xFF1E1E1E),
                          contentPadding: EdgeInsets.all(16),
                        ),
                      ),
                      Material(
                        elevation: 5.0,
                        borderRadius: BorderRadius.circular(30.0),
                        color: Colors.red,
                        child: MaterialButton(
                          minWidth: MediaQuery.of(context).size.width,
                          padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                          onPressed: () {
//                        Route route =
//                        MaterialPageRoute(builder: (context) => Payment2());
//                        Navigator.pushReplacement(context, route);
                          },
                          child: Text("Submit",
                              textAlign: TextAlign.center,
                              style: style.copyWith(
                                  color: Colors.white,
                                  fontWeight: FontWeight.w800)),
                        ),
                      ),
                    ],
                  ))
            ],
          ),
        ),
      ),
      bottomNavigationBar: BottomNavigation(),
    );
  }
}

视频链接【问题视频】【1】【1】：https://drive.google.com/file/d/11i4R9DZAImO8CGw7TwOwQ0wbXXn9yHLr/view?usp=sharing

Answer 1

在 Widget 构建之外定义警报对话框并在需要时调用它

createAlertDialog(BuildContext){ 
return AlertDialog( //Your work ) 
@override   Widget build(BuildContext context) { 
//Whenver you need alertdialog call createAlertDialog()  }```

Answer 2

Flutter 有一个showDialog()方法，专门用于对话框小部件。 您可以将AlertDialog小部件放入其中并在initState()调用showDialog()方法，该方法将在创建有状态小部件时仅调用一次，因此在重建期间不会被调用。 如果您想在点击其他区域时关闭对话框，请将showDialog()方法的barrierDismissible参数设置为 true。

你只需要像这样修改_ContactState类：

class _ContactState extends State<Contact> {
        
     @override
      void initState() {
        super.initState();
        Future.delayed(
            Duration.zero,
            () => showDialog(
                  context: context,
                  barrierDismissible: true, 
                  builder: (_) => AlertDialog(
                   // content

               ),
            )   
         );
       }
        
     @override
     Widget build(BuildContext context) {
       //your original code without the AlertDialog widget
     }
}

========================== 。 更新

我对这段代码做了一些更改。现在它工作正常👌

Answer 3

导致此行为的原因是您已在构建方法中定义了警报对话框。 每次重新构建小部件或您的状态更改时，都会运行构建方法，因此您的警报对话框会重新出现。

尝试将 AlertDialog 对话框变量移到 build 方法之外。