Flutter-Card卡片布局

經典的Material UI卡片式布局，設計出來的UI很有質感。

/**
 * 卡片布局，相當於Android中的CardView
 * const Card({
    Key key,
    this.color,//背景色
    this.elevation,//陰影大小
    this.shape,//設置邊，可以設置圓角
    this.margin = const EdgeInsets.all(4.0),
    this.clipBehavior = Clip.none,
    this.child,
    this.semanticContainer = true,
    })
 */

 

 

 

import 'package:flutter/material.dart';

class FlutterCardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.blueAccent,
      //z軸的高度，設置card的陰影
      elevation: 20.0,
      //設置shape，這里設置成了R角
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),),
      //對Widget截取的行為，比如這里 Clip.antiAlias 指抗鋸齒
      clipBehavior: Clip.antiAlias,
      semanticContainer: false,
      child: getChild(),
    );
  }

  getChild() {
    return Container(
      color: Colors.deepPurpleAccent,
      width: 200,
      height: 150,
      alignment: Alignment.center,
      child: Text(
        "Card",
        style: TextStyle(fontSize: 28, color: Colors.white),
      ),
    );
  }
}

 

 

borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            topRight: Radius.zero,
            bottomLeft: Radius.zero,
            bottomRight: Radius.circular(20.0)),
      )