Flutter UnderlineTabIndicator BoxDecoration ShapeDecoration FlutterLogoDecoration

Flutter 系列文章 总体目录

1、UnderlineTabIndicator

用于TabBar 下面的指示线，当然也可以用于Container等容器。

Container(
      width: 300,
      height: 100,
      padding: EdgeInsets.all(10),
      decoration: UnderlineTabIndicator(
          borderSide: BorderSide(width: 3.0, color: Colors.red),
      insets: EdgeInsets.zero),
//      color: Colors.blue.shade100,
      child: new Text(
        "TextDirection.rtl topStart",
        textDirection: TextDirection.rtl,
        style: TextStyle(),
      ),
      alignment: AlignmentDirectional.topStart,
    );

可以设置宽、颜色以及相对位置

2、BoxDecoration

属性	说明
color	颜色
image	图片
border	边框
borderRadius	圆角半径
boxShadow	影音
gradient	渐变
backgroundBlendMode	背景融合模式，和android中canvas融合模式一样
shape	形状

Center(
        child: Container(
      width: 300,
      height: 100,
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.green,
        border:
            Border.all(color: Colors.red, width: 2, style: BorderStyle.solid),
        borderRadius: BorderRadius.all(Radius.circular(10)),
        boxShadow: [BoxShadow(color: Colors.blue, offset: Offset(5, 5))],
//        gradient: LinearGradient(colors: [Colors.blue, Colors.yellow]),

        backgroundBlendMode: BlendMode.srcATop,
//        shape: BoxShape.rectangle
      ),
      child: new Text(
        "TextDirection.rtl topStart",
        textDirection: TextDirection.rtl,
        style: TextStyle(),
      ),
      alignment: AlignmentDirectional.topStart,
    ));

3、ShapeDecoration

属性	说明
color	颜色
image	图片
gradient	渐变，用法同 BoxDecoration
shadows	阴影 用法同 BoxDecoration
shape	形状

4、FlutterLogoDecoration

正常情况下基本没有，这个就是flutter的logo。