【问题标题】：How to Manage alert dialog by clicking other areas of Screen in Flutter?如何通过单击 Flutter 中屏幕的其他区域来管理警报对话框？
【发布时间】：2020-12-12 04:49:55
【问题描述】：

我的应用中有一个活动。我正在使用警报对话框。当我到达此活动并且警报对话框打开时，当我单击屏幕的其他区域时它会消失，但问题是当我想单击任何文本字段的内部时，它会一遍又一遍地重新出现。我想要这样，一旦它消失，新的再次出现，直到我去其他活动并再次返回这个活动。我是 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

【问题讨论】：

标签： android flutter dart flutter-alertdialog

【解决方案1】：

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

尝试将您的 AlertDialog 对话框变量移到构建方法之外。

【讨论】：

【解决方案2】：

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

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

【讨论】：

当我到达这个活动时，点击任何其他区域它应该永久消失
定义 Widget 外部的警报对话框构建类似 class _ContactState extends State<Contact> { createAlertDialog(BuildContext){ return AlertDialog( //Your work ) @override Widget build(BuildContext context) { //Whenver you need alertdialog call createAlertDialog() }

【解决方案3】：

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
     }
}

=========================== .已更新

我对这段代码进行了一些更改。现在它工作正常?

【讨论】：