# Widgets 17 | SimpleDialog

## What we will learn?

![](/files/-LX_9rV13Ww_tWdJQyxL)

## Before Start 

We will create a page to contain our code.

```dart
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class SimpleDialogPage extends StatefulWidget {
  @override
  _DialogState createState() => _DialogState();
}

class _DialogState extends State<SimpleDialogPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.SIMPLE_DIALOG),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            SizedBox(height: 600),
          ],
        ),
      ),
    );
  }
}
```

It will show the picture as follows.

![](/files/-LXZQkxYC37sJGs10zKV)

## Simple Use

The dialog is very common in our app, it will show short messages to us to our choice. Let's see an example below.

```dart
SimpleDialog(
              title: Text("What we do?"),
              children: [
                Text("This is our tutorial about the SimpleDialog."),
              ],
            ),
```

It will show you like this.

![](/files/-LXZSMX7x0AwTCMXt6lx)

## Constructor

Let's look at its constructor.

```dart
SimpleDialog({
    Key key,
    this.title,
    this.titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
    this.children,
    this.contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),
    this.backgroundColor,
    this.elevation,
    this.semanticLabel,
    this.shape,
  }) 
```

The constructor is very easy to know because we have known the types of its parameters. I will give an example to them.&#x20;

## titlePadding\&contentPadding

The title is a widget, the children is a list of the widgets, this is easy to understand. The `titlePadding` controls the padding of the `title`, the `contentPadding` controls the padding of the `children`. Let's see an example.

```dart
 Widget _padDialog() => SimpleDialog(
        title: Text(
          "Do you know why?",
          textAlign: TextAlign.center,
        ),
        titlePadding: EdgeInsets.symmetric(
          horizontal: 30,
          vertical: 20,
        ),
        children: <Widget>[
          Text(
            "Sometime,we learn very well,because we want to it.",
            textAlign: TextAlign.center,
          )
        ],
        contentPadding: EdgeInsets.symmetric(
          horizontal: 40,
          vertical: 20,
        ),
      );
```

Let's see the effect of our code.

![](/files/-LXZX2JyGBnjXTHFyeRC)

## backgroundColor& elevation

The `backgroundColor` is a `Color`, the elevation controls the shadow of the widget, those are common parameters that we have used them before. I just give an example.

```dart
  Widget _colorDialog() => SimpleDialog(
        title: Text(
          "Message",
          textAlign: TextAlign.center,
        ),
        children: <Widget>[
          Text(
            "You must learn it carefully.",
            textAlign: TextAlign.center,
          ),
        ],
        backgroundColor: RED,
        elevation: 4,
      );
```

It will show like this. The color of the background will change to `RED`.The shadow becomes less.

![](/files/-LXZZEsqZgfuXgf-mnuN)

## shape

The is also the same as the `shape` of `Container`, you can check it in that article. I just give you an example.

```dart
 Widget _shapeDialog() => SimpleDialog(
        title: Text(
          "Be careful!",
          textAlign: TextAlign.center,
        ),
        children: <Widget>[
          Text(
            "If you write a message, you should care about the message.",
            textAlign: TextAlign.center,
          ),
        ],
        backgroundColor: BLUE_LIGHT,
        elevation: 4,
        shape: StadiumBorder(
          side: BorderSide(
            style: BorderStyle.none,
          ),
        ),
      );
```

It will show as below.

![](/files/-LXZ_vT772da4uJ2z9Cq)

## Conclusion

From this article, you can learn how to implement the dialog with the `SimpleDialog` widget. It is easy to use, so I don't give the detail of many parameters. If you a newer, you should read the other articles before.&#x20;

Thanks for your reading!

The end.

#### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                         | Twitter                                 | GitHub                             | Medium                                        |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------------------------------------------- |
| [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | [FlutterOpen](https://medium.com/flutteropen) |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flutteropen.gitbook.io/flutter-widgets/widgets-17-or-simpledialog.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.