android开发分享你知道吗，Flutter内置了10多种show

注意：无特殊说明，flutter版本及dart版本如下：

• flutter版本： 1.12.13+hotfix.5
• dart版本： 2.7.0

showdialog

showdialog 用于弹出material风格对话框，基本用法如下：

showdialog(     context: context,     builder: (context) {       return alertdialog(         ...       );     } );

效果如下：

builder通常返回dialog组件，比如simpledialog和alertdialog。

userootnavigator参数用于确定是否将对话框推送到给定“context”最远或最接近的navigator。默认情况下，userootnavigator为“true”，被推送到根navigator。如果应用程序有多个navigator，关闭对话框需要使用

navigator.of(context, rootnavigator: true).pop(result)

而不是

navigator.pop(context, result)

barrierdismissible参数确认点击提示框外部区域时是否弹出提示框，默认true。

showcupertinodialog

showcupertinodialog 用于弹出ios风格对话框，基本用法如下：

showcupertinodialog(     context: context,     builder: (context) {       return cupertinoalertdialog(        ...       );     });

效果如下：

builder通常返回cupertinodialog或者cupertinoalertdialog。

showgeneraldialog

如果上面2种提示框不满足你的需求，还可以使用showgeneraldialog自定义提示框，事实上，showdialog和showcupertinodialog也是通过showgeneraldialog实现的，基本用法如下：

showgeneraldialog(     context: context,     barrierdismissible:true,     barrierlabel: &＃39;&＃39;,     transitionduration: duration(milliseconds: 200),     pagebuilder: (buildcontext context, animation animation,         animation secondaryanimation) {       return center(         child: container(           height: 300,           width: 250,           color: colors.lightgreenaccent,         ),       );     });

效果如下：

加上背景颜色：

showgeneraldialog(     context: context,     barriercolor: colors.black.withopacity(.5),     ...   )

效果如下：

barrierdismissible:是否可以点击背景关闭。

barriercolor：背景颜色

transitionduration：动画时长，

transitionbuilder是构建进出动画，默认动画是渐隐渐显，构建缩放动画代码如下：

showgeneraldialog(     transitionbuilder: (buildcontext context, animation animation,         animation secondaryanimation, widget child) {       return scaletransition(scale: animation, child: child);     },     ...   )

效果如下：

showaboutdialog

aboutdialog用于描述当前app信息，底部提供2个按钮：查看许可按钮和关闭按钮。aboutdialog需要和showaboutdialog配合使用，用法如下：

showaboutdialog(   context: context,   applicationicon: image.asset(     &＃39;images/bird.png&＃39;,     height: 100,     width: 100,   ),   applicationname: &＃39;应用程序&＃39;,   applicationversion: &＃39;1.0.0&＃39;,   applicationlegalese: &＃39;copyright 老孟，一枚有态度的程序员&＃39;,   children: [     container(       height: 30,       color: colors.red,     ),     container(       height: 30,       color: colors.blue,     ),     container(       height: 30,       color: colors.green,     )   ], );

效果如下：

属性说明如下：

• applicationicon：应用程序的图标。
• applicationname：应用程序名称。
• applicationversion：应用程序版本。
• applicationlegalese：著作权（copyright）的提示。
• children：位置如上图的红蓝绿色的位置。

所有的属性都需要手动设置，不是自动获取的。

下面的2个按钮根据应用程序支持的语言显示相应的语言，比如显示中文方法如下：

1. 在pubspec.yaml中配置支持国际化：

dependencies:   flutter:     sdk: flutter   flutter_localizations:     sdk: flutter

1. 在materialapp中配置当前区域：

materialapp(       title: &＃39;flutter demo&＃39;,       localizationsdelegates: [         globalmateriallocalizations.delegate,         globalwidgetslocalizations.delegate,       ],       supportedlocales: [         const locale(&＃39;zh&＃39;, &＃39;ch&＃39;),         const locale(&＃39;en&＃39;, &＃39;us&＃39;),       ],       locale: locale(&＃39;zh&＃39;),       ...   )

此时效果：

此时点击查看许将会调用showlicensepage,相关效果可以查看showlicensepage。

showlicensepage

此控件基本不会用到，浏览一下即可。

licensepage用于描述当前app许可信息，licensepage需要和showlicensepage配合使用，用法如下：

showlicensepage(   context: context,   applicationicon: image.asset(     &＃39;images/bird.png&＃39;,     height: 100,     width: 100,   ),   applicationname: &＃39;应用程序&＃39;,   applicationversion: &＃39;1.0.0&＃39;,   applicationlegalese: &＃39;copyright 老孟，一枚有态度的程序员&＃39;, );

效果如下：

下面的英文我们是无法更改的。

showbottomsheet

在最近的scaffold父组件上展示一个material风格的bottom sheet，位置同scaffold组件的bottomsheet，如果scaffold设置了bottomsheet，调用showbottomsheet抛出异常。

基本用法如下：

showbottomsheet(     context: context,     builder: (context) {       return container(height: 200, color: colors.lightblue);     });

效果如下：

设置其背景颜色、阴影值、形状：

showbottomsheet(     context: context,     backgroundcolor: colors.lightgreenaccent,     elevation:20,     shape: circleborder(),     builder: (context) {       return container(height: 200);     });

效果如下：

通常情况下，我们希望直接从底部弹出，showmodalbottomsheet提供了直接从底部弹出的功能。

