Introduction to Flutter advanced trip Dialog&Toast (10)

When doing native development,We all know to make aappdo it lively,Have a better experience when interacting with users,A variety of beautiful dialog boxes and prompts are essential,FlutterWhen designing the dialog, fully consider theUI上的体验,helped us design a set ofmaterial designstyled dialogs and lightweight promptswidget.

After reading the above renderings,Do readers feel thisUIDesign for a great experience,Here we introduced the commonly used to prompt the abovewidget.

Lightweight Tips

Lightweight hint mentioned here refers to the prompt appear don't interrupt the user is currently in the process of ongoing operations,只是在UIThere is a short time on the tip,After a period of time, the prompt content will automatically disappear,例如原生Android的Toast、SnackBar一样,并不会像DialogTo appear after the user must stop of the ongoing operation to completeDialogThe logical operation that is triggered can only continue in thedialogBefore the advent of the operation.

1.Tooltip

TooltipSupport to any userchild作为显示的Widget,and after the user long pressWidget时,will appear above or below something likeToast的提示,disappears automatically after a while,由于使用起来比较简单,I will explain it in the code comments and will not go into details..

import 'package:flutter/material.dart';

void main() {
    
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text("Tooltips"),
      ),
      body: Center(
        child: Tooltip(
            message: "显示提示内容",//提示的内容
            height: 60.0,//Tooltip的高度
            verticalOffset: 50.0,//The specific internalchild Widgetvertical distance,
            preferBelow:false,//whether to show below
            padding: EdgeInsets.all(20.0),//padding
            child: Icon(
              Icons.android,
              size: 50.0,
              color: Colors.green,
            )),
      ),
    );
  }
}

效果图

2.SnackBar

SnackBarWhether it is usage or function usage, it is almost the same as nativeAndroid一样 ,The only thing to note is thatScaffold.of(context).showSnackBar()中传递的context必须不能是Scaffold下面的Context

原因解释

因为Scaffold.of() 方法需要从Widgetfind in the treeScaffold的Context,所以如果直接在Scaffold中使用showSnackBar,Need to include on the outer layerBuilder Widget,这个BuilderDo nothing else,只不过把WidgetThe tree just moved down one level,There are also many beginners who follow the InternetDemoWhy can't I write after writing?SnackBar的原因,So here it is explained.

来看下SnackBar的效果图,you will find the sameAndroid如出一辙.

样例代码

import 'package:flutter/material.dart';

void main() {
    
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("SnackBar"),
      ),
      body: new Center(
        child: new Builder(builder: (BuildContext context) {
    
          return new RaisedButton(
            onPressed: () {
    
              //值得注意的是这个context必须不能是Scaffold节点下的context,因为Scaffold.of（）
              // 方法需要从Widgetfind in the treeScaffold的Context,所以如果直接在Scaffold中使用showSnackBar,
              // Need to be included in the outer cityBuilder Widget,这个BuilderDo nothing else,只不过把WidgetThe tree just moved down one level.
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("SanckBar is Showing "),
                action: new SnackBarAction(
                    label: "撤销",
                    onPressed: () {
    
                      print("点击撤回---------------");
                    }),
              ));
            },
            child: new Text("SnackBar提示"),
            color: Colors.cyan,
            highlightColor: Colors.lightBlueAccent,
            disabledColor: Colors.lightBlueAccent,
          );
        }),
      ),
    );
  }
}

//const SnackBar({
    
//Key key,
//@required this.content,//内容
//this.backgroundColor,//背景
//this.action,//其他操作
//this.duration: _kSnackBarDisplayDuration,//显示时长
//this.animation,//进出动画
//})

non-lightweight operations

上面介绍了Tooltip跟SnackBar,When introducing the two, the author also mentioned that they are positioned as lightweight tipsWidget,Then there will be a non-lightweight prompt component corresponding to that,Means in the process of such indication,Will interrupt the user's ongoing operations,Force the user to process the logic on the dialog box before they can go back and continue the original user operation,例如AlertDialog、BottomSheetDialog等,Next, the author will take you to experience the usage of this kind of prompt operation..

Flutterrequires developers to passshowDialog(context,child),to evoke various types ofdialog显示,contextis the context parameter,childis the type of dialog to display,例如,SimpleDialog、AlertDialog、AboutDialog、BottomSheetDialogneed helpshowDialog来唤起.

1.SimpleDialog

SimpleDialog跟它的名字一样,it's a simple dialog,Developers only need to pass intitle跟child就可以使用它,其中child是一个Widget数组,Users can import any arbitraryWidget,然后借助showDialogjust wake up.

效果图

样例代码

import 'package:flutter/material.dart';

