实现一个个人名片效果:
效果图
基本用到了学过的一些 widget 和布局容器
class CardHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
title: Text("Flutter 笔记"),
centerTitle: true,
backgroundColor: Colors.grey[850],
),
body: Padding(
padding: EdgeInsets.fromLTRB(30, 40, 30, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: CircleAvatar(
backgroundImage: NetworkImage("https://upload.jianshu.io/users/upload_avatars/6245111/ba1ea0f4-ec28-46e2-838f-c9d3a54054ad.png?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120"),
radius: 40,
),
),
Divider(
height: 60,
color: Colors.grey[800],
),
Text("姓名", style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
)
),
SizedBox(height: 10,),
Text("Brook", style: TextStyle(
color: Colors.amberAccent,
fontWeight: FontWeight.bold,
fontSize: 28.0,
)
),
SizedBox(height: 30),
Text("公司", style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
)
),
SizedBox(height: 10,),
Text("宇宙无敌科技", style: TextStyle(
color: Colors.amberAccent,
fontWeight: FontWeight.bold,
fontSize: 28.0,
)
),
SizedBox(height: 30),
Text("岗位", style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
)
),
SizedBox(height: 10,),
Text("优秀的 UI 开发者", style: TextStyle(
color: Colors.amberAccent,
fontWeight: FontWeight.bold,
fontSize: 28.0,
letterSpacing: 2.0,
),
),
SizedBox(height: 30),
Row(
children: <Widget>[
Icon(Icons.email, color: Colors.grey[400],),
SizedBox(width: 5),
Text("cirpxpp@163.com", style: TextStyle(color: Colors.blue[200], fontSize: 15, letterSpacing: 1.0),)
],
),
],
),
),
);
}
}
网友评论