showmodalbottomsheet

从底部弹出，通常和bottomsheet配合使用，用法如下：

showmodalbottomsheet(         context: context,         builder: (buildcontext context) {           return bottomsheet(...);         });

效果如下：

设置背景、阴影、形状：

showmodalbottomsheet(     context: context,     backgroundcolor: colors.lightblue,     elevation: 10,     shape: roundedrectangleborder(borderradius: borderradius.circular(30)),     ...   )

效果如下：

isdismissible:是否可以点击背景关闭。

isscrollcontrolled参数指定是否使用可拖动的可滚动的组件，如果子组件是listview或者gridview，此参数应该设置为true，设置为true后，最大高度可以占满全屏。用法如下：

showmodalbottomsheet(     context: context,     isscrollcontrolled: true,     builder: (buildcontext context) {       return listview.builder(         itembuilder: (context, index) {           return listtile(             title: text(&＃39;老孟$index&＃39;),           );         },         itemextent: 50,         itemcount: 50,       );     });

showcupertinomodalpopup

showcupertinomodalpopup 展示ios的风格弹出框，通常情况下和cupertinoactionsheet配合使用，用法如下：

showcupertinomodalpopup(     context: context,     builder: (buildcontext context) {       return cupertinoactionsheet(         title: text(&＃39;提示&＃39;),         message: text(&＃39;是否要删除当前项？&＃39;),         actions: [           cupertinoactionsheetaction(             child: text(&＃39;删除&＃39;),             onpressed: () {},             isdefaultaction: true,           ),           cupertinoactionsheetaction(             child: text(&＃39;暂时不删&＃39;),             onpressed: () {},             isdestructiveaction: true,           ),         ],       );     } );

效果如下：

filter参数可以对弹出框以外的区域做模糊或者矩阵操作，用法如下：

showcupertinomodalpopup(     context: context,     filter: imagefilter.blur(sigmax: 5.0, sigmay: 5.0),     ...   )

效果如下：

弹出框以外的区域有毛玻璃的效果。

showmenu

showmenu弹出一个menu菜单，用法如下：

showmenu(     context: context,     position: relativerect.fill,     items: [       popupmenuitem(child: text(&＃39;语文&＃39;)),       popupmenudivider(),       checkedpopupmenuitem(         child: text(&＃39;数学&＃39;),         checked: true,       ),       popupmenudivider(),       popupmenuitem(child: text(&＃39;英语&＃39;)),     ]);

position参数表示弹出的位置，效果如下：

弹出的位置在屏幕的左上角，我们希望弹出的位置在点击按钮的位置，因此需要计算按钮的位置，计算如下：

final renderbox button = context.findrenderobject(); final renderbox overlay = overlay.of(context).context.findrenderobject(); final relativerect position = relativerect.fromrect(   rect.frompoints(     button.localtoglobal(offset(0, 0), ancestor: overlay),     button.localtoglobal(button.size.bottomright(offset.zero),         ancestor: overlay),   ),   offset.zero & overlay.size, );

你需要将按钮单独封装为statefulwidget组件，否则context代表的就不是按钮组件。

showsearch

showsearch 是直接跳转到搜索页面，用法如下：

showsearch(context: context, delegate: customsearchdelegate());  class customsearchdelegate extends searchdelegate{   @override   list buildactions(buildcontext context) {     return null;   }    @override   widget buildleading(buildcontext context) {     return null;   }    @override   widget buildresults(buildcontext context) {     return null;   }    @override   widget buildsuggestions(buildcontext context) {     return null;   }  }

使用showsearch，首先需要重写一个searchdelegate，实现其中的4个方法。

buildleading表示构建搜索框前面的控件，一般是一个返回按钮，点击退出，代码如下：

@override widget buildleading(buildcontext context) {   return iconbutton(     icon: icon(icons.arrow_back,color: colors.blue,),     onpressed: (){       close(context, &＃39;&＃39;);     },   ); }

效果如下：

buildsuggestions是用户正在输入时显示的控件，输入框放生变化时回调此方法，通常返回一个listview，点击其中一项时，将当前项的内容填充到输入框，用法如下：

@override widget buildsuggestions(buildcontext context) {   return listview.separated(     itembuilder: (context, index) {       return listtile(         title: text(&＃39;老孟 $index&＃39;),         ontap: () {           query = &＃39;老孟 $index&＃39;;         },       );     },     separatorbuilder: (context, index) {       return divider();     },     itemcount: random().nextint(5),   ); }

效果如下：

buildactions输入框后面的控件，一般情况下，输入框不为空，显示一个清空按钮，点击清空输入框：

@override list buildactions(buildcontext context) {   return [     iconbutton(       icon: icon(         icons.clear,       ),       onpressed: () {         query = &＃39;&＃39;;       },     )   ]; }

buildresults是构建搜索结果控件，当用户点击软键盘上的“search”时回调此方法，一般返回listview，用法如下：

@override widget buildresults(buildcontext context) {   return listview.separated(     itembuilder: (context, index) {       return container(         height: 60,         alignment: alignment.center,         child: text(           &＃39;$index&＃39;,           style: textstyle(fontsize: 20),         ),       );     },     separatorbuilder: (context, index) {       return divider();     },     itemcount: 10,   ); }

效果如下：

欢迎加入flutter的微信交流群(laomengit)，一起学习，一起进步，生活不止眼前的苟且，还有诗和《远方》。

当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。