Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Constructor
3.
Properties of Alter Dialog Box
4.
Frequently Asked Questions
4.1.
What is AlertDialog?
4.2.
How do I use AlertDialog Flutter?
4.3.
What is the difference between MaterialApp and scaffold?
4.4.
What is Flutter, and why it is used?
4.5.
Is Flutter a programming language?.
5.
Conclusion
Last Updated: Mar 27, 2024

Flutter AlertDialog

Author Alok Pandey
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

An alert dialog informs the user of events that require their attention. A title and a list of actions are both optional in an alert dialog. The headline appears above the material, while the actions appear below the content. And Suppose the content is too large to fit vertically on the screen. In that case, the dialogue will show the title and actions before allowing the content to overflow, which is rarely desirable. Now let's see the implementation of Flutter AlertDialog in detail

Constructor

const AlertDialog(
{Key? key,
Widget? title,
EdgeInsetsGeometry? titlePadding,
TextStyle? titleTextStyle,
Widget? content,
EdgeInsetsGeometry contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
TextStyle? contentTextStyle,
List<Widget>? actions,
EdgeInsetsGeometry actionsPadding = EdgeInsets.zero,
MainAxisAlignment? actionsAlignment,
OverflowBarAlignment? actionsOverflowAlignment,
VerticalDirection? actionsOverflowDirection,
double? actionsOverflowButtonSpacing,
EdgeInsetsGeometry? buttonPadding,
Color? backgroundColor,
double? elevation,
String? semanticLabel,
EdgeInsets insetPadding = _defaultInsetPadding,
Clip clipBehavior = Clip.none,
ShapeBorder? shape,
AlignmentGeometry? alignment,
bool scrollable = false}
)
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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 ClassFlutter 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!

Previous article
Flutter Form Submission Page
Next article
Flutter Icons Class
Live masterclass