Example 1: flutter alertdialog
create a methos _showDialog
then call it in your state
// user defined function
void _showDialog() {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: new Text("Alert Dialog body"),
actions: [
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
Example 2: show dialog box on pressed flutter
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Testing")),
body: Center(
child: RaisedButton(
child: Text("Show dialog"),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
elevation: 16,
child: Container(
height: 400.0,
width: 360.0,
child: ListView(
children: [
SizedBox(height: 20),
Center(
child: Text(
"Leaderboard",
style: TextStyle(fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold),
),
),
SizedBox(height: 20),
_buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 1", score: 1000),
_buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 2", score: 2000),
_buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 3", score: 3000),
_buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 4", score: 4000),
_buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 5", score: 5000),
_buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 6", score: 6000),
],
),
),
);
},
);
},
),
),
);
}
Widget _buildName({String imageAsset, String name, double score}) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
SizedBox(height: 12),
Container(height: 2, color: Colors.redAccent),
SizedBox(height: 12),
Row(
children: [
CircleAvatar(
backgroundImage: AssetImage(imageAsset),
radius: 30,
),
SizedBox(width: 12),
Text(name),
Spacer(),
Container(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
child: Text("${score}"),
decoration: BoxDecoration(
color: Colors.yellow[900],
borderRadius: BorderRadius.circular(20),
),
),
],
),
],
),
);
}