> For the complete documentation index, see [llms.txt](https://flutteropen.gitbook.io/flutter-widgets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flutteropen.gitbook.io/flutter-widgets/widgets-17-or-simpledialog.md).

# 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) |