如何在 web（工具提示）中创建漂亮的 alertDialog？

Question

我需要设计一些类似于显示密码策略的警报视图。但我不知道如何设计这样的。如果按下按钮查看此类警报？

我的设计和代码

 viewPolicy() {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("Password Policy"),
            content: Container(
              width: 10.0,
              child: Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Text(
                            "Minimum Password Length : ${widget.minPwdlength}"),),],),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child:
                            Text("Minimum Password Uppercase Characters : 1"),),],),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child:
                            Text("Minimum Password lowercase Characters : 1"),),],),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Text("Minimum Password Numeric Characters : 1"),),],),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Text("Minimum Special Characters : 1"),),], ),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Text(
                          "Allowed Characters : ! @ # $ & * ~ Password cannot contain spaces",
                          style: TextStyle(color: Colors.grey),
                        ),),], ),], ), ),
            actions: <Widget>[
              FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text(
                    "OK",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ))], ); });}

我需要这样设计，

---

Answer 1

这是代码，希望对你有帮助。 Screenshot

Dialog errorDialog = Dialog(
            //this right here
            child: Theme(
              data: ThemeData().copyWith(
                inputDecorationTheme: InputDecorationTheme(
                  border: OutlineInputBorder(),
                ),
              ),
              child: Container(
                color: Colors.blueGrey[100],
                height: MediaQuery.of(context).size.height / 3.5,
                width: MediaQuery.of(context).size.width / 1,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text("Minimum Password Length"),
                          Text(": 6")
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text("Minimum Password Uppercase Characters"),
                          Text(": 1")
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text("Minimum Password lowercase Characters"),
                          Text(": 1")
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text("Minimum Password Numeric Characters"),
                          Text(": 1")
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text("Minimum Special Characters"),
                          Text(": 1")
                        ],
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              child: Text(
                                "Allowed Characters:\n! @ # $ & * ~\nPassword cannot contain spaces",
                                style: TextStyle(color: Colors.grey[700]),
                              ),
                            ),
                          ],
                        ),
                      ),
                      // you can remove this Row if you don't want the ok button, the user can dismiss the dialog by pressing anywhere in the screen.
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          FlatButton(
                            child: Text(
                              "Ok",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                            onPressed: () => Navigator.of(context).pop(),
                          )
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ),
          );
          showDialog(
              context: context,
              builder: (BuildContext context) => errorDialog);