void main() {
    
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("SimpleDialog"),
      ),
      body: new Center(
        child:  new RaisedButton(
              onPressed: () {
    
                showDialog(
                    context: context,
                    child: new SimpleDialog(
                      title: new Text("标题"),
                      contentPadding: const EdgeInsets.all(10.0),
                      children: <Widget>[    //SimpleDialogMultiple can be specified inchildren
                        new Text("文字内容1"),
                        new ListTile(
                          leading: new Icon(Icons.android),
                          title: new Text("android"),
                        ),

                        new Text("文字内容2"),
                        new Text("文字内容3"),
                        new Text("文字内容4"),
                      ],
                    ));
              },
              child: new Text("Dialog出来"),
              color: Colors.blue,
              highlightColor: Colors.lightBlueAccent,
              disabledColor: Colors.lightBlueAccent),

      ),
    );
  }
}

2.AlertDialog

AlertDialog其实就是simpleDialog的封装,更加方便开发者使用,只不过在SimpleDialog的基础上新增了action操作而已,Users can customize specific similar,“取消”、“确定”Everything possibledialoglogical processing on.There are no other knowledge points that need special emphasis,也是跟simpledialog一样,需要借助showDialog唤起,使用起来比较简单,directly from the code.

样例代码

import 'package:flutter/material.dart';

void main() {
    
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("AlertDialog"),
      ),
      body: new Center(
        child: new Builder(builder: (BuildContext context) {
    
          return new RaisedButton(
            onPressed: () {
    
              showDialog(
                  context: context,
                  child: new AlertDialog(
                    title: new Text("标题"),
                    content: new Text("内容区域"),
                    actions: <Widget>[
                      new FlatButton(
                          onPressed: () {
    
                            Navigator.of(context);
                          },
                          child: new Text("确定")),
                      new FlatButton(
                          onPressed: () {
    
                            print("点击取消------");
                          },
                          child: new Text("取消")),
                    ],
                  ));
            },
            color: Colors.lightBlueAccent,
            child: new Icon(Icons.phone),
          );
        }),
      ),
    );
  }
}

效果图

Mentioned in the renderings at the beginning of the articleaboutDialog跟alertDialog类似,Also packagedsimpleDialog,Readers can read and try the specific usage by themselves,I won't go into details here,Next I want to sayBottomSheetDialog跟ModalBottomSheetDialog.

3.BottomSheetDialog、ModalBottomSheetDialog

BottomSheetDialog、ModalBottomSheetDialogalso requires the help ofshowDialog唤起,just like its name,这两种dialogpops up from the bottom of the screen,不同的是BottomSheetDialogBy default it will fill the full screen,而ModalBottomSheetDialog半屏显示,Both support moving up and down with the user's finger dragging.

方法签名

1.showBottomSheet(context,child) 上下文参数,Widget数组
2.showModalBottomSheet(context,child) 上下文参数,Widget数组

Come and experience how to use these two things together

样例代码

import 'package:flutter/material.dart';

void main() {
    
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("BottomSheet"),
      ),
      body: new Column(
        children: <Widget>[
          new Builder(builder: (BuildContext context){
    
            return new RaisedButton(
              onPressed: () {
    
                showBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
    
                      return new Container(
                        child: new Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: new Column(
                            children: <Widget>[
                              new ListTile(
                                leading: new Icon(Icons.chat),
                                title: new Text("对话框列表1"),
                              ),
                              new ListTile(
                                leading: new Icon(Icons.help),
                                title: new Text("对话框列表2"),
                              ),
                              new ListTile(
                                leading: new Icon(Icons.settings),
                                title: new Text("对话框列表3"),
                              ),
                              new ListTile(
                                leading: new Icon(Icons.more),
                                title: new Text("对话框列表4"),
                              ),
                            ],
                          ),
                        ),
                      );
                    });
              },
              child: new Text("BottomSheet"),
            );
          }),


          //showModalBottomSheet与BottomSheet的区别是 BottomSheet充满屏幕,ModalBottomSheet半屏
          new RaisedButton(
            onPressed: () {
    
              showModalBottomSheet(
                  context: context,
                  builder: (BuildContext context) {
    
                    return new Container(
                      child: new Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: new Column(
                          children: <Widget>[
                            new ListTile(
                              leading: new Icon(Icons.chat),
                              title: new Text("对话框列表1"),
                            ),
                            new ListTile(
                              leading: new Icon(Icons.help),
                              title: new Text("对话框列表2"),
                            ),
                            new ListTile(
                              leading: new Icon(Icons.settings),
                              title: new Text("对话框列表3"),
                            ),
                            new ListTile(
                              leading: new Icon(Icons.more),
                              title: new Text("对话框列表4"),
                            ),
                          ],
                        ),
                      ),
                    );
                  });
            },
            child: new Text("ModalBottomSheet"),
          ),
        ],
      ),
    );
  }
}

下一篇：
Flutter入门进阶之旅（十一）Index&Chose