Filter by Widgets


SimpleDialog Widget

This Tutorials is posted by niebin312 at 04-03-2019 05:17:35



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.

import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';
class SimpleDialogPage extends StatefulWidget {
_DialogState createState() => _DialogState();
}
class _DialogState extends State<SimpleDialogPage> {
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.

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.

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.

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.

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.

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.


0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




Recent articles

Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Check out this article on Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Read full post

How to create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

ListView with Images from the Internet

Check out this article on ListView with Images from the Internet

Read full post

How to show Tooltip in Flutter?

Check out this article on How to show Tooltip in Flutter?

Read full post

How to create BottomNavigationBar in flutter?

Check out this article on How to create BottomNavigationBar in flutter?

Read full post

How to add actions to Appbar?

Check out this article on How to add actions to Appbar?

Read full post

How to open dart devtools in VS code?

Check out this article on How to open dart devtools in VS code?

Read full post

Accessibility features in flutter

Check out this article on Accessibility features in flutter

Read full post

© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.