你知道吗，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: '',
    transitionduration: duration(milliseconds: 200),
    pagebuilder: (buildcontext context, animation<double> animation,
        animation<double> 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<double> animation,
        animation<double> secondaryanimation, widget child) {
      return scaletransition(scale: animation, child: child);
    },
    ...
  )

效果如下：

showaboutdialog

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

showaboutdialog(
  context: context,
  applicationicon: image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationname: '应用程序',
  applicationversion: '1.0.0',
  applicationlegalese: 'copyright 老孟，一枚有态度的程序员',
  children: <widget>[
    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: 'flutter demo',
      localizationsdelegates: [
        globalmateriallocalizations.delegate,
        globalwidgetslocalizations.delegate,
      ],
      supportedlocales: [
        const locale('zh', 'ch'),
        const locale('en', 'us'),
      ],
      locale: locale('zh'),
      ...
  )

此时效果：

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

showlicensepage

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

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

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

效果如下：

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

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('老孟$index'),
          );
        },
        itemextent: 50,
        itemcount: 50,
      );
    });

showcupertinomodalpopup

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

showcupertinomodalpopup(
    context: context,
    builder: (buildcontext context) {
      return cupertinoactionsheet(
        title: text('提示'),
        message: text('是否要删除当前项？'),
        actions: <widget>[
          cupertinoactionsheetaction(
            child: text('删除'),
            onpressed: () {},
            isdefaultaction: true,
          ),
          cupertinoactionsheetaction(
            child: text('暂时不删'),
            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: <popupmenuentry>[
      popupmenuitem(child: text('语文')),
      popupmenudivider(),
      checkedpopupmenuitem(
        child: text('数学'),
        checked: true,
      ),
      popupmenudivider(),
      popupmenuitem(child: text('英语')),
    ]);

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<string>{
  @override
  list<widget> 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, '');
    },
  );
}

效果如下：

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

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

效果如下：

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

@override
list<widget> buildactions(buildcontext context) {
  return [
    iconbutton(
      icon: icon(
        icons.clear,
      ),
      onpressed: () {
        query = '';
      },
    )
  ];
}

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

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

效果如下：

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

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