Flutter AlertDialog

Properties of Alter Dialog Box

• actions → List<Widget>?
  This property is a set of actions that are displayed at the bottom of the dialog.
• actionsAlignment → MainAxisAlignment?
  It Defines the horizontal layout of the actions according to the same rules as for Row.mainAxisAlignment.
• actionsOverflowAlignment → OverflowBarAlignment?
  This property sets the horizontal alignment of actions within the vertical "overflow" layout.
• actionsOverflowButtonSpacing → double?
  This property sets the spacing between actions when the OverflowBar switches to a column layout because the steps don't fit horizontally.
• shape → ShapeBorder?
  This property is used to define and alter the shape of this dialog's border.
• title → Widget?
  This property of the dialog is displayed in a large font at the top of the dialog.
• backgroundColor → Color?
  This property is used to define the background color of the widget which is being used in.

Flutter has its own show Dialog widget for displaying dialogue boxes.lets see the code of Flutter AlertDialog.

Code

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Coding Ninjas';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(_title),
          backgroundColor: Colors.orange[400],
        ),
        body: const Center(
          child: MyStatelessWidget(),
        ),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () => showDialog<String>(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: const Text('AlertDialog Title'),
          content: const Text('AlertDialog description'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'Cancel'),
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, 'OK'),
              child: const Text('OK'),
            ),
          ],
        ),
      ),
      child: const Text('Show Dialog'),
    );
  }
}

Output

Frequently Asked Questions

What is AlertDialog?

The dialogue message can be displayed with the OK and Cancel buttons using Android AlertDialog. It can interrupt and inquire about the user's decision to continue or stop. The title, content area, and action buttons make up the Android AlertDialog.

How do I use AlertDialog Flutter?

By Creating AlertDialog In Flutter by using the constructor. To display the alert dialog we have to use showDialog() method.

What is the difference between MaterialApp and scaffold?

MaterialApp is a widget that introduces the Navigator and Theme widgets required to create a material design app. Scaffold Widget is a MaterialApp component that provides numerous fundamental features such as AppBar, BottomNavigationBar, Drawer, FloatingActionButton, etc.

What is Flutter, and why it is used?

Flutter is a portable UI toolkit from Google that lets you create attractive natively built apps for mobile, web, and desktop from a single codebase. Flutter is free and open-source, and it works with existing code. It is utilized by developers and organizations all over the world.

Is Flutter a programming language?.

Flutter, on the other hand, is not a programming language. It's a prewritten software development kit (SDK) that includes ready-to-use and customizable widgets, as well as libraries, tools, and documentation, all of which help developers create cross-platform apps.

Conclusion

In this article, we have extensively discussed Flutter AlertDialog. We hope that this blog has helped you enhance your knowledge regarding Flutter AlertDialog and if you would like to learn more, check out our articles on  Flutter MaterialApp Class,  Flutter Animation Flutter Table and Flutter Tabbar

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. 

Enroll in our courses and refer to the mock test and problems available.

Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow. 

Happy Coding!