Flutter Card、ListTitle

It is expected that the. 可望而不可即.

 color 卡片背景颜色

Card(
  color: Colors.blue.withOpacity(0.4),
  child: Padding(
    padding: EdgeInsets.all(30.0),
    child: Text('FLUTTER CARD'),
  ),
)

shadowColor 阴影颜色 + elevation 阴影Z坐标

Card(
  color: Colors.blue,
  elevation: 20.0,
  shadowColor: Colors.red,
  child: Padding(
    padding: EdgeInsets.all(30.0),
    child: Text('FLUTTER CARD'),
  ),
)

 

 Card(
        color: Colors.blue,
        elevation: 40.0,
        shadowColor: Colors.red,
        child: Padding(
          padding: EdgeInsets.all(30.0),
          child: Text('FLUTTER CARD'),
        ),
      )

 shape 边框

Card(
        color: Colors.blue,
        shape: RoundedRectangleBorder(
            side: BorderSide(width: 2.0, color: Colors.black)),
        child: Padding(
          padding: EdgeInsets.all(30.0),
          child: Text('FLUTTER CARD'),
        ),
      )

RoundedRectangleBorder   圆角矩形边框

Card(
        color: Colors.blue,
        shape: ContinuousRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
            side: BorderSide(width: 2.0, color: Colors.black)),
        child: Padding(
          padding: EdgeInsets.all(30.0),
          child: Text('FLUTTER CARD'),
        ),
      )

 点击产生圆角扩散效果

Card(
  child: InkWell(
    splashColor: Colors.red.withAlpha(30),
    onTap: () {

    },
    child: Container(
      width: 300,
      height: 100,
      alignment: Alignment.center,
      child: Text('可以被点击的卡片,点击产生红色圆角的效果'),
    ),
  ),
)

 

Card(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const ListTile(
                title: Text('ListTitle One'),
                subtitle: Text('ListSubTitle One'),
              ),
              const ListTile(
                title: Text('ListTitle Two'),
                subtitle: Text('ListSubTitle Two'),
              ),
              const ListTile(
                title: Text('ListTitle Three'),
                subtitle: Text('ListSubTitle Three'),
              ),
            ],
          ),
        ),

 

参考：Flutter Card Flutter ListTitle