How to create AlertDialog in flutter?

This Article is posted by seven.srikanth at 12/16/2022 4:27:59 AM



In Flutter, an AlertDialog is a widget that displays a dialog with a message and some buttons. It's a useful way to display information or prompt the user for a decision.
Here's an example of how you can use an AlertDialog in Flutter:

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}
class MyApp extends StatelessWidget {
  @ override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('AlertDialog Title'),
                  content: Text('This is the content of the AlertDialog'),
                  actions: <Widget>[
                    ElevatedButton(
                      child: Text('CANCEL'),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                    ElevatedButton(
                      child: Text('OK'),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                  ],
                );
              },
            );
          },
          child: Text('Show AlertDialog'),
        ),
      ),
    );
  }
}
This code will display an AlertDialog when the user clicks the "Show AlertDialog" button. The AlertDialog has a title, some content, and two buttons: "CANCEL" and "OK". You can customize the dialog by setting the title, content, and buttons to whatever you want.
You can also customize the appearance of the AlertDialog by passing it a Theme and a titlePadding parameter. For example:

AlertDialog(
  title: Text('AlertDialog Title'),
  content: Text('This is the content of the AlertDialog'),
  actions: <Widget>[
    FlatButton(
      child: Text('CANCEL'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    FlatButton(
      child: Text('OK'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
  theme: Theme.of(context).copyWith(
    dialogBackgroundColor: Colors.yellow,
  ),
  titlePadding: EdgeInsets.all(20.0),
)
This will make the background color of the AlertDialog yellow and add padding to the title.
I hope this helps! Let me know if you have any other questions. 

Tags: show dialog; popup; yes or no; cancel or ok;








0 Comments
Login to comment.
Recent Comments












© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com