如何通過單擊 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 方法之外。