SimpleDialog Widget

In this tutorial, you will learn how to use the SimpleDialog in the flutter.
What we will learn?
Before Start 
We will create a page to contain our code.
http://www.w3.org/2000/svg
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.
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.
http://www.w3.org/2000/svg
SimpleDialog(
              title: Text("What we do?"),
              children: [
                Text("This is our tutorial about the SimpleDialog."),
              ],
            ),
It will show you like this.
Constructor
Let's look at its constructor.
http://www.w3.org/2000/svg
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. 
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.
http://www.w3.org/2000/svg
 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.
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.
http://www.w3.org/2000/svg
  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.
shape
The is also the same as the shape of Container, you can check it in that article. I just give you an example.
http://www.w3.org/2000/svg
 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.
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. 
Thanks for your reading!
The end.
Whole code in GitHub,star to support.
What we will learn?

Before Start

Simple Use

Constructor

titlePadding&contentPadding

backgroundColor& elevation

shape

Conclusion

Whole code in GitHub,star to support.

0 Comments

Recent Comments
