How to create beautiful alertDialog like in web(tooltip)? - dart

Question

I need to design something like an alert view for display password policy. But I don't know how to design like this. If press button view this kind of alert?
My design and code
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),
))], ); });}
I need to design like this,

Answer 1

Here is the code, hope it will be helpful.
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);