经典的Material UI卡片式布局，设计出来的UI很有质感。这个使用起来很简单。
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),
),
);
}
}
Card Widget
我们可以通过设置shape，来达到各种效果。例如：
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.zero,
bottomLeft: Radius.zero,
bottomRight: Radius.circular(20.0)),
)
image.png
博客地址
代码地址
Flutter 豆瓣客户端，诚心开源
Flutter Container
Flutter SafeArea
Flutter Row Column MainAxisAlignment Expanded
Flutter Image全解析
Flutter 常用按钮总结
Flutter ListView豆瓣电影排行榜
Flutter Card
Flutter Navigator&Router(导航与路由)
OverscrollNotification不起效果引起的Flutter感悟分享
Flutter 上拉抽屉实现
Flutter 豆瓣客户端，诚心开源
Flutter 更改状态栏颜色
