微信交流群

老孟公众号

在父组件的角上显示一个对角线的消息的控件,比如debug模式下,显示在App右上角的DEBUG就是此组件实现的。

用法如下:

Banner(
  message: '老孟',
  location: BannerLocation.topStart,
)
1
2
3
4

效果如下:

默认情况下Banner超出了父控件的范围,可以使用ClipRect截取超出的部分。

设置背景颜色、消息样式及位置:

Banner(
  message: '老孟',
  location: BannerLocation.topEnd,
  color: Colors.blue,
  textStyle: TextStyle(color: Colors.red),
)
1
2
3
4
5
6

效果如下:

设置child参数,child显示在消息后面:

Banner(
  message: '老孟',
  child: Container(color: Colors.yellow,),
  location: BannerLocation.topEnd,
)
1
2
3
4
5

# CheckedModeBanner

封装了BannerMaterialApp使用此控件在右上角显示DEBUG标签,源代码如下:


Widget build(BuildContext context) {
  Widget result = child;
  assert(() {
    result = Banner(
      child: result,
      message: 'DEBUG',
      textDirection: TextDirection.ltr,
      location: BannerLocation.topEnd,
    );
    return true;
  }());
  return result;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14