Dart first lets see if a Dialog is implemented in Flutter. Dart then finds the following method
Future<T> showDialog<T>({
@required BuildContext context,
bool barrierDismissible = true,
@Deprecated(
'Instead of using the "child" argument, return the child from a closure '
'provided to the "builder" argument. This will ensure that the BuildContext '
'is appropriate for widgets built in the dialog.'
) Widget child,
WidgetBuilder builder,
})
Copy the codeThere are three parameters in the constructor
'context': This parameter must be passed and is the key to displaying the view'barrierDismissible'This is an android touch dialog that automatically cancels the dialog outside'builder': used to create widgetsCopy the codeLet’s take an example
RaisedButton(
child: Text("showDialog"),
onPressed: () {
showDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Center(
child: Text("data")); }); },)Copy the code#### then you will see the Dialog displayed like this
showDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Scaffold(
body: Center(
child: Text("data"),),); });Copy the code#### and this is what it looks like
# # # AlterDialog class
class AlertDialog extends StatelessWidget
Copy the code### Show example code for AlterDialog
/// Future<void> _neverSatisfied() async {
/// return showDialog<void>(
/// context: context,
/// barrierDismissible: false, // user must tap button!
/// builder: (BuildContext context) {
/// return AlertDialog(
/// title: Text('Rewind and remember'),
/// content: SingleChildScrollView(
/// child: ListBody(
/// children: <Widget>[
/// Text('You will never be satisfied.'),
/// Text('You\ 're like me. I'm never satisfied.'),
/// ],
/// ),
/// ),
/// actions: <Widget>[
/// FlatButton(
/// child: Text('Regret'), /// onPressed: () { /// Navigator.of(context).pop(); }, ///), ///], ///); / / /}, / / /); / / /}Copy the code#### Let’s try the official example
Ojbk official dialog has been fixed. Now let’s start customizing a Dialog
####1. Take a look at the AlterDialog construct
const AlertDialog({ Key key, this.title, this.titlePadding, this.titleTextStyle, this.content, ContentPadding = const EdgeInsets. FromLTRB (24.0, 20.0, 24.0, 24.0), this. ContentPadding = const EdgeInsets. FromLTRB (24.0, 20.0, 24.0), this. this.backgroundColor, this.elevation, this.semanticLabel, this.shape, }) : assert(contentPadding ! = null), super(key: key);Copy the code###### We look at some basic property definitions, and then we just care about content, which is a Widget class
/// The (optional) content of the dialog is displayed in the center of the
/// dialog in a lighter font.
///
/// Typically this is a [SingleChildScrollView] that contains the dialog's /// message. As noted in the [AlertDialog] documentation, it's important
/// to use a [SingleChildScrollView] if there's any risk that the content /// will not fit. final Widget content;Copy the code###### that is good, we define the widget directly to pass in the ojbk ####2. Let’s define a class, like MyDialog. Do it again in the AlterDaialog configuration
import "package:flutter/material.dart";
class MyDailog extends StatelessWidget {
final Widget content;
final List<Widget> actions;
final Color backgroundColor;
final double elevation;
final String semanticLabel;
final ShapeBorder shape;
const MyDailog({
Key key,
this.content,
this.actions,
this.backgroundColor,
this.elevation,
this.semanticLabel,
this.shape,
}) : super(key: key);
@override
Widget build(BuildContext context) {
returnAlertDialog( content: content, actions: actions, backgroundColor: backgroundColor, elevation: elevation, shape: shape, ); }}Copy the code####3. The effect is the same as before, but we have removed the title. We implemented our own Dialog with a simple wrapper. ####4. We see that using showDialog is a long code, if we customize it, it will not be longer, can we simplify showDialog, ojbk, continue to work!
import "package:flutter/material.dart";
void showMyDialog({
@required Widget content,
TextStyle contentTextStyle,
List<Widget> actions,
Color backgroundColor,
double elevation,
String semanticLabel,
ShapeBorder shape,
bool barrierDismissible = true, @required BuildContext context, }) { assert(context ! = null); assert(content ! = null); showDialog<void>( context: context, barrierDismissible: barrierDismissible, builder: (BuildContext context) {returnMyDailog( content: content, backgroundColor: backgroundColor, elevation: elevation, semanticLabel: semanticLabel, shape: shape, actions: actions, ); }); } class MyDailog extends StatelessWidget { final Widget content; Omitted here, see........ beforeCopy the code####4. Let’s use it
RaisedButton(
child: Text("showDialog"),
onPressed: () {
showMyDialog(
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('You will never be satisfied.'),
Text('You\ 're like me. I'm never satisfied.'),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Regret'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
context: context,
);
},
Copy the code###### done, as shown above. That’s all for today’s custom Dialog. By the way, I’m promoting my Dialog library here, which is still being added…
Github.com/Lans/multip…
Simple to use
Ultiple_dialog: ^ 0.1.5 import'package:multiple_dialog/multiple_dialog.dart';
Copy the code