An AlertDialog is a modal dialog box that appears on top of your UI. It’s typically used for:
- Confirmations (e.g., delete, logout)
- Error messages
- User choices (Yes / No)
- Input prompts (with TextField)
Source Code
myAlert(context){
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Confirm'),
content: Text('Are you sure you want to proceed?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Cancel'),
),
ElevatedButton(
onPressed: () {
// Perform action here
Navigator.pop(context);
},
child: Text('Yes'),
),
],
backgroundColor: Colors.greenAccent,
);
},
);
}
//How to call,
ElevatedButton(onPressed: (){
myAlert(context);
}, child: Text("Alert!")),
Ai Code Analizer
🎨 Important Properties
| Property | Description |
|---|---|
title | The heading of the dialog |
content | The body content (usually Text or TextField) |
actions | List of buttons (usually TextButton / ElevatedButton) |
shape | Optional border styling for custom design |
backgroundColor | Set a custom background